Stack Overflow
Stack Overflow

Questions tagged [react-animated]

For questions specifically related to the React Native Animated framework that is used to animate React Native components in a performant manner.

369 questions
6
votes
1 answer

Animated or Reanimated in React Native. Which is the best

I've been learning React Native and I'm trying to learn animations. Upon searching a bit and discovering the possibilities I found out that you can use the Animated component from react-native but there is also the possibility to use the library…
Jose Bernardo
  • 119
  • 1
  • 7
6
votes
1 answer

How to start animation when props change (via redux) in React Native?

I have an overlayed view in my React Native app which I need to animate on and off screen when the user pushes a button. I know how to position the view and animate it but I can't work out how to trigger the animation. My redux store has a very…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
6
votes
3 answers

react native search and scroll to hit

I need some help implementing a search and scroll to hit in react native. Did a lot of searches and ended up in some dead ends (found some refs examples I couldn't get to work). Tried building this snippet as a…
Norfeldt
  • 8,272
  • 23
  • 96
  • 152
6
votes
3 answers

How to draw square to tag an object. (React Native)

I see many mobile apps having a feature that user can draw a square to indicate something to tag on the image. I'm building Face Tagging app and basically user draws square on the boundary of human's face on the image. I've Googled it many times but…
merry-go-round
  • 4,533
  • 10
  • 54
  • 102
6
votes
1 answer

Using Animated.Flatlist and Animated.ScrollView to animate an Animated.View is not smooth

I am would like to make an animated header. I Created an animated component of FlatList, Used the onScroll function to update the animated value. Placed a view (Animated.View) as the header above the animated FlatList using position…
Kakar
  • 5,354
  • 10
  • 55
  • 93
6
votes
2 answers

Trying to Animate React Native Text Value

so basically im trying to get this render function to actually update the value in real time (as of now it just jumps to the final value upon completion of the animation) this.state = { pleaseDisplayMe:…
Jeremy
  • 188
  • 1
  • 3
  • 11
5
votes
1 answer

Native base Footer accepting touches for player in react native

I have a MainFooter components that contains the footer and mini player which animates to full-view when clicked. I have a problem that whenever we click on one of the footer Tabs, the player maximizes and then got stuck there only, being…
bucky roberts
  • 339
  • 3
  • 9
5
votes
1 answer

One Animated.Value vs. Many for Controlling Transitions

When implementing a transition animation that effects many different elements, or many instances of the same Component, is there a best practice regarding where to control the animation? I have toyed with two different methods but I am not sure…
Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
5
votes
5 answers

How to animate expanding / collapsing a text preview in react native with Animated.View

I'm creating a text component that I want to be 2 lines by default, and if the user taps on it, it will expand to the full length, and if the user taps on it again, it will collapse back to 2 lines. So far I have something like this in my return…
Kevin
  • 81
  • 1
  • 2
  • 5
5
votes
3 answers

How to apply animation in React JS

I'm using react-animated-css library to apply animations on state change in React JS. The code is as follows: import ReactDOM from "react-dom"; import React, { Component } from "react"; import { Animated } from "react-animated-css"; const…
Boky
  • 11,554
  • 28
  • 93
  • 163
5
votes
3 answers

How can I get the value from an animated or interpolated value in React Native?

Short answer is: with addListener. Every animated variable has addListener() method accessible. Right? We should NOT access it from __getValue(). I was struggling to get the interpolated value (number) out of this const: const interpolatedvalue =…
ofundefined
  • 2,692
  • 2
  • 18
  • 35
5
votes
1 answer

How to make element fixed on scroll in React Native?

This is a video of what I have so far https://drive.google.com/file/d/1tJMZfpe8hcqLcNMYiE-6pzwHX0eLofv1/view?usp=sharing I'm trying to make the "Available for 3 months" fixed once the contentOffset.y has reached the header. Similar to what a…
Jesse Onolemen
  • 1,277
  • 1
  • 15
  • 32
5
votes
0 answers

TouchableOpacity inside Animated.View catching gestures

I'm trying to use react-native-interactable to create a component that can be moved around only once it has been pressed for a certain time (like android and ios springboard) I managed to find a solution, but my issue is that when the…
Nicolas Meienberger
  • 777
  • 2
  • 8
  • 18
5
votes
0 answers

React Native Move a component to an absolute position

I would like to move a component using an Animated function to an absolute position on the screen. Basically it works like that : this.state.pan = new Animated.ValueXY({x: 50, y:50}) Animated.spring( this.state.pan, { toValue: { x: 0, y:…
Anthony Z
  • 51
  • 3
5
votes
0 answers

`onEndReached` not fired into animated ScrollView

I'm currently trying to implement an auto-hiding header on my react-native app. Thanks to this example I managed to do so but it broke something. Indeed my onEndReached method isn't called anymore when I reach the end of the list. I also used the…
Guillaume Munsch
  • 1,233
  • 17
  • 37
1
2
3
…
24 25