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