Questions tagged [react-native-reanimated]
469 questions
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
0 answers
Drawer animation in React Native
I am trying to make a drawer animation like the one in this image using the useDrawerProgress function but I keep on getting this error:
Here is my code:
const Drawer = createDrawerNavigator();
const DrawerScreenContainer = ({children}) => {
…
Asusoft
- 352
- 2
- 10
0
votes
0 answers
react native allowing users to apply color using different svg paths with animation and blend on top of a background image
I have an original svg image (like an interior of a room) and different svg paths (walls,ceiling in a room) which are positioned on top of the original image. OnPress of different svg paths color is applied.
Challenge is it does not get blend with…
kaushik dugar
- 21
- 1
- 7
0
votes
0 answers
Conflict between selectable text and react-native-gesture-handler
I'm creating a bottom sheet with selectable text in it. When I want to scroll my bottom sheet, the text gets selected.
I want to know if I can fix it inside my component. I suspect it comes from how I handle the scroll.
Here is a minimal…
yaken
- 107
- 1
- 7
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
0
votes
1 answer
React Native Reanimated keeps giving error after upgrading expo to 47
This happened after I upgraded to expo 47 and reanimated to 2.13.0.
TypeError: _ReanimatedModule.default.configureProps is not a function. (In '_ReanimatedModule.default.configureProps(Object.keys(NATIVE_THREAD_PROPS_WHITELIST),…
LambentLight
- 77
- 2
- 6
0
votes
0 answers
How to prevent Tab Navigator header from rerendering every time I open a new tab in react navigation v6?
I am using react navigation v6 with react native. I have a custom header component that I want at the top of all of my screens in my Tab.Navigator. This custom header includes a reanimated animation when you press on the search icon which is at the…
Cole
- 207
- 2
- 11
0
votes
0 answers
Accessing argument from useAnimatedStyle hook
I have a list of value in a sharedValue, each value represent the opacity of a children component. list indexes are similar to the children indexes
const list = useSharedValue(new Array(BlockNumber).fill(1));
i want to be able to change the child…
Omar EL KHAL
- 151
- 4
- 13
0
votes
0 answers
dynamically change style based on an argument using useAnimatedStyle
I have a list of blocks as childrens when a sequence those blocks are hovered, I want them to change there opacity, the function BlockStyle below does not change the style based on index, how can I change each child opacity based on it index
this is…
Omar EL KHAL
- 151
- 4
- 13
0
votes
1 answer
Moti animations not displayed on react native application
I am new to react native and was trying to play with Moti animations, I am not sure why the animations are not getting loaded, the code is :
import { MotiView, MotiText } from "moti"
import React, { useState, useEffect } from "react";
import { View…
jkkCoder
- 17
- 3
0
votes
2 answers
View centered within the absolutely positioned Animated.View inside a ScrollView shifts position
The code to render a TabList:
import React, { Children, useEffect } from 'react';
import { LayoutChangeEvent, View } from 'react-native';
import {
ScrollView,
TouchableWithoutFeedback,
} from 'react-native-gesture-handler';
import Animated, {
…
shet_tayyy
- 5,366
- 11
- 44
- 82
0
votes
0 answers
React Native - 1: How I change a state of a component, from another? 2: Trying to do a bottom sheet animation
I'm trying to deactivate a bottom sheet by swiping it down using useState, but that state is in another component, that is the screen that contains that bottom sheet.
I
Image of the screen with bottom sheet activated
Code of bottom sheet…
foytecna
- 21
- 2
0
votes
2 answers
How to make a React Native TextInput change Opacity just like TouchableOpacity?
My code looks something like this currently:
I want to make a TextInput component that has an opacity animation on click (exactly like TouchableOpacity changes opacity on…
Eric Cherny
- 35
- 6
0
votes
1 answer
Error running React Native 62.3 app with react-native-reanimated 1.13.2
UPDATE: there was a library trying to use React Native 64 or newer, and the EventDispatcher.java file changed a lot from 63.5 to 64+. That was the cause of expecting an Interface while i was running a class file.
Last week a project I have was…
Luis Jiménez
- 21
- 3
0
votes
0 answers
react-native: how to add animation to progress bar using reanimated library
I tried to create a progress bar in react-native and I want to add animation to it to look relatively smooth.
the problem is the value of the progress bar changed based on the parent and I don't know how to integrate reanimated library with…
DarkSide77
- 719
- 1
- 4
- 21