React Native Animated Fade In Fade Out Effect

When “React Native Animated Fade In Fade Out Effect” moves through design, development and browser testing, write resignation email resignation letter email examples can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

Aug 09, 2020

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...