Questions tagged [react-native-reanimated-v2]
242 questions
0
votes
0 answers
withTiming callback is getting trigger on render instead of getting trigger when animation end
I fetch the token on app start and if auth is not available I start the animation and at end of the animation I navigate the user to login. But if auth is present the animation should not run and the user should navigate inside the app instead of…
Adarsh Jaiswal
- 39
- 7
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…
Kyle G
- 4,347
- 4
- 26
- 39
0
votes
0 answers
React Native - animate image height without scaling (reanimated v2)
I'm trying to create an effect in my React Native app whereby a pixelated version of an image grows in height over another image. I'm using react-native-reanimated v2. The issue I'm having is that I can't get the image to animate in height without…
Aaron
- 151
- 6
0
votes
1 answer
Does the library React-native-ranimated-2 require allowed newArchEnabled flag
I use react-native-reanimated-2
I understand that this library uses TurboModules and Hermes engine
Reanimated 2 is in an early version. As we wanted to share it with the community as soon as we could, the library still has some rough edges and…
Yoel
- 7,555
- 6
- 27
- 59
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);
…
Simon
- 6,025
- 7
- 46
- 98
0
votes
0 answers
How to make react-native-reanimated-carousel work with ImageZoom (react-native-image-pan-zoom)?
I want to have a carousel that each item is a zoomable image, the carousel should be all over the screen so I use Portal for that. To support zoom I use ImageZoom component from react-native-image-pan-zoom, and the carousel is from…
user2993539
- 375
- 1
- 3
- 14
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 =…
Simon
- 6,025
- 7
- 46
- 98
0
votes
1 answer
Set reanimated values back to original after click
I have made a bit of re-usable animation code. It works great but I an unsure if it is possible to get the animations back to their original values after a button is pressed easily.
The only way I can think of it to use useShared Values to store all…
JulesUK
- 359
- 2
- 11
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…
Yoel
- 7,555
- 6
- 27
- 59
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
2 answers
How to animate expo-linear-gradient with reanimated?
I am using react-native-reanimated and want to animate the colors of my expo-linear-gradient. Unfortunately, nothing changes. I also created a Expo Snack.
import * as React from 'react';
import { View, Button } from 'react-native';
import Animated,…
RaideR
- 869
- 1
- 12
- 33
0
votes
1 answer
How can I use lottie animation in GestureHandler React-native
Today I want to use lottie animation in GestureHandler from react-native reanimated as I said above. But something went wrong. When i call lottie.current.play(0, 15); for exemple code -
const gestureHandler = useAnimatedGestureHandler({
…
Benjamin Jones
- 165
- 1
- 7
0
votes
1 answer
React Native reanimated 2, how not to lunch animation on start?
I'm quite a new using React Native and I'm trying to display a component only if the internet connection is not reachable. When it is the component must disappear.
My problem is that this component must not be shown on the startup.
If the connection…
Raphaël Chemouni
- 33
- 6
0
votes
2 answers
What should I pass as a value to a prop expecting Animated.Value while using react-native-reanimated?
I created a hook to capture the react-native-pager-view carousel scroll position:
import { useEvent, useHandler } from 'react-native-reanimated';
import { AnimatedPagerScrollHookParams } from './animated-pager-scroll.type';
const…
shet_tayyy
- 5,366
- 11
- 44
- 82