React Native Animated Fade In Fade Out Effect

Aug 09, 2020



React Native Animated Fade In Fade Out Effect

Hi Guys,

In this blog,I will exmplain you how to use animated fade in fade out effect in react native. we will show example of react native animated fade in fade out can easyliy use animated fade in fade out effect in react native. I will use Animated api useing create fade in fade out effect in react native.

Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution.The core workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing().

Here, I will give you full example for simply fade in fade out effect using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init FadeInFadeOut

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from "react";

import { Animated, Text, View, StyleSheet, Button } from "react-native";

class App extends Component {

state = {

fadeAnimation: new Animated.Value(0)


fadeIn = () => {

Animated.timing(this.state.fadeAnimation, {

toValue: 1,

duration: 4000



fadeOut = () => {

Animated.timing(this.state.fadeAnimation, {

toValue: 0,

duration: 4000



render() {

return (

<View style={styles.container}>





opacity: this.state.fadeAnimation




<Text style={styles.fadingText}>Hi!</Text>


<View style={styles.buttonRow}>

<Button title="Fade In" onPress={this.fadeIn} />


<View style={styles.buttonRow}>

<Button title="Fade Out" onPress={this.fadeOut} />






const styles = StyleSheet.create({

container: {

flex: 1,

alignItems: "center",

justifyContent: "center"


fadingContainer: {

paddingVertical: 5,

paddingHorizontal: 25,

backgroundColor: "lightseagreen"


fadingText: {

fontSize: 28,

textAlign: "center",

margin: 10,

color : "#fff"


buttonRow: {

flexDirection: "row",

marginVertical: 16



export default App;

Step 3 - Run project

In the last step run your project using bellow command.

npm start


It will help you...

#React Native