Questions tagged [react-native-reanimated-v2]

242 questions
1
vote
2 answers

React Native: filtering an array of animated components transfers animation of deleted component to another

I'm running into an odd problem with react native using react native gestures and reanimated 2.0. I am currently trying to make a simple to-do list that implements a 'swipe to delete' on tasks themselves. Everything works well up until I delete a…
1
vote
0 answers

How to disable animations when the user scrolls (react-native-reanimated 2)

Here's a weekly mini calendar, that turns into a monthly mini calendar component. When it turns from weekly to monthly we have some entering/exiting animations So far so good. Problem: The problem is, that those animations (being entering/exiting…
SudoPlz
  • 20,996
  • 12
  • 82
  • 123
1
vote
1 answer

How to visualize sound waves like Google Meet does while a person talking in react native

I am trying to accomplish very similar animation in the below example. My approach was like this: Get the voice volume data, append it to a view's borderWidth using a sharedValue of react-native-reanimated. However, since borderWidth append itself…
1
vote
3 answers

Project 'react-native-reanimated' not found in root project

In my react native project I don't have "react-native-reanimated" but when I rebuilt my project I got this error: "Project "react-native-reanimated" was not found in the root project So when I install ‍react-native-reanimated‍ I get an NDK install…
1
vote
3 answers

I am trying to implement bottom sheet in react native with npm package reanimated-bottom-sheet but swipe down gesture handler is not working

import statements import * as React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated from 'react-native-reanimated'; import BottomSheet from 'reanimated-bottom-sheet'; main app function export default…
1
vote
0 answers

Multiple reanimated2 animations on same component in React native

I have a card component with 2 buttons present inside it 'Follow' and 'Dismiss'. If I press on 'Dismiss' I want the component to do a fade-out-up animation and when I press 'Follow' the component should do a fade-out-left animation. Can someone help…
1
vote
0 answers

How to detect two animated objects intersection in reanimated 2?

I'm having an animated object, that can zoom, drag and rotate. What is the best way to detect its collision with other object or border? What I tried so far: onLayout doesn't fire on reanimated events. useAnimatedReaction crashes on attempts to use…
Andrew
  • 71
  • 6
1
vote
0 answers

Gesture Detector is not working React Native

i am new to React Native. I was following a tutorial about making a bottomsheet from scratch however i have an issue with const gesture= Gesture.Pan().onUpdate((event)=>{ console.log(event.translationX); }); It isn't detecting the…
1
vote
2 answers

react native reanimated animating text style

So, I was getting familiar with reanimated2, for that I'm building a simple todo app, so whenever I check a single todo (a simple toggle state, completed or !completed), I change the text style to line-through so that it appears to be completed, now…
1
vote
1 answer

How to move a view out of a scroll view in React Native?

I currently have a horizontal ScrollView with a few pink boxes in it. These boxes are built using Animated.View and a GestureDetector to manage dragging of the box. I want to be able to drag the pink box outside of the scroll view area (the blue…
1
vote
1 answer

How to useref to start entering animation in Reanimated 2?

today I want to ask how it would be possible to start an animation from a button onPress event using React Native Reanimated 2? I want to call entering animation like that but it does not work? It looks like i am using useref wrong. My code so far…
Benjamin Jones
  • 165
  • 1
  • 7
1
vote
1 answer

How can i set 'scrollEnabled' property of ScrollView based on animatedValue?

I use Reanimated 2.4.1. I tried to do like this: const scrollEnabled = useAnimatedStyle(false) return ( .... ) and like this: const someAnimatedValue =…
1
vote
2 answers

EXPO + react-native-reanimated debug issue

I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated@~2.1.0 and debugging worked just fine. At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45. After the…
jekcom
  • 2,065
  • 2
  • 24
  • 34
1
vote
0 answers

react-native-collapsible-tab-view - switching between tabs is very slow to react , while sliding between them is smooth

I'm using react-native-collapsible-tab-view in my sample project. I'm having a issue in switching the tabs, when i am sliding between tabs they are fine but when i press on a particular tab the performance is very slow and animation on the tabs is…
1
vote
1 answer

Custom drawer navigation isn't animating, just getting snapped to final size

I'm trying to implement this custom drawer with animation effect while sliding (opening, closing), the MainLayout should be resizing with a shrinking / growing animation when toggeling the drawer but what it does is simply changing it's size after…