Questions tagged [react-native-reanimated]
469 questions
2
votes
1 answer
Reanimated2: Transform with key of "rotate" must be a string
I am using Reanimated2 on my React Native app in an Android emulator. I am trying to rotate a component using useAnimatedStyle. Here's my code. It works on iOS, but on Android I get an error.
const animatedStyle = useAnimatedStyle(() => {
let…
Scott
- 1,207
- 2
- 15
- 38
2
votes
0 answers
react-native-reanimated rotation is working only on last child inside a .map loop
I'm using this library: https://github.com/software-mansion/react-native-reanimated
I want rotation on every elements after touching them.
I've created it inside a .map loop. But it's working only for the last element.
I want the same effect on all…
Encrypted
- 628
- 1
- 10
- 22
2
votes
1 answer
How to use state in React Native Reanimated event with TapGestureHandler
I'm pretty new on react native and i'm stuck...
I have an event that handle an animation on a TapGestureHandler button
this.isLoginIn = new Animated.Value(false);
this.onStateChange = event([
{
nativeEvent: ({ state }) =>
…
GabinMD
- 23
- 3
2
votes
1 answer
React Native Gesture Handler not calling events
I am trying to use react-native-reanimated with react-native-gesture-handler but I have a problem to make it work. It seems that gesture-handler is not firing events. I followed the instructions to install react-native-gesture-handler, updated the…
Mathieu Bouchonnet
- 39
- 4
2
votes
0 answers
How to update toValue for a spring animation in React Native (Animated API)?
I'd like to be able to change the toValue of an animation responding to props update. The official docs for React Native Animated API state that the spring method
animates a value according to an analytical spring model based on damped harmonic…
LGenzelis
- 764
- 6
- 14
2
votes
0 answers
Using Animated.timing() API in React Native to slide in/out content
I have a screen in my React Native app that show/hide content based on some toggle buttons using Hooks. Everything is working fine but I'd like to improve the UI and add some animation to slide in the new content and slide out the old one.
Here's my…
Butri
- 339
- 8
- 22
2
votes
1 answer
Value for value cannot be cast from ReadableNativeMap to Double in React Native
I am trying to implement an animation on the text ams using react-native-reanimated.
I am pretty sure it's because of the Animated component, but can't figure out how to resolve it.
App.js
import React, {useEffect, useRef} from 'react';
import…
cmcodes
- 1,559
- 19
- 24
2
votes
0 answers
How to get current Y value from PanGestureHandler swipe move while the user is swiping
I am trying to perform a Haptic feedback when the user drags the container with a specific swipe length. So with this following code I am trying to get the value of translateY while the user is dragging the container with the event…
Leo
- 21
- 3
2
votes
2 answers
React Native interpolate maximum call stack size exceeded
I'm kinda new to RN and I'm having a hard time tracking down a "Maximum stack call exceeded". I understand that the error is related to some kind of infinite loop going on in my code but I can't find it.
Code
EventScreen:
import Animated, {…
Aurasphere
- 3,841
- 12
- 44
- 71
2
votes
1 answer
React-Native: Slider knob jumps to random position when using diffClamp and multiple sliders
I have quite an annoying problem, when developing a custom slider component in react-native.
When using just one slider in my app everything is fine.
But if I add more than one slider the problem begins:
If is use one slider first and then, after…
Nemo Nescit
- 21
- 3
2
votes
1 answer
reanimated-bottom-sheet snapTo function works at second firing
I'm using reanimated-bottom-sheet. Trying to close modal with this
this.bottomSheetRef.current.snapTo(0)
but this works at second click. If there is 3 snapPoint it goes heighest one at first than goes to where I want but at second click
Necmettin Sargın
- 87
- 1
- 10
2
votes
2 answers
How to do a simple opacity animation using functional components and react native reanimated
Every document of react reanimated is using class components i've tried to change the way of doing a simple opacity animation of a button but i can't for the life of me make it work, it seems set is not working, if i change set to…
Choza de thunder
- 33
- 1
- 5
2
votes
0 answers
Animate navigation header opacity while scrolling in ScrollView in React Native?
I need your help for animation in React native.
In my screen, I want to change opacity of navigation header 0 to 1 when I scroll up.
Here is code in Snack
I declare animated value in HomeScreen like this.
In Homescreen.js
export const translationY =…
freewebwithme
- 429
- 12
- 22
2
votes
1 answer
React Native using Animated to hide Header (leaves blank space after TransformY)
I have implemented hiding header while scrolling in React native using Animated.
Here is the code:
const y = new Animated.Value(0);
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
const HEADER_HEIGHT = 60;
const {diffClamp} =…
Eric Ahn
- 391
- 2
- 7
- 18
2
votes
0 answers
React native reanimated
I am trying to create a toggle player animation in react native, the same like Spotify, where when you press the miniPlayer , the full size player will show, my problem is that the fullSize Player View is transparent, and I can't seem to get the…
oflcad
- 505
- 2
- 6
- 19