Questions tagged [react-native-reanimated]

469 questions
0
votes
1 answer

Error: relativeSourceLocation is not a valid Plugin property React-Native

https://i.stack.imgur.com/Rhuck.png [] (https://i.stack.imgur.com/vF8HT.png) I want to use react-native reanimated for my project. I am getting this error.
0
votes
0 answers

Gesture LongPress runOnJs Callback Stale

I'm trying to pass the chatMessage as a callback on LongPress. It works great the first time, but when the component re-renders it does not update the longPressGesture callback with the new chatMessage value. The longPressGesture has the previous…
0
votes
1 answer

How to use AnimateStyle with Stylesheet.create

I am using react-native-reanimated to create an Animated.View. I want to add a dynamic style to this Animated.View by changing the scale based on some state. This is my code: import Animated from 'react-native-reanimated'; ... ... const scaleNode =…
gaurav5430
  • 12,934
  • 6
  • 54
  • 111
0
votes
0 answers

React Native Reanimated - How to use Expo AV video ref inside of `useAnimatedGestureHandler`

I am getting an error: TypeError: Cannot add new property '__reanimatedHostObjectRef' whenever I try to use the Expo AV video's ref. I think it's because when the Video component consumes the ref it sets up a read only object value that cannot be…
Taylor Austin
  • 5,407
  • 15
  • 58
  • 103
0
votes
1 answer

Can't animate path in SVG using react native

I'm trying to make a path inside an SVG rotate. I keep getting the error "undefined is not a function". It seem to be caused by the declaration of animatedProps. The code is below: import React, { forwardRef, useState, useRef } from 'react'; import…
0
votes
0 answers

Is there any way to set a limit on sharedvalue in react native reanimated

I am adding some gestures in my app to an image (same as we have in whatsapp, open any contact's profile picture in full mode and see the pinch, translation and other gestures). I already applied single tag, double tap and also pinch gestures and…
0
votes
0 answers

How to create animations with advanced physics in RN Reanimated 3?

I'm interested in creating a menu akin to Apple's 'bubble' select from Apple Music way back when: I came across this article where the author attempts to achieve something similar, however they are using the v1 API which is no longer supported in…
0
votes
1 answer

react-native-reanimated useDerivedValue does not modify the dom

I have the simplest example possible with useDerivedValue: A SharedValue that is modified when scrolling. A derived boolean value based on this scroll position const isShown = useDerivedValue(() => { console.log('y', currentPositionY.value); …
0
votes
1 answer

React-native-reanimated: is there a way to remove a component from the dom when scrolling rather than hide it with style?

I'm able to hide a react-native element using useAnimatedStyle and returning a style that I can apply to my element like opacity: 0 for instance. But I don't find any way to remove the element from the dom. Using const handleScroll =…
0
votes
0 answers

java.lang.Double cannot be cast to abi47_0_0.com.facebook.react.bridge.ReadableMap (Error)

I Installed Rainbow-me animated chart, followed the proper steps provided, installed react-native-reanimated and followed each and every step similar. But I got the error mentioned above! Here is my code: ** HomeScreen.jsx : ** import React from…
0
votes
1 answer

reactive animation value that not of the style type react native reanimated-2 (SVG props)

I am working with ReactNative-reanimated-2 I want to make an animation with an SVG path at color properties I know how to do it in style properties with useAnimationStyle but how can to do that with non-style properties like SVG prpos like…
0
votes
1 answer

Calculate value of animation in useAnimaionStyle

I am working with react native reanimated 2 To make animations with opacity This example works as well const width = useSharedValue(50); const animatedStyle = useAnimatedStyle(() => { return { opacity: width.value, }; }); …
Yoel
  • 7,555
  • 6
  • 27
  • 59
0
votes
1 answer

Disable react-native-reanimated globally for tests

We'd like to disable react-native-reanimated animations for tests based on a context variable, especially when we do UI snapshot tests to avoid flakes. For example, if there's a loading spinner, we don't want variations of its spinning animation…
kb_
  • 1,245
  • 4
  • 18
  • 33
0
votes
0 answers

Hi I was trying to rotate a box using animated.view and Gesture.Rotation

in my code .onUpdate and .onEnd methods are firing but the box is not rotating below is the code import {View, Text, Animated, StyleSheet,Image} from 'react-native'; import React, { useState } from 'react'; import {useSharedValue} from…
0
votes
1 answer

Reanimated does not work with animated code? Is there a way?

I am pretty new to React Native and reanimated so please bear with me if I cant explain this as I need to. I have a FlatList that animates a single item using animted when clicked. This works great but the problem is I am trying to use it with code…