Questions tagged [react-native-reanimated]

469 questions
2
votes
2 answers

Custom Drawer animation won't work after updating drawer navigation 6

i need some help about my custom drawer . it used to work perfectly with slide animation but after updating to drawer v6. the package react-native-reanimated has been updated too. he stops work. can you help me guys. thanks const CustomDrawer =…
gfortune
  • 29
  • 3
2
votes
1 answer

Set value immediately after another one have been set in Reanimated 2

I am using Reanimated 2 to build a game with React Native its performance is incredibly good but I have a problem. I am using a shared value to animate a View as we all know setting the value of the shared value will automatically change the style…
2
votes
1 answer

How to trigger a function once the animated value is over .8 and pass in the current state to that function(not old state)

I'm trying to trigger this function called moveNow() once reactAnimated value is over .8. I'm currently doing this with a addListner() and I'm adding a listener every time a list called DATA_LAYER.names in my useContext changes. The problem is that…
carlosdafield
  • 1,479
  • 5
  • 16
2
votes
2 answers

onGestureEvent not being called when I try to move a box with PanGestureHandler

I've started react native project from scratch, installed react reanimated 1. I've pushed the repository: https://github.com/matiasmm/test-reanimated-gestures/tree/caf1af2e53605f19b466a27108ad408c95290707 I'm trying to test the pan event, but…
2
votes
0 answers

Performance issues accessing SharedValue in react-native-reanimated 2.0

I am developing an app which is very animation heavy. I also need to do collision detection. I can not wait for the drop. It needs to be detected live. So I need to watch a the onActive of useAnimatedGestureHandler. At the moment I just do it with…
2
votes
2 answers

React Navigation, How To Place Screens Top On Each Other

I want to achieve a screen like below image. I have this transition: const MyTransition = { transitionSpec: { open: { animation: 'timing', config: { duration: 750, }, }, close: { animation: 'timing', …
2
votes
2 answers

Task :app:bundleReleaseJsAndAssets FAILED - React Native - Android

Getting this error in my React-Native app when I run on Android using npx react-native run-android --variant=release or generate a Release Build. I tried whatever solutions I found on Stackoverflow and GitHub like - upgrading gradle build tools…
2
votes
1 answer

interpolateNode vs interpolate : interpolate causes jank while animating height while interpolateNode doesn't

I have just started using react-native-reanimated. And I would like to use reanimated v2 apis (newer ones). Here, in this example, there is a considerable performance drop using interpolateNode and interpolate Here's the example import * as React…
2
votes
0 answers

runOnJS automatically closes app in react native without error on terminal?

this is my code: const setIngredient = useCallback(() => { setState({ ...state, [ingredient]: Math.max(...Object.values(state)) + 1, }); }, [state, ingredient, setState]); const onGestureEvent = useAnimatedGestureHandler({ …
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
2
votes
1 answer

withTiming callback called on render, not when animation finished

I've started to play around with react-native-reanimated v2. const fontSize = useSharedValue(25); const config = { duration: 500, easing: Easing.bezier(0.5, 0.01, 0, 1), }; const fontStyle = useAnimatedStyle(() => { return { …
Jake Owen
  • 137
  • 1
  • 9
2
votes
1 answer

How to debug react-native-reanimated 2?

Is there a way to debug the current .value of a sharedValue, something like this? const progress = useSharedValue(0); {() => debug('progress: ', progress.value)}
2
votes
2 answers

Excessive number of pending callbacks: 501 React Navigation

I am using StackNavigator for my chat app, and when i use dynamic header title, it throws error of excessive number of pending callbacks: 501. SOme pending callbacks that might have leaked by never being called from native code: {'1434: {'module':…
2
votes
2 answers

Keep looping an animation in react-native-reanimated

I'm totally new to animations in react-native and I'm trying to create an animated pulsating button using the react-native-reanimated library. Animation concepts are really not that clear for me yet but by modifying someone else code, I got pretty…
Sam
  • 26,817
  • 58
  • 206
  • 383
2
votes
0 answers

button Sliding effect using react-native-reanimated

I have this view that map a list of buttons and display them to the user, then the user can select which view to see. it use a list because this component is used in multiple views and the buttons are different. I wanted to create a sliding effect…
GHOST
  • 203
  • 4
  • 14
2
votes
0 answers

onScrollBeginDrag Animated.event with useNativeDriver: true for native ui recycler view component not working

We have a recycler view in our Android code base which we want to convert into a native UI component and utilize it in React Native. I am prototyping some functionality and ran into this issue. We have to implement a spring animation based on…