Questions tagged [react-native-reanimated-v2]
242 questions
1
vote
1 answer
Animate bottom navigation bar with Animated.View
Attempting to hide/show the bottom navigation bar on React-Native app
When wrapping the navigation tab With the navigation styling collapses and the bottom tab bar jumps to the top of the screen and requires much styling to put it…
Idan
- 5,405
- 7
- 35
- 52
1
vote
1 answer
How to achieve the ripple effect in React Native
In some applications, I see when a user is speaking the background of the user profile has these circles increasing and decreasing in radius.
How do I achieve this using React Native and Reanimated-v2?
Chindukuri Pavan
- 77
- 1
- 9
1
vote
0 answers
How to dinamically update the value coming from useAnimatedStyle - Reanimated 2
Say that I have a component where I create child components based on the number of elements passed from the parent ( think of it as a page indicator, for example ).
What I would like to do, is to animate the transition between these dots (their…
Jorge
- 111
- 4
1
vote
1 answer
Unable to build app after reanimated 2 installation in react native
I just ran into issues with reanimated 2 (2.7.0) while trying to build react native for ios with the following errors:
ERROR TypeError: Cannot add new property '__reanimatedHostObjectRef'
This error is located at:
in AnimatedComponent(View) (at…
yaxx
- 529
- 1
- 6
- 22
1
vote
1 answer
Animate multiple interpolation at the same time in React-Reanimated v2
I was looking for this Animation for my Custom Drawer Navigation:
Instead, I got this:
My Codes are:
Main Component:
import * as React from 'react';
import { View } from 'react-native';
import { createDrawerNavigator } from…
Maruf
- 69
- 1
- 9
1
vote
0 answers
What are the differences between the FlatList created via. `Animated.FlatList` and `Animated.createAnimatedComponent(FlatList)`?
What are the main differences between these two FlatList components?
Note: Animated is imported from 'react-native-reanimated' in both instances.
IronManAYaad
- 143
- 2
- 7
1
vote
0 answers
own bottomsheet is every time on screen, performance problems?
I Created a bottom sheet with reanimated and gesture handler.
So it works fine, but if I close the modal, the modal is always open but you dont see it, it is under the screen. Get I performance problems or is that bad ?
import { Dimensions,…
universe11
- 703
- 1
- 11
- 35
1
vote
1 answer
React Native Gesture Handler / React Native animated 2: Tried to synchronously call function {_readOnlyError} from a different thread
Error
Im learning react native gesture handler and react native reanimated from the docs. I got this error when i got the gesture coordinates ,passed them to the useShared value translateX. Im running my app on a Samsung Galaxy A5 2017 running…
Justin John Mgonja
- 11
- 1
- 2
1
vote
1 answer
React Native Test Component With Moti and Jest error: SyntaxError: Unexpected token 'export'
i am trying to test a component that was created with the moti library but when i run the test show me the error. The Moti documentation doesnt show anything about how to mock the component…
Tiago Palmas
- 113
- 2
- 7
1
vote
0 answers
React native reanimated layout problem not showing right height if remove
I use react-native-animated to show my list items with animations. It works greatly but if I remove an Item, then the half of the button is not showing. Loot at the video:
enter link description here
Code:
import React, { useCallback, useState }…
universe11
- 703
- 1
- 11
- 35
1
vote
0 answers
Why I Should every time use GestureHandlerRootView?
I learn react native gesture handler and react-native-reanimated on youtube. I never see that the guys use GestureHandlerRootView. But if I dont use this, nothing works, so I have to do every time on the top of the return to use this. Why it works…
universe11
- 703
- 1
- 11
- 35
1
vote
1 answer
React Native Reanimated 2 conflict FlatList and PanGestureHandler
I'm trying to create vertical flatlist with swipe to delete functionality. So every item of my flatlist additionaly handles by PanGestureHandler My problem is when I try to scroll my flatlist scroll doesn't work because of the conflict between…
laneboyandrew
- 290
- 6
- 17
1
vote
0 answers
WithSpring along with UseSharedValue react -native-reanimated, react-native-gesture-handler
What I am trying to achieve is that when release the box i want it to be in the center and i want a smooth animation but using withSpring inside the animated Value "offset" crashes the app
My code is:
import React from 'react';
import Animated, {
…
Farooq sheikh
- 31
- 7
1
vote
0 answers
Display error with react-native-reanimated v2?
Im trying to add some simple animations to my app. Decided to try it with react-native-reanimated v2. I did the bare minimum and followed the installation guide/tutorial on respective expo and reanimated pages (Basically set hermes as engine and…
Rzll
- 91
- 5
1
vote
1 answer
react native - dynamic reanimated2 entering and exiting animation
I am using reanimated2 for my react native project. I want to dynamically change the animation to ZoomInLeft or ZoomInRight based on the situation:
export default function SigninCard(props){
const [zoomout,setZoomout] = useState('left')
…
sooon
- 4,718
- 8
- 63
- 116