Questions tagged [react-native-reanimated]
469 questions
0
votes
1 answer
React Native - How to compare two Animated.Values in shouldComponentUpdate?
I am optimizing my flatlist items (progressive images) and to avoid extending React.PureComponent I have decided to implement my own shouldComponentUpdate life-cycle method.
My progressive images have two animated values:
1. thumbnailOpacity
2.…

Victor Molina
- 2,353
- 2
- 19
- 49
0
votes
1 answer
Animation does not work properly in react native
I tried making a carousel by watching a tutorial but I cannot get it to work for an event driven animation. Instead of animating it just updates the position to new location.
This does not happen if I use only one type of animation for transition,…

Sid Sharma
- 51
- 1
- 9
0
votes
1 answer
After Setting State, Second Drag Not Animated - React Native, Expo, PanGestureHandler
I throw myself on your mercy asking for help figuring out why, in React Native using reanimated and PanGestureHandler, I can drag an object once, but when the gesture event ends and I update state, the secont->Nth drag animation doesn't happen…

aproximation
- 491
- 4
- 13
0
votes
0 answers
How to pause the clock when app is going in the background state
I created a progress bar using react-native-reanimated and react-native-redash that is working fine but now I want to pause the progress or clock when the app is going to the background state and when the app comes to the active state it should be…

Sk Sk
- 21
- 5
0
votes
1 answer
React native pinch zoom with redash and reanimated
I'm just trying to scale the image with pinch zoom using reanimated and redash.
I followed this tutorial
But the component that I grab stays on top of the previous but under the next component. I know It's a bit complicated explainatory. For that I…

Ozzie
- 475
- 1
- 5
- 20
0
votes
1 answer
Why JS thread drops frames when using React Native Reanimated?
I'm not sure why JS thread drops frames when I'm toggling the height of the View when using react-native-reanimated v2? When I press the button JS frames are around 50-55 and UI thread fps stay 60. Thank you.
My code is pretty simple:
import React,…

cinemanja
- 481
- 6
- 19
0
votes
0 answers
React Native Reanimated 2 - useSharedValue is not a funtion
I emigrated from Reanimated 1 to Reanimated 2. When I am trying to run the example code given in the playground repo -in the installation guide, I get this error:
Error given in the emulator
Link to repo/code:…

jorho
- 49
- 2
- 7
0
votes
0 answers
React Native: Rendered more hooks than during previous render by useRef in react-native-reanimated
In my RN 0.62.2 app, there is an error after the declaration of animated value is changed to use useRef. The code without error was:
import Animated from 'react-native-reanimated';
import {Value} from Animated;
const dragX = new Value(0);
Since it…

user938363
- 9,990
- 38
- 137
- 303
0
votes
1 answer
React Native: panGestureHandler stops working after re-rendering
There is a simple drag animation in my 0.62.2 app. The drag was implemented with react-native-gesture-handler 1.6.1 and react-native-reanimated 1.10.1. The dragged item is an image in a square grid. There are 2 grid or 3 grids in a row to display…

user938363
- 9,990
- 38
- 137
- 303
0
votes
1 answer
RN gesture handler: 1 image is dragged but 2 images are moving together
In my React Native 0.62.2 app, react-native-gesture-handler 1.6.1 and react-native-animated 10.10.1 are used to make image grid draggable. The problem is that all uploaded images grids are moving together instead of individually draggable. Here is…

user938363
- 9,990
- 38
- 137
- 303
0
votes
1 answer
Updating content on a Screen in React Native makes Animated Components Freeze
The home screen of my react native app has components which animate on scroll. However, any little change to the screen resets the components to their default state and they don't animate anymore.
I am attempting to fetch data and display it on the…

Timothy Oliver
- 470
- 9
- 19
0
votes
1 answer
PanGestureHandler: Bottom to top resets to bottom and then animates
I have attached the snack for better clarity. I am trying to achieve an animation similar to the iOS/Android notification bar.
I am successfully able to drag the handlebar to the bottom using the below-given code:
const translateY = cond(
…

shet_tayyy
- 5,366
- 11
- 44
- 82
0
votes
1 answer
react-native-reanimated resize button
I'm trying to create a button that resizes (gets a little bit smaller when it' pressed). I use TouchableWithoutFeedback from react-native-gesture-handlerand I use react-native-reanimated.
This is my code so far:
import React, { useState } from…

Sam Leurs
- 1,592
- 1
- 19
- 48
0
votes
1 answer
My reanimated works more than once. How can make this animation work for once?
I'm trying to make my tabbar dissappear while scrolling down with animation. onScroll sends boolean value if last y coord is bigger than current y coord its scrolling up and otherwise scrolling down. If I continue to scroll down onScroll still sends…

Necmettin Sargın
- 87
- 1
- 10
0
votes
1 answer
react-native custom slider, using `diffClamp`
I have made a custom slider which can be seen here.
The problem is with the following snippet
let transX = cond(
eq(gestureState, State.ACTIVE),
diffClamp(add(offsetX, dragX), 0, 200),
set(offsetX, add(offsetX, dragX)),
);
I am able to limit…

Giridhar Karnik
- 2,213
- 4
- 27
- 47