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
1
vote
1 answer

How can I reset the animation in react-native-animatable whenever props change?

I would like to reset the animation and replay as the props change, but it works only once at first. I used the react-native-animatable npm library and I could not find the solution to the resetting animation. This is my code with animation. import…
goldvenus
  • 898
  • 1
  • 10
  • 21
1
vote
1 answer

React Native Rotate Animation

I am trying to create an animation using hooks, but I have problems with my code. can anybody help me? No error appears when I test, but the image does not appear. I'm trying to make a picture rotate on my loading screen. export default function…
1
vote
0 answers

ReactNative run out of scope animations in parallel

In order to run sequance of animations in parallel ReactNative Animated API provides Animated.parallel method. This approach works just fine considering that all the animations objects are in the scope of the animated component. However sometimes…
Elias
  • 698
  • 8
  • 23
1
vote
0 answers

React Native Transforms for move view on layout

I'm developing an app. This app has a HomeScreen where 6 icons are displayed. When I press on an icon react navigator navigate to a new screen. When I press the icon, before transition, it has to happen an animation. I don't want to use Transitioner…
1
vote
1 answer

Animation does not stay in it's view

I've created an animation and it animates, great! However, it doesn't stay in its container. Notice it should stay within the yellow view Here is a GIF…
mKane
  • 932
  • 13
  • 30
1
vote
0 answers

reverse animate in infinite mode

I am use react-native-animatable , when use zoomIn animate, After zooming once, it zoomOut then zooming in , how can ignore reverse in infinite mode
1
vote
1 answer

How to animate custom component which is inside text component in react native using react-native-animatable?

const MyCustomComponent = Animatable.createAnimatableComponent(Icon); return( Made with{' '}
Sachin
  • 99
  • 1
  • 2
  • 9
1
vote
0 answers

React Native ScrollView

I am new to react native, have a requirement in which I have to scroll images in arc, like scrolling over a semi circular arc, is it possible to design the same using scrollview, can anyone just drop me some hints ? , I am also trying out…
debrup
  • 11
  • 2
1
vote
1 answer

How to start react-native onTouchDown anination

I am using Expo and the latest version of React-Native and I want to provide a subtle tactile feedback for Components like a View or Button. I currently use animatable to start a pulse animation on the onPress() event but the animation only fires…
dhj
  • 4,780
  • 5
  • 20
  • 41
1
vote
1 answer

Drawer Navigator Event (open, close) to animate a menu

My Drawer : const AppDrawerNavigator = createDrawerNavigator({ Home: { screen: HomeScreen, }, }, { contentComponent: Sidebar } ) Here my Side Bar component : (troncated to be more clear) render() { const routes = [{ …
1
vote
0 answers

Target component/view that is not child

I am using React Navigation and React Native Animatable, both awesome. Is it possible to interact with another react component that is not its child? Like the below. I get an error "Invariant Violation: React.Children.only expected to receive a…
vemund
  • 1,667
  • 4
  • 29
  • 43
1
vote
0 answers

React native how to animate view opening up->down

Consider the following component where the user selects an option from a list: import React, { Component } from "react"; import PropTypes from "prop-types"; import { View, Text, StyleSheet, Platform, FlatList, …
Mendes
  • 17,489
  • 35
  • 150
  • 263
1
vote
0 answers

react native set animated value to animation

I set a simple animated value like: this.state = { filterOffset = new Animated.Value(0) } handleToogle() { var _toValue = this.state.filterOffset.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) …
Green Eagle
  • 227
  • 3
  • 12
1
vote
2 answers

Reloading an animation React-native-animatable library

guy's I'm using the react-native-animatable library. Basically, when I load my app the animation runs, however, when I go to another tab and return to the initial page the animation doesn't run anymore. I think it's because it' doesn't get reloaded…
1
vote
1 answer

how to implement React native countdown circle

someone, please help me implementing countdown circle in react-native I want the timer to start at 300 seconds goes down to 0 with an animated circle and text(time) inside that. I tried using…
Deepak Verma
  • 373
  • 7
  • 19