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
0
votes
1 answer

How to animate height to 100% in react-native?

I have been trying to do:
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
0
votes
2 answers

React Native staggering animations on Animated.Image receives TypeError: undefined is not an object (evaluating 'value.getValue')

I'm attempting to stagger two animations in which I have an image that fades into the screen, and then translates down. (I'm animating planting a seed) The seed is its own component: import React, { Component } from 'react'; import PropTypes from…
0
votes
1 answer

controlling the speed of panning a view in react native

I am using this to implement panning on an animated.view https://software-mansion.github.io/react-native-gesture-handler/docs/handler-pan.html This animated view also has pinch and zoom enabled using the same library
0
votes
1 answer

Triggering animation via setState not working

I am calling a function when I hit a waypoint in my page. The function logs the state after calling setState, which shows that the state has been updated to {visible: true} however, in React Dev Tools, it shows that the state is still false. Because…
Casey
  • 444
  • 1
  • 7
  • 22
0
votes
1 answer

Animated.spring in functional components doesn't work with onPress?

I am going to create an animation which would run by click on a button, I did this via Animated.timing smoothly and without any problem but when i try to run animation via Animated.spring it just runs for one time and next clicks don't work How can…
0
votes
1 answer

React Native onScrollBeginDrag not very responsive to the scroll

I want the opacity to go to 0 as I start to scroll down and the opposite as I scroll up. My code currently achieves a similar effect, but not as responsive. First, it goes to opacity: 1 abruptly, not gradually, and 2) the change happens late no…
Kevvv
  • 3,655
  • 10
  • 44
  • 90
0
votes
2 answers

Animation duration issue

I try to animate a view to hide and show it. the duration is ok to open it (500), but it doesn't work when I close it, the duration is not respected (it closes directly). Here is my code: const {height, width} = Dimensions.get('window'); const…
Sylvain
  • 509
  • 1
  • 7
  • 17
0
votes
0 answers

UI blocked after displaying a drop down alert

I'm trying to display the error message via a drop down alert which I have hooked onto redux. I have it in the the main App.js file and the component is listening to error state change and will drop via an animation to show an error message. The…
Mehdi
  • 51
  • 3
0
votes
1 answer

How can I make this custom button component reusable across different controls?

I have this custom component class that I apply to my React Native Buttons and it has the expected behavior of scaling in and out (adding animation to shrink and resize) which is the behavior I want. However, I want the same animation for other…
Euridice01
  • 2,510
  • 11
  • 44
  • 76
0
votes
0 answers

React native Drag and drop animated.View onLongPress

I have circles I have to make these circles move in the space assigned to it and if the long pressure occurs on one of them, then it triggers an event. I did this, but it doesn't seem to work very well. I used Animated.View with…
0
votes
1 answer

How to animate a Single View one by one in react native?

Please have a look this image I have an issue in the animation of the circle. The flow is: When user will click on button 1, the circle will animate from real position to position 1, When clicking button2, a circle will move from position 1 to…
sagar dhiman
  • 293
  • 2
  • 11
0
votes
1 answer

Why animated toValue react native not working properly?

I try to use Animated API from react-native. I want to make a component that looks like accordion (this is for sake of try Animated API. I know there are other library for accordion that I could use). The animation works, but the toValue not…
Akza
  • 1,033
  • 3
  • 19
  • 37
0
votes
1 answer

React Native scroll view animated header : performant way to change layout on resize?

I have been following exactly this article here to animate a header resizing on the scroll of a flatList (list of comments, on Scroll Y, reduce header). It works very well (sometimes a little slow but it's ok). Now I would like to change layout…
saratv
  • 33
  • 6
0
votes
2 answers

How to get current Animated.value when nativeDriver is true?

It is possible to get the current animated value using ._value while nativeDriver is false. But is it possible to get current value when nativeDriver is turned to true ? Do we have any work arounds ?
0
votes
1 answer

Animated.event does not change state

In react-native I am using the Swiper module found here: ... Then outside the render method, I…
Lukas Köhl
  • 1,569
  • 2
  • 15
  • 28