react-native-entrance-animation v1.0.1

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

API - AnimateMany

License

This project is licensed under the MIT License