Stack Overflow
Stack Overflow

Questions tagged [react-animated]

For questions specifically related to the React Native Animated framework that is used to animate React Native components in a performant manner.

369 questions
22
votes
1 answer

State Management for Animations Using React Native and Redux

Background I've been building an application using React Native & Redux to make an assessment over whether to use it for an upcoming project over Swift and going fully native. I genuinely believe that Dan Abramov's techniques with Redux are a case…
Matt Lacey
  • 8,227
  • 35
  • 58
14
votes
3 answers

React Native: Propagate Pan Responder event from view to inner scroll view

I have a ScrollView inside an animated View that has panning. ... This is a sample view of my screen: A user should be able to swipe upwards…
Gilbert Nwaiwu
  • 687
  • 2
  • 13
  • 37
13
votes
3 answers

React Native. Why android emulator is so slow?

The same project runs 60FPS on iOS emulator, but in android emulator everything is slow. I do nothing but there are hops in frame rate from 53 to 56. JS FPS and UI FPS are always identical. I created animated component and when I click on it…
John Smith
  • 1,204
  • 3
  • 22
  • 42
11
votes
2 answers

react native circle transform translate animation

hi i want that the animated.view move like a circle. I thought to this with sinus but it does not work. Somebody knows how to do it? I dont want to rotate the view. It just should move in circle. I am new to react native. It would be nice if…
otto
  • 1,815
  • 7
  • 37
  • 63
10
votes
1 answer

React Native Animated to scale an image

I have 2 issues with the Animated API. 1st: I am able to show the Image from left to right with the following code. I want to scale the Image from position X=40 (leftPadding), Y=100(topPadding), height:20, width:20 to X=20, Y=10, height:250,…
Somename
  • 3,376
  • 16
  • 42
  • 84
9
votes
0 answers

Custom interpolation function for Animated values

I'm trying to animate the X value from 0 to PI, and the Y value from 0 to sin(x). Something like: this.positionX = new Animated.Value(0); Animated.timing( this.positionX, { toValue: Math.PI, duration: 1000, } ).start(); // this…
kimar
  • 646
  • 4
  • 10
9
votes
1 answer

How can I interpolate a Animated value to result into a boolean or a string in react-native?

I happen to have an animation that goes from -1 to 1 and I want to translate those values into the following 2 strings: 'Previous' if the value is negative. 'Next' if the value is positive. this.state.anim.interpolate({ inputRange: [-1, 0, 1], …
SudoPlz
  • 20,996
  • 12
  • 82
  • 123
8
votes
0 answers

Slide to record animations in react-native like whatsapp / viber

I want to replicate the long press to record and slide left to cancel of whatsapp/viber messengers. import React, {useRef, useState} from 'react'; import { Dimensions, TextInput, TouchableWithoutFeedback, View, PanResponder, Animated as…
Stathis Ntonas
  • 1,222
  • 2
  • 20
  • 49
8
votes
2 answers

How can we make an animated strike through on react native text?

I have a todo list, each list item has a check box. When I check the box, an animated strike-through effect should show from left to right. How to do that?
Supriya Gorai
  • 352
  • 3
  • 16
8
votes
4 answers

React-Native Add Fade in Animation

I am trying to make this card fade in every time the component loads and fade out after it unmount's using hooks but I am failing to do so and desperately need someones help. Please can you show me how to animate this card every-time it's loaded and…
Dilhan Bhagat
  • 408
  • 1
  • 10
  • 20
8
votes
3 answers

Jest: How can I mock out Animated loops?

I'm trying to run a snapshot test for an animated component which has the following animated code (called on componentDidMount): animate() { Animated.loop( Animated.sequence([ Animated.timing(this.state.pulseAnimation, { …
johnny
  • 1,434
  • 1
  • 15
  • 26
7
votes
0 answers

Changing ZIndex for Dynamic Card Flatlist which uses Animated API

I have a flatlist with two columns which renders card components. Once a user clicks a card, it pops up by using Animated API of React Native. I am changing the clicked component's ZIndex value to 10. When it is closed, the value is set to 0. The…
Uğur Genç
  • 121
  • 8
7
votes
3 answers

How to dynamically set height of a component whose height is an animated value post-animation?

The goal: have a dropdown view that animates the height-expansion over time. the caveat is this: once the view is expanded, it needs to be able to dynamically handle whether or not there is additional view data present. if it is present, a couple…
Jim
  • 1,988
  • 6
  • 34
  • 68
7
votes
2 answers

Draggable view within parent boundaries

I'm facing a task where I want to place a draggable marker on a background image and afterwards get the coordinates of the marker within the background image. I've followed this neat tutorial to make a draggable marker using Animated.Image,…
kuhr
  • 582
  • 8
  • 18
7
votes
6 answers

error: Attempted to assign to read only property on using Animated react native

For some reason I'm not able to see what I'm doing wrong with my code. I seem to be using Animated just as the documentation shows but this error keeps coming. The code snippet: import React, { Component } from 'react'; import { …
Jeff P Chacko
  • 4,908
  • 4
  • 24
  • 32
1
2 3
…
24 25