Questions tagged [react-native-reanimated]
469 questions
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…

shramee
- 5,030
- 1
- 22
- 46
6
votes
1 answer
React Native render error Value is undefined expected a object
So I dont know why I am getting this weird error and I am unable to find any solution for it so plz help with me
Error
Code
import React, { useRef, useState } from 'react'
2 import Animated, { Easing, useAnimatedProps } from…

Shiven Sharma
- 109
- 8
6
votes
1 answer
Compilation error with react-native-reanimated and babel
I would like to add react-native-reanimated to my project, I followed the installation guide and at the time of adding the plugin for Babel I receive an error from it when launching the application :
error: index.js: [BABEL]…

ablause
- 88
- 1
- 6
6
votes
3 answers
How to listen to value change in react-native-reanimated?
I have created a simple animation with Animated from react-native with react-native-svg.
This do the jobs well,
But Now I switched to react-native-reanimated cuz I read on their website that reanimated is faster than Animated from react-native.
But…

Muhammad
- 2,572
- 4
- 24
- 46
6
votes
1 answer
How to consequently animate several elements with react-native-reanimated?
Assuming I have two Views and I need to animate them consequently, i.e.
First view animates
First view finishes animation, second view animates
How exactly do I do that with react-native-reanimated? I've found very little information in the…

Nikita Neganov
- 545
- 8
- 22
6
votes
0 answers
Pangesturehandler and Scrollview not working together
I coded a menu using PanGestureHandler and ScrollView.
The problem is; when PanGestureHandler is active, ScrollView's scroll is not working.
I mean swipe function is working but scrolling is not work.
My expectation is using these two feature…

Emre Vatansever
- 83
- 8
5
votes
2 answers
React Native jest 26 to jest 27 upgrade is painful, timeout and animation
We are trying to upgrade our test environment from jest 26 to 27. This is our working branch : https://github.com/pass-culture/pass-culture-app-native/tree/update-jest-27
So far, we encounter a bunch of error that we are still unable to fix, for…

Dimitri Kopriwa
- 13,139
- 27
- 98
- 204
5
votes
1 answer
When should we use runOnUI and runOnJS?
If I understand correctly the purpose of 'worklets' it to run the code on UI thread:
With Reanimated 2 we spawn a secondary JS context on the UI thread that then is able to run JavaScript functions.
Then why do we need runOnUI and when should we…

AlmaG3st
- 192
- 9
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…

tech0int
- 65
- 1
- 5
5
votes
1 answer
useAnimatedGestureHandler onStart method correct context argument type
TL;DR
Has anyone have any examples what the correct generic is for useAnimatedGestureHandler?
Problem:
I am following this tutorial on Reanimated 2 gestures animation. There's this example:
//...
const onGestureEvent =
useAnimatedGestureHandler({
…

Andris Laduzans
- 408
- 4
- 14
5
votes
1 answer
Native base Footer accepting touches for player in react native
I have a MainFooter components that contains the footer and mini player which animates to full-view when clicked. I have a problem that whenever we click on one of the footer Tabs, the player maximizes and then got stuck there only, being…

bucky roberts
- 339
- 3
- 9
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 =
…

ReactNativeDev
- 51
- 2
5
votes
1 answer
Only run Reanimated animation on TextInput focus/blur
I am currently learning to create React Native Animations with the RN Reanimated and Redash libraries. I've managed to create a simple timing animation which transitions a TextInput placeholder into a label.
import Animated, { Clock, Easing, set,…

Conor Watson
- 567
- 1
- 7
- 28
5
votes
2 answers
Cannot find module 'react-native-reanimated/plugin' from /projectFolder
I wanted to use react-native-router-flux so i added its dependencies as described in its documents. I also added babel plugin dependency for react-native-reanimated in babel.config.js as below:
module.exports = { presets:…

b.andarzian
- 53
- 1
- 1
- 7
5
votes
2 answers
React-native-reanimated: Unable to resolve "./useValue"
I am trying to build a react native app. I have caught an error on the terminal saying
Unable to resolve "./useValue" from "node_modules\react-native-reanimated\src\Animated.js"
I reinstalled react-native-reanimated to the expected version…

Tiago
- 121
- 2
- 9