Are you looking to Implement React Native Animations in your development project?

Comprehensive Tutorial To Implement React Native Animations.

This article provides in-detail information about the implementation of animations in your React Native project.

Introduction

Comprehensive Tutorial To Implement React Native Animations.
Comprehensive Tutorial To Implement React Native Animations.

Tutorial Goal: Learn to Implement React Native Animations

Working with React Native Animations

Animated.timing(value,{}).start()
useNativeDriver: true

Steps to Quickly Add Animations in React Native App

Creating a React Native App

react-native init Animation

Installing dependencies for Navigation

npm install react-native-gesture-handler react-native-safe-area-context @react-navigation/native @react-navigation/stack.

Creating Components

1. Fade Animation

const Fade= new Animated.Value(0)
useEffect(()=>{ Animated.timing(Fade,{ toValue:1, duration:3000, useNativeDriver: true }).start() },[Fade])
< Animated.Image style={{marginTop:5,height:200,width:200,opacity:Fade,}} source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }} > < /Animated.Image >

2. Spin Animation

const Spin= new Animated.Value(0) const SpinValue= Spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] })
useEffect(()=>{ Animated.timing(Spin,{ toValue:1, duration:3000, useNativeDriver:true }).start() },[Spin])< Animated.Image style={{height:150,width:180,marginTop:8,borderRadius:20,transform:[{rotate:SpinValue}]}} source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }} > < /Animated.Image >

3. Create Scaling Animations in React Native

const Scale= new Animated.Value(0) const ScaleValue= Scale.interpolate({ inputRange: [0, 1], outputRange: [1, 2] })useEffect(()=>{ Animated.timing(Scale,{ toValue:1, duration:3000, useNativeDriver:true }).start() },[Scale])< Animated.Image style={{height:100,width:130,transform:[{scale:ScaleValue}]}} source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }} > < /Animated.Image >

4. Spring Animation

const Spring= new Animated.Value(0.2)useEffect(()=>{ Animated.spring(Spring,{ toValue:1.1, friction:1, useNativeDriver:true}).start() },[Spring])
< Animated.Image style={{height:150,width:180,transform:[{scale:Spring}]}} source={{ uri: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" }} > < /Animated.Image >

5. Parallel Animation

const Scale = new Animated.Value(0) const ScaleValue = Scale.interpolate({ inputRange: [0, 1], outputRange: [-3, 2] }); const Spin = new Animated.Value(0) const SpinValue = Spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }); const SpringVal = new Animated.Value(1) Starting Animation for parallel animation type in use effect: useEffect(() => { Animated.parallel( [ Animated.timing(Scale, { toValue: 1, duration: 3000, useNativeDriver: true }), //scalingAnimated.spring(SpringVal, { toValue: 2, friction: 1, tension: 0.5, useNativeDriver: true }), //springAnimated.timing(Spin, { toValue: 1, duration: 3000, useNativeDriver: true }) //spin ]) .start() }, [Scale, SpringVal, Spin])
< Animated.View style={{ height: 50, width: 80, backgroundColor: 'red', transform: [{ scaleX: ScaleValue }] }} >  What's up  Welcome here !! < /Animated.Text >

6. Sequence Animation

useEffect(() => { Animated.sequence( [ Animated.timing(Scale, { toValue: 1, duration: 3000, useNativeDriver: true }), //scaling Animated.spring(SpringValue, { toValue: 2, friction: 1, tension: 0.5, useNativeDriver: true }), //spring Animated.timing(Spin, { toValue: 1, duration: 3000, useNativeDriver: true }) //spin ]).start() }, [Scale, SpringValue, Spin])

Conclusion

Writer:https://medium.com/devtechtoday | Follower:https://medium.com/@bacancytechnology | Designer | Entrepreneur | Cycling | Reading | Digital Marketing

Writer:https://medium.com/devtechtoday | Follower:https://medium.com/@bacancytechnology | Designer | Entrepreneur | Cycling | Reading | Digital Marketing