For questions specifically related to the React Native Animated framework that is used to animate React Native components in a performant manner.
Questions tagged [react-animated]
369 questions
4
votes
1 answer
Animated Node does not exist with tag 1
We recently updated to Expo SDK 40 and now have run into a issue with “React Native: Animated Node with tag 1 does not exist”.
This is only an error on Android that is occurring.
We’ve changed all instances of useNativeDriver to false.
We’ve also…

SKeney
- 1,965
- 2
- 8
- 30
4
votes
0 answers
How to add listener to interpolated Animated value react native?
I want to add a listener to an interpolated Animated value, but the callback isn't being called at all...
My code is below, am I doing something wrong?
import React, { useEffect } from 'react';
import {View, Animated } from 'react-native';
export…

user1726203
- 71
- 3
4
votes
2 answers
Slide up down animation in the react native
I am using animation for up and down in the react native, But the animation just slide from up to down and then stop at the bottom i want to move it up and down continuously. I have also used animation loop so please check and provide me solution…

Rover
- 661
- 2
- 18
- 39
4
votes
2 answers
scaling a react-native button with animated
I'm creating a touchable button in react native with an animation. When the button is pressed, it should scale down a little bit. When the pressure is released, it should scale back to normal.
This is my code:
export const TouchableButton = (props)…

Sam Leurs
- 1,592
- 1
- 19
- 48
4
votes
1 answer
Pass Animated.Value to styled component in react native?
How do I pass Animated.Value to styled components?
I'm getting this error whenever I uncomment bottom: ${p=>p.bottom}; line:
JSON value '[object Object]' of type NSString cannot be converted to a YGValue. Did you forget the % or pt suffix?
Here's…

hackerl33t
- 2,117
- 3
- 14
- 21
4
votes
1 answer
Get height of variable children in a functional component in React Native
I am trying to get the height of children in my component in order to implement an animation.
This is the card component
Expanded with children
I'd like to get the height of the children components so I can animate a height value in order to…

RonE
- 404
- 6
- 18
4
votes
0 answers
Animated TextInput dismisses the keyboard after each character
I'm animating the TextInput to move with translateY, but when I apply the React Native animated, TextInput responds to typing only one character at a time. What I mean is, once a character has been input, the keyboard is dismissed.
I have three…

Kevvv
- 3,655
- 10
- 44
- 90
4
votes
0 answers
React Navigation Animated Header in Mobile
I've a layout having a Header (React navigation) which is transparent and a ScrollView which contains a banner and other items. What I want to achieve is:
FIRST) To animate the header color on scroll i.e. Transparency decreases. Also note that I…

TalESid
- 2,304
- 1
- 20
- 41
4
votes
0 answers
React Native - Animated Modal right above bottom tabs
I have been following a tutorial to create a React Context Provider through which I can have a general panel across all tabs and panels of my React Native app. Complete Expo Snack of the code here.
This "general panel"(VideoModal.js) has a…

John Doe
- 440
- 4
- 16
4
votes
1 answer
How to intially set opacity when using interpolation
I have quite an issue, where I cannot set initially opacity of an image as 0 when using interpolated scroll value.
So when I am using logoOpacity value Animated.View is fully visible, but for example if I use __opacity it does apply valid value and…

Rafał Łyczkowski
- 995
- 2
- 11
- 27
4
votes
3 answers
How to get the current value of animated values with option useNativeDriver set to true?
Im trying to get the current value of an animated.Value that has the option useNativeDriver set to true, but it doesnt work. With others animated values that have same option set to false, it works perfectly.

Helmer Barcos
- 1,898
- 12
- 18
4
votes
2 answers
Error when use useNativeDriver in React Native Animated
When I use useNativeDriver in React Native Animated
state = {
chevronUp: new Animated.Value(-50),
};
Animated.spring(this.state.chevronUp, {
toValue: 50,
friction: 5,
useNativeDriver: true, // <----- this line
}).start();
and…

Mahdi Bashirpour
- 17,147
- 12
- 117
- 144
4
votes
0 answers
What's the difference between setting the Animated Value in the onPanResponderMove method via "Animated.Event" and "setValue"?
If you want to drag and drop an element with PanResponder, you could pass the values of the movement to the onPanResponderMove method in two ways:
1. With Animated.Event
onPanResponderMove: Animated.event([
null,
{ dx: this.state.pan.x, dy:…

Klemens159
- 171
- 1
- 11
4
votes
2 answers
React Native , animated negative rotation
I'm using a pan responder to capture user's swipe movement, downward or upward and upon that, I rotate a circle :
if positive :
Animated.decay(animation, {velocity: fingerVelocity}).start();
if negative :
Animated.decay(animationNegative,…

Milad
- 27,506
- 11
- 76
- 85
4
votes
1 answer
Undefined is not an object animated.interpolate react native
I am looking at how to animate colors in react native and followed this tutorial https://codedaily.io/screencasts/8/Animate-Colors-with-React-Native-Interpolate
All I have done is first run react-native init then replace the code in my App.js with…

rivaldragon
- 94
- 1
- 3
- 9