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 effect.you 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
    }).start();
  };

  fadeOut = () => {
    Animated.timing(this.state.fadeAnimation, {
      toValue: 0,
      duration: 4000
    }).start();
  };

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.fadingContainer,
            {
              opacity: this.state.fadeAnimation
            }
          ]}
        >
          <Text style={styles.fadingText}>Hi!</Text>
        </Animated.View>
        <View style={styles.buttonRow}>
          <Button title="Fade In" onPress={this.fadeIn} />
        </View>
        <View style={styles.buttonRow}>
          <Button title="Fade Out" onPress={this.fadeOut} />
        </View>
      </View>
    );
  }
}

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

Output

It will help you...