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".

100 questions
9
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,717
  • 17
  • 26
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
  • 759
  • 14
  • 36
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
  • 2,920
  • 1
  • 18
  • 45
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 Burzakovskiy
  • 655
  • 1
  • 5
  • 20
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
  • 312
  • 2
  • 14
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
  • 499
  • 8
  • 22
3
votes
0 answers

react native changing Animated.Image source without blinking

when its changed source of any image in component there is blinking occurs which I try to avoid. To do so I searched and decided to use ref(direct manipulation) but it doenst change anything, so I use traditional way, changing url property in the…
TyForHelpDude
  • 4,032
  • 8
  • 41
  • 76
2
votes
1 answer

How to initiate a React-Native-Animatable animation from a function?

I've just started learning the Animatable library for React-Native, and cannot figure out how to initiate an animation from a function. For example, I have: Hello…
JosephG
  • 2,791
  • 6
  • 30
  • 52
2
votes
1 answer

React Native Redash onScrollEvent not changing Y value if used in two components

In my current app the animated y value only changes after I hot reload my app. Before the reload the app's y value of my component doesn't change or atleast it doesnt interpolate the y value I'm unsure what causes this strange ocurrance. Here is a…
Salman
  • 879
  • 1
  • 18
  • 40
2
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
  • 727
  • 8
  • 27
2
votes
3 answers

react-native make status bar 'barStyle' animatable

I'm trying to make status bar's barStyle animated so that when I scroll I could change the barStyle type from 'dark-content' to 'light-content'. First, I made my statusBar animated: const AnimatedStatusBar =…
kirimi
  • 1,140
  • 2
  • 21
  • 44
2
votes
2 answers

How to do a simple opacity animation using functional components and react native reanimated

Every document of react reanimated is using class components i've tried to change the way of doing a simple opacity animation of a button but i can't for the life of me make it work, it seems set is not working, if i change set to…
Choza de thunder
  • 23
  • 1
  • 4
2
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…
bryanstevens314
  • 477
  • 4
  • 16
2
votes
0 answers

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
  • 51
  • 6
2
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
  • 759
  • 14
  • 36
1
2 3 4 5 6 7