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

Dynamic Text Background Highlight Animation with Duration in React Native

I have stuck at this point to dynamically highlight some bunch of text in some duration. Like for example, I have this text : Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard…
harshita
  • 457
  • 1
  • 5
  • 19
0
votes
1 answer

Regarding updating react native component value on each iteration and run as animation

I have big amount of text data and fragmented in to small parts and saved in to the array (in code its props.frames) and now I want to animate these fragments as qr code on iterating a list "frames" . I tried following but it does not work . I know…
savita
  • 79
  • 4
0
votes
2 answers

React Native how to rotate and translate at the same time

How do you rotate and translate at the same time? In the sample below I was expecting the square to move to right and rotate about its own axis maintaining the same central y axis. If you can imagine a wheel travelling along a road Instead, it flys…
0hio
  • 63
  • 5
0
votes
0 answers

Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaN

So I am following a video tutorial by Catalin Miron on Creating a timer with react native(Link to video here). But the problem is 9:57 minutes into the video and my app is giving me this error: Invariant Violation: inputRange must be monotonically…
KidCoder
  • 164
  • 3
  • 12
0
votes
1 answer

React native animatable not running

I'm using react-native-animatable library to animate a loading icon. I haven't touched in a while until I decided to use it my new project. When I added it to my code it would do anything, I am really confused why it isn't running. The loader is…
BFP
  • 124
  • 1
  • 9
0
votes
1 answer

How to make infinite animation

How can you make moving image animation which won't stop but loops when it reaches the end of the screen and starts from another end? Example gif:
Michael Metreveli
  • 111
  • 7
0
votes
0 answers

How to keep React Native animated transform state?

Why I animate the Animated.View with transform style, it works. But when I update some data (with useState), the transformed status will go back to the origin. However, other style properties, like padding, will keep the updated value. Why and how…
Soul Clinic
  • 1,189
  • 12
  • 18
0
votes
0 answers

React native maps marker card animation popup

I am learning React native's animated. I have used google maps for my app. i have created fake data. I display data's latitude and longitude by using React-native-map's Marker. Inside the Marker I have used React-native-map's Callout which take…
Krisna
  • 2,854
  • 2
  • 24
  • 66
0
votes
0 answers

Is it possible to build complex animations with react-native

Is it possible to build a splashscreen with the given design using react-native ?
Ajith
  • 775
  • 1
  • 13
  • 47
0
votes
0 answers

Error "Attempt to assign to readonly property" while using interpolate in React Native

I have a FlatList and a View above it. All I want is when scroll down the FlatList, the View height drops to zero. I use interpolate to do this and here is my code : ... const scorllY = useRef(new Animated.Value(0)).current; const getCounterHeight…
Quang Bình Đinh
  • 331
  • 6
  • 15
0
votes
1 answer

Hiding a view is a lot laggy

I have a view in a react-native app like in the image. I have added the css for the corresponding view. To make visualization clear, green view is not on the top of red view instead red view is after green view. Use case - I want to hide green…
Shubham Bhewanewala
  • 587
  • 5
  • 18
0
votes
2 answers

React Native custom animation: how to make one section of transition last longer?

I have an Animatable.Text element in my React Native app, and I want it to fade in an out, but spend more time faded in than faded out. In other words, I want its opacity to behave like a sine curve, but where it's steeper and flatter at the top…
gkeenley
  • 6,088
  • 8
  • 54
  • 129
0
votes
1 answer

React native animated api not working on android phones

So, i was trying to do a fade animation using react-native-animated API but unfortunately it does'nt gets animated when i try to render it on my android device. It just dont animate anything and screen is also blank but after sometime(say 30-40…
Shubham Kashyap
  • 11
  • 3
0
votes
1 answer

PanGesture animation does not work when switching between react native navigation screens

I have created a custom tab bar component using react native navigation following this tutorial: https://reactnavigation.org/docs/bottom-tab-navigator#tabbar. I have then placed a custom component on top of the navigation to mimick spotify minimized…
invincibles04
  • 109
  • 3
  • 13
0
votes
0 answers

Fading React Native element after 5 second

I have a View in my React Native screen that I want to display and then fade out after 5 seconds. Here's the view inside the render() method: {this.state.showView ( …
ataravati
  • 8,891
  • 9
  • 57
  • 89
1 2 3 4 5 6
7
8