How to Use Set Timeout in React Native?

Nov 21, 2022 . Admin

Today, I would like to show you set timeout in react native. you can understand the concept of using set timeout to render components in react native. you will learn set timeout react native example. This article goes in detailed on how to stop set timeout in react native. Follow below tutorial step of how to use set timeout function in react native.

Sometimes, we may need to execute code after some delay. In such cases, we use the JavaScript method setTimeout in React Native. The setTimeout method is used to execute a function after waiting a specific amount of time.

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

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

import React, {useEffect} from 'react';
import {View, Text, Alert} from 'react-native';

const App = () => {
  useEffect(() => {
    setTimeout(() => {
      Alert.alert('I am appearing...', 'After 5 seconds!');
    }, 5000);
  }, []);
  return (
    <View style={{justifyContent: 'center', alignItems: 'center',marginTop: 40}}>
      <Text style={{color: 'black'}}>Alert will appear after 5 seconds</Text>
    </View>
  );
};

export default App;
Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...

#React Native