Add Blinking Animation on Text in React Native

This tutorial explains how to create blinking animation on Text in React Native application. In this example we are going to create simple custom component name as BlinkingText. This component perform the blinking animation with the help of react state and props using setInterval function. Generally blinking text is used to get user attention while surfing the application.

React Native Blinking Animation

Lets see the below simple example for blinking animation effect in react native application.

Step-1 : first create the BlinkingText custom component that helps to perform blinking animation effect in react native.

setInterval : This setInterval function update the state every 1000 milliseconds.
state : This state object perform the hide and show effect with the help of setInterval function.

class BlinkingText extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};
 
    // Change the state every second 
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 
    // Define any blinking time.
    1000);
  }
 
  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text style = {{ fontWeight: 'bold', fontSize : 20 , marginTop : 10 }}>{display}</Text>
    );
  }
}

Step-2 : Use the custom component inside the App component.

export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <BlinkingText text='Welcome to skptricks tutorial' />
        <BlinkingText text='Basic of react native tutorial' />
        <BlinkingText text='blinking text in react native application' />
      </View>
    );
  }
}

Complete Source Code for App.js 

Lets see the complete source code that helps to Add Blinking Animation effect on Text in react native application.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, } from 'react-native';


class BlinkingText extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};
 
    // Change the state every second 
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 
    // Define any blinking time.
    1000);
  }
 
  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text style = {{ fontWeight: 'bold', fontSize : 20 , marginTop : 10 }}>{display}</Text>
    );
  }
}


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <BlinkingText text='Welcome to skptricks tutorial' />
        <BlinkingText text='Basic of react native tutorial' />
        <BlinkingText text='blinking text in react native application' />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  
});

Screenshot :

This is all about Add Blinking Animation on Text in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.