How to Create SetTimeout in React Native?

Hi Guys,

In this tutorial we will go over the demonstration of how to create setTimeout in react native. you will learn how to implement setTimeout in react native. you can understand a concept of how to use setTimeout in react native. step by step explain setTimeout in react native. Here, Creating a basic example of react native setTimeout example.

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

Let's start following example:

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

expo init ExampleApp

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

import React from 'react';
import { Button, Image, StyleSheet, View} from 'react-native';

const App = () => {
    const [image, setImage] = React.useState(null);

    const showImage = () => {
        setTimeout(() => {
            setImage('https://tuts-station.com/image/tuts-s-logo-new.png');
        }, 3000);
    }

    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}>
                <Image
                    source={{ uri: image }}
                    style={{ width: '100%', height: 160 }}
                    resizeMode='contain'
                />
            </View>
            <View style={styles.buttonContainer}>
                <Button
                    title='Show Image'
                    onPress={() => showImage()}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 0.85,
        justifyContent: 'center',
        paddingHorizontal: 10,
    },
    buttonContainer: {
        marginTop: 10,
    },
    imageContainer: {
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default App;

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

expo start

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

It will help you...