Stack Overflow
Stack Overflow

Questions tagged [react-native-animatable]

For questions related to the react-native-animatable library that provides "declarative transitions and animations for React Native".

For questions related to the react-native-animatable library that provides "declarative transitions and animations for React Native".

120 questions
16
votes
4 answers

Style property 'width' is not supported by native animated module: need advice for rewriting my code

I inherited the following component which worked well with former versions of react-native, displaying an opaque scrolling progress bar on buttons displayed by other components. Recently, when I upgraded to react-native 0.62.2 I got an error…
Yossi
  • 5,577
  • 7
  • 41
  • 76
11
votes
1 answer

How to translateX, translateY to a certain coordinate rather than a relative point?

My question is about using translateX and translateY in react and/or react-native animations, to animate an object to a certain point. These two transformations move an object relative to the existing point. But for the scenario, the existing…
Mehmet Kaplan
  • 1,723
  • 2
  • 20
  • 43
7
votes
1 answer

Create a spinner wheel in react native

Hello i am trying to make a spinner wheel in react native using Animatable. Following the example here (https://code.tutsplus.com/tutorials/practical-animations-in-react-native--cms-27567) I was able to rotate a rectangle box. Here is the code! …
Salman Shaykh
  • 221
  • 5
  • 16
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
0 answers

How to create a custom collapsible header in React Native?

Below is a demo screen of what I want to implement. So, what I want to do is that when I swipe up on the green area, I want the yellow area to move up along with it, and also the below blue box area (which is FlatList in my case). When the yellow…
Shubham Bisht
  • 577
  • 2
  • 26
  • 51
4
votes
2 answers

Slide up down animation in the react native

I am using animation for up and down in the react native, But the animation just slide from up to down and then stop at the bottom i want to move it up and down continuously. I have also used animation loop so please check and provide me solution…
Rover
  • 661
  • 2
  • 18
  • 39
4
votes
1 answer

React Native animate angles of segments of pie chart

I am following this tutorial: https://medium.com/@oriharel/pie-animation-in-react-native-using-svg-55d7d3f90156 In the tutorial, you make a pie chart whose end angle is animatable. The pie chart has three segments that are 20%, 20%, and 60% of the…
gkeenley
  • 6,088
  • 8
  • 54
  • 129
4
votes
1 answer

Smooth swipe up animation (React Native Animation)

What do I expect to do: A modal screen that you can close by swiping up. Inside the modal I have: componentWillMount() { this.animated = new Animated.Value(0); this.panResponder = PanResponder.create({ onStartShouldSetPanResponder:…
Ivan Burzakovskyi
  • 693
  • 1
  • 8
  • 25
4
votes
1 answer

Rotate discs with user touch in React Native

I want to create a disc like component in react-native, which the user can rotate by touch and align the segments accordingly with respect to a marker. Below is the image of the component I intent to make: There are 3 discs pivoted at the center,…
MMH
  • 675
  • 5
  • 18
3
votes
1 answer

Change duration in an infinite animation

I try to make a pulse animation view that loop infinite. The following view achieve that animation. But I would like to update the animation duration while it's animated. Actually It doesn't update the looping animations. Adding duration to the…
Ludovic
  • 1,992
  • 1
  • 21
  • 44
3
votes
1 answer

onScroll is not a function error with useNatveDriver and ScrollView

I want to add a collapsable header in my Application. I created a separated component for the Header view. interface Props{ userData: UserDetails | null scrollY: Animated.Value } const HEADER_EXPANDED_HEIGHT =…
Keselme
  • 3,779
  • 7
  • 36
  • 68
3
votes
1 answer

react-native flatlist animate on item remove/slide up

I want to animate removal of items on removal from FlatList. I have a custom card component as item in a FlatList. I am showing it vertically. now, I want to animate the removal of item. item can be removed from any place/index. Animation on removal…
praveen seela
  • 538
  • 11
  • 24
3
votes
2 answers

React native button presses not working on android

So I know this has been gone over in multiple other threads but this one is kind of unique, I've built this app using React Native that uses swipe gestures to animate views sliding in an out of the view. iOS is nearly flawless but when running on…
b.stevens.photo
  • 876
  • 2
  • 9
  • 18
3
votes
1 answer

How to stop scrolling sliding when switching to another tab?

Environment: "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.2", "react-native-reanimated": "^1.4.0", "react-native-tab-view": "^2.11.0" Problem: How to stop scrolling sliding when switching to another…
Sergey
  • 61
  • 7
3
votes
0 answers

Expand FlatList height along with collapsible header in React Native

In the above image, blue boxes represents FlatList. When I scroll down in the FlatList, I want the green and yellow view to move above the screen and I want the green part to be sticky at top of the screen while the yellow view disappears from the…
Shubham Bisht
  • 577
  • 2
  • 26
  • 51
1
2 3 4 5 6 7 8