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
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…
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…
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
1 2
3
24 25