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…
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…
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]…
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…
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…
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…
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…
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

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({ …
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…
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 = …
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:…
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
1
2
3
31 32