Questions tagged [react-native-reanimated-v2]

242 questions
68
votes
25 answers

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

This is my babel file My code: import React, { useRef, useState } from 'react' import { View, useWindowDimensions, Button } from 'react-native' import Animated, { runOnUI } from 'react-native-reanimated'; export default function Login() { …
Ajay Pandey
  • 838
  • 1
  • 6
  • 11
10
votes
1 answer

Reliable absolute position at screen with React Native

What is the most reliable way to get the absolute position on screen of any element? I have the problem that when an element above (parent) is added with my methods I can not get the absolute position of an element. Context: I need to get the…
Coder949
  • 987
  • 1
  • 8
  • 29
10
votes
6 answers

React-native 0.65 (targetSdk=30) android build is failing because of react-native-reanimated

I already upgraded react-native from version 0.64.1 to 0.65.0-rc.3 because targetSdk=30 is required to publish a bundle to Google Play from 1st august 21. I was upgrading letter to letter using upgrade helper Now I am getting ./gradlew bundleRelease…
9
votes
2 answers

React Native Gesture Handler Not Working On Android

I am using react-native-gesture-handler and react-native-reanimated package to animate a View in react native. The scale of the view should increase on tap and the backgroundColor should change to red on tap. Everything works fine when I launch the…
9
votes
10 answers

TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)

TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined) I am using React Native (not expo). I don't even have reanimated downloaded. I had it downloaded…
7
votes
0 answers

React native reanimated , application crashs when call setState in callback with withTiming or withSpring

My React native expo application crashing without any error when call function() in withTiming() callback example : const whenFinishFunction = () => { // do some thing }; const [animationState, setAnimationState] =…
6
votes
2 answers

reanimated version problem (couldn't determine the version of the native part of Reanimated.)

I am trying to practive this video. https://youtu.be/R7vyLItMQJw (The basics of PinchGestureHandler with React Native Reanimated 2) but my app doesn't work touch. I get this Error [Reanimated] Couldn't determine the version of the native part of…
6
votes
1 answer

issue animating the react navigation native stack header

What I want I'm trying to animate the react navigation native stack header by changing the background from a transparent to a gray color when the user scrolls down. I was reading the documentation and it suggests using the navigation.setOptions to…
6
votes
1 answer

PanGestureHandler Expected `onGestureHandlerEvent` listener to be a function

Using PanGestureHandler from react-native-gesture-handler with react-native-reanimated with useAnimatedGestureHandler throws this error. Expected onGestureHandlerEvent listener to be a function, instead got a value of object type These are the…
6
votes
2 answers

React Native Reanimated 2 Entering Animations doesn't work

I'm trying to use https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/entryAnimations From the documentation it seems pretty simple but when I run the code below nothing happens: ... import Animated, { AnimatedLayout,…
5
votes
0 answers

drawer navigator not working properly with reanimated 2

So i am using drawer-navigator (react-navigation). Everything was working fine until i upgraded the packages. Here is the new version of it and its dependencies; "@react-navigation/drawer": "^6.3.1", "react-native-gesture-handler":…
5
votes
3 answers

error: index.js: Cannot find module 'babel-plugin-r' React Native

What I have Done to cause the Error: I have a freshly installed Bare React Native Project . I wanted to use Drawer Navigation and had to install React Native Reanimated 2.3.0-alpha.2 . what I have already tried to resolve the error I have installed…
5
votes
2 answers

@gorhom/react-native-bottom-sheet doesn't work on Android

I've been using the library to create bottom sheet modals for my react native app, but it's doesn't seem to work on Android, but on iOS it does. I used the same backdrop component and handle component suggested in the docs, and everything is…
5
votes
1 answer

How to do series/parallel animation in react-native-reanimated 2?

I'm looking for the equivalent of Animated.sequence and Animated.parallel from react-native. So far from the docs for v2, I could only see the withSequence function that changes the value of only on value and therefore the style of only one…
mohsinulhaq
  • 1,059
  • 1
  • 18
  • 31
5
votes
1 answer

React Native Reanimated 2 animating the length of an SVG Path

I'm trying to animate an SVG path's length form 0 to it's full length in React Native Reanimated 2. Here is my sample path: const AnimatedPath = Animated.createAnimatedComponent(Path); const animatedProps = useAnimatedProps(() => { const path = …
1
2 3
16 17