UNPKG

react-native-easy-animations

Version:

A simple and easy to use React Native package with multiple Animated Components.

73 lines (52 loc) 1.48 kB
# react-native-easy-animations Animate your React Native components with full customization and ease of use. ## Installation ```bash npm i react-native-easy-animations ``` ## Usage ``` import React, { useState } from 'react'; import { View, Text, TouchableOpacity, } from 'react-native'; import { Fade } from 'react-native-easy-animations'; const App = () => { /** * fadeIn = true, fadeOut = false => Fade In animation on start. * fadeIn = false, fadeOut = true => Fade Out animation on start. * If both start as true, the starting opacity is 0. * If they are both false, the starting opacity is 1 */ const [fadeIn, setFadeIn] = useState(true); const [fadeOut, setFadeOut] = useState(false); const triggerFadeIn = ()=>{ setFadeIn(true); setFadeOut(false); } const triggerFadeOut = ()=>{ setFadeIn(false); setFadeOut(true); } return ( <View> <Fade duration={500} fadeIn={fadeIn} fadeOut={fadeOut}> <Text>I am a very good example</Text> </Fade> <View> <TouchableOpacity onPress={triggerFadeIn}> <Text>Fade In</Text> </TouchableOpacity> <TouchableOpacity onPress={triggerFadeOut}> <Text>Fade Out</Text> </TouchableOpacity> </View> </View> ); }; export default App; ``` ## License [MIT](https://choosealicense.com/licenses/mit/)