react-native-entrance-animation

react-native-entrance-animation

  

Simple entrance animation for React-Native components

Getting started

npm i react-native-entrance-animation

Usage

Examples

import { AnimateMany } from 'react-native-entrance-animation';

     return (
          <AnimateMany right fade duration={1500} containerStyle={styles.container}>
               <View style={styles.itemContainer}><Text style={{ color: 'white' }}>item 1</Text></View>
               <View style={styles.itemContainer}><Text style={{ color: 'white' }}>item 2</Text></View>
               <View style={styles.itemContainer}><Text style={{ color: 'white' }}>item 3</Text></View>
               <View style={styles.itemContainer}><Text style={{ color: 'white' }}>item 4</Text></View >
               <View style={styles.itemContainer}><Text style={{ color: 'white' }}>item 5</Text></View >
               <View style={styles.itemContainer}><Text style={{ color: 'white' }}>item 6</Text></View >
          </AnimateMany >
     );

const styles = StyleSheet.create({
     container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 10
     },
     itemContainer: {
          height: 40,
          width: '45%',
          backgroundColor: 'steelblue',
          justifyContent: 'center',
          alignItems: 'center'
     }
})

import { Animate } from 'react-native-entrance-animation';

return (
          <View style={styles.container}>
               <Animate top
                    containerStyle={styles.itemContainer}
               >
                    <Text style={{ color: 'white' }}>item 1</Text>
               </Animate>
               <Animate left
                    containerStyle={styles.itemContainer}
               >
                    <Text style={{ color: 'white' }}>item 2</Text>
               </Animate>
               <Animate right
                    containerStyle={styles.itemContainer}
               >
                    <Text style={{ color: 'white' }}>item 3</Text>
               </Animate>
               <Animate bottom
                    containerStyle={styles.itemContainer}
               >
                    <Text style={{ color: 'white' }}>item 4</Text>
               </Animate>
               <Animate fade delay={500}
                    containerStyle={styles.itemContainer}
               >
                    <Text style={{ color: 'white' }}>item 5</Text>
               </Animate>
               <Animate zoom delay={1000}
                    containerStyle={styles.itemContainer}
               >
                    <Text style={{ color: 'white' }}>item 6</Text>
               </Animate>
          </View >
     );

const styles = StyleSheet.create({
     container: {
          flex: 1,
          justifyContent: 'space-evenly',
          alignItems: 'center',
          padding: 10
     },
     itemContainer: {
          height: 40,
          width: '45%',
          backgroundColor: 'steelblue',
          justifyContent: 'center',
          alignItems: 'center'
     }
})

API - Animate

Property	Type	Required	Default
containerStyle	style	no	-
left	boolean	no	false
right	boolean	no	false
top	boolean	no	false
bottom	boolean	no	false
zoom	boolean	no	false
fade	boolean	no	false
spring	boolean	no	false
duration	number	no	350
size	number	no	120
delay	number	no	0
onAnimationEnd	callback	no	-

API - AnimateMany

Property	Type	Required	Default
containerStyle	style	no	-
left	boolean	no	false
right	boolean	no	false
top	boolean	no	false
bottom	boolean	no	false
zoom	boolean	no	false
fade	boolean	no	false
spring	boolean	no	false
duration	number	no	350
size	number	no	120
delay	number	no	0
onAnimationEnd	callback	no	-
simultaneously	boolean	no	false

License

This project is licensed under the MIT License