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.…
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…
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…
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…
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…
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…
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( …
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…
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…