Animation does not stay in it's view

Question

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 https://user-images.githubusercontent.com/7225808/55251949-0a826d00-5228-11e9-9c0a-8591d32756d5.gif

render() {
return ([
    <View >
        <View style={style.arrow}>
        <Animatable.View 
        duration={3000} 
        style={style.arrow} 
        animation="slideInUp" 
        easing="ease-out" 
        iterationCount="infinite" 
        direction="alternate">
            <Image source={require('./ConnectArrow.png')} />
        </Animatable.View>
        </View>
    </View>,
    <View style={style.textView}>
        <Text style={style.textView}>Tap to Connect</Text>
    </View>
]);
}
}

    arrow: {
      alignItems: 'center',
      height: 30,
      marginTop: -10
    },
    textView: {
        alignItems: 'center',
        color: "#CCCCCC",
        fontSize: 18,
    }
  }

score 0 · Answer 1 · answered Apr 06 '19 at 14:20

you did it very well by default animation animation="slideInUp" but for your requirement that animation within view you have to do it by custom animation.

You can do that by custom animation, you can set animation whatever you want. In that, you have to set your animation in Y direction within the range you want.

Just for your reference.

animation={{
      0: {
        translateY:20,
      },
      0.5: {
        translateY: 40,
      },[
      1: 
        translateY: 60,
      },
    }}

refer to this example

https://github.com/oblador/react-native-animatable/blob/master/Examples/MakeItRain/App.js

Animation does not stay in it's view

1 Answers1