Questions tagged [react-native-reanimated]
469 questions
5
votes
0 answers
React Native programmatically swipe gesture on element
In this fantastic video, made by William Candillon from http://start-react-native.dev he shows how to make this off-screen menu. Code can be found here: https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Menu
My…
Anders Gerner
- 775
- 9
- 27
5
votes
2 answers
Collapsible header in react-native-reanimated with multiple tabs in React Native
I'm trying to create a screen in React Native with 2 tabs (using react-native-tab-view) with the following layout:
------------------------
| Collapsible Header |
|------------------------|
| Tab A | Tab B …
bartzy
- 328
- 5
- 14
5
votes
1 answer
How to get numeric value from Reanmited Value?
I create a simple animation using react native reanimated but I can't access the numeric value of Reanimated Value
I using victory native pie chart, and I want to make a simple effect that pie angle goes from 0 to 360 but I've tried react-native…
Muhammed Saeed
- 101
- 1
- 10
4
votes
1 answer
Should I be using useEffect to animate on prop value change with React Native Reanimated?
I need a view to animate in to place when the value of some props change using Reanimated in React Native
I've only been able to find animating on, for example, a user tap using an onPress function to change the value of useSharedValue values. But I…
Kieron McKenna
- 75
- 6
4
votes
2 answers
How do i trigger a useEffect based on a sharedValue from the Reanimated libary
How do i trigger a useEffect based on a sharedValue from the Reanimated libary?
const sharedValue = useSharedValue(0);
useEffect(() => {
console.log("exectue functions");
}, [sharedValue.value]);
Is there a best practice for this. Or is…
dan_boy
- 1,735
- 4
- 19
- 50
4
votes
0 answers
react native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`
I'm encountering an error while loading my app to my IOS via ExpoGo. I've tried the solutions offered by threads describing the same issue which I've linked at the end of this post but I'm still getting the same error. I wasn't using…
ahauser
- 55
- 5
4
votes
2 answers
How do I implement a drag after a long press using React Native Gesture Handler v2?
The docs say:
Simply set manualActivation to true on a PanGesture and use StateManager to fail the gesture if the user attempts to drag the component sooner than the duration of the long press.
However, I can't figure out how to measure timing in…
laptou
- 6,389
- 2
- 28
- 59
4
votes
1 answer
Reanimated 2 can't use withSequence with direct value
I want to use withSequence with a direct value as the first value, using the code bellow caused the app to crash.
animatedValue.value = withSequence(startValue, withTiming(endValue));
The bellow code seems to work perfectly but in my case, it…
LHDi
- 319
- 1
- 8
4
votes
2 answers
Call React Native code when reanimated SharedValue changes
I have a reanimated ReadOnly> that is derived from another SharedValue:
const solidHeader = useDerivedValue(() => {
return top.value <= -(height / 2);
});
I would like to call a RN function (non-reanimated) when…
Richard
- 828
- 1
- 8
- 28
4
votes
1 answer
React-native-reanimated 2: How do I update Text in response to PanGestureHandler?
Here is my component. It's a simple PanGestureHandler with some svg.
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import Svg, { Circle, Line } from 'react-native-svg'
import Layout from '../constants/Layout'
import…
stkvtflw
- 12,092
- 26
- 78
- 155
4
votes
0 answers
How to use BottomSheet inside model
I want to add bottom sheet in Modal. I am using reanimated-bottom-sheet and react native modal.
But when I use BottomSheet inside Modal gesture not work and can't closeBottomSheet with swiping down.
I searched and I found this is RCGH problem.
So I…
BeHappy
- 3,705
- 5
- 18
- 59
4
votes
3 answers
View moves out of the screen when Text Input is focused used on Bottom Sheet in React Native for Android
I'm using the library -
https://github.com/osdnk/react-native-reanimated-bottom-sheet
I'm using a TextInput on this bottom sheet. And now when the Text Input is focused or typed in, the bottom sheet should remain at the same position. It works fine…
Shubham Bisht
- 577
- 2
- 26
- 51
4
votes
1 answer
Create a loop with react-native-reanimated
I'm trying to create a Blinking function in an App using hooks and react-navigation 5 - No classes.
"react-native-reanimated" is new to me. I'm more familiar with Animated so this is why I need some help here. Thank you!
import React, { useState,…
Vincent
- 745
- 10
- 21
4
votes
3 answers
"TypeError" when trying to render react-native-reanimated node in Jest test
When trying to render my application in Jest to do some integration testing, I get the following error:
TypeError: Cannot read property 'createNode' of undefined
at AnimatedParam.createNode [as __nativeInitialize]…
dawsonc623
- 1,841
- 2
- 16
- 26
3
votes
4 answers
Using React Reanimated 3, how can I fix "Error: Reading from `_value` directly is only possible on the UI runtime"?
Following along with the react native reanimated docs here I have this code:
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
function WobbleExample(props) {
const rotation = useSharedValue(0);
const…
Shep Sims
- 698
- 9
- 27