Questions tagged [react-native-reanimated-v2]

242 questions
0
votes
0 answers

Optimizing a react-native-reanimated animation for low end devices

I'm looking for some advice optimizing this component. It's my first time working with react-native-reanimated (v 2.14.4). Client wants this ID card to constantly move as a security measure. After a few loops, it seems to run really badly on a low…
warm__tape
  • 250
  • 4
  • 19
0
votes
0 answers

I get error "TypeError: Cannot read property 'createNode' of null, js engine: hermes" and " Invariant Violation: "main" has not been registered."

The steps I have used npm install react-native-reanimated-carousel then installed npm install react-native-gesture-handler and npx expo install react-native-reanimated then I edited my App.js to add GestureHandlerRootView const Stack =…
0
votes
0 answers

Create a Tab component with react-native-gesture-handler that can accept a list of Flatlist as childs

I wanted to create a generic and simple tab component that can accept a list of ReactNode and to be able to swipe horizontally through 3 full screen pages. It worked well until I needed to pass 3 FlatList (one on each page) to this component. The…
0
votes
0 answers

translateX and translateY defined multiple times in one transform style

Here is piece of animated style code for a pinch action with React Native gesture handler 2.x/React Native reanimated 2.x. export default Swipe = ({route, navigation}) => { const { width, height } = Dimensions.get("window"); const…
0
votes
0 answers

RN Reanimated: exisiting animation on element removed from list

I'm struggling with the existing prop of Layout Animations of react-native-reanimanted and removing an element from a list of components... The idea is easy, when you press the Remove button the element pressed is removed from the list using the…
0
votes
0 answers

Animated Gesture Handler React Native update state

Im trying to create a state where I save my value whenever the Gesture is onActive. I need the value so I can find the index of my snapPoints and then use that index to find my current value. const usePanGestureHandler = (snapPoints) => { const…
Strike
  • 77
  • 1
  • 7
0
votes
0 answers

Logging values inside a gesture event listener in React Native Reanimated

I have a Gesture Pan handler that I'd like to log the values of into the console as I move it around. I wanted to know if there was a better way apart from using RunOnJS to console.log values out, or if there is a better practise to follow when…
Irfan S
  • 267
  • 5
  • 14
0
votes
1 answer

How to set activeOffsetX of PanGestureHandler in react native

I have a list of messages and I'm making feature swipe to reply using PanGestureHandler, I want to limit area swipeable by props activeOffsetX, how can I achieve this?enter image description here > enabled={!isInfoText} >…
0
votes
0 answers

react native gesture handler example not rendering multiple balls + coordinate mismatch

React Native Gesture Handler has a tutorial here that describes a simple ball animation. From their code on github, I modified the example slightly to allow multiple balls to spawn from a tap gesture at the top level. However, the balls are not…
0
votes
1 answer

React-Native Error: Tried to synchronously call function {withSpring} from a diffreent thread

there is small part of my code throwing error on some of devices with possible solutions: a) If you want to synchronously execute, mark it as a Worklet b) If you want to execute this method on JS thread, wrap it using runOnJS. Error appear only on…
0
votes
0 answers

React Native Reanimate~2.14.4 not working on new screen

I want the view to move to the left when the screen is loaded off the stack, however it does not do the animation; although it does do the translation. I have used almost identical code to the ones in the docs so I am lost for ideas. When I add a…
0
votes
1 answer

withSpring doesn't work correctly when SharedValue is an object

I'm trying to use a SharedValue from react-native-reanimated2 to store an object (box positions). The object is of the following shape: boxPositions.value = { [boxId]: {x: 0, y: 0} ... } My goal is to update the object in the SharedValue so…
Shnick
  • 1,199
  • 1
  • 13
  • 32
0
votes
0 answers

test react-native reanimated with useDeriveValue

I have a component that gets a goBack function as a param the component effector animation (with react-native-reanimated-2) when the user press on any button, after the animation is finished I call to goBack function. I track on isOpen value with…
0
votes
0 answers

is useAnimatedGestureHandler still valid with react-native-gesture-handler in 2023

I am concerned about the proper way of using react-native-gesture-handler, the documentation says that Gesture Handlers are deprecated and I should be using GestureDetector, the context is that I need to combine gestures, and when I try to do it…
0
votes
0 answers

View Manager Error during going back React Native Vision Camera

When users clicks a button, i am navigating user to new screen. In the new screen a camera opens by using react native vision camera. But when i am pressing back buttons "View Manager for tag" error is showing instead going back to previous screen. …