How to use SetTimeout in React Native?

Hello dev’s! today now in this article, i will talk about the how we can use setTimeout in react native. Here I would like to show you an example of how to create setTimeout in react native. If you want to know about an example of react native setTimeout example then i hope you are in right place.Here I will explained this simply step by step how we can implement the setTimeout in react native. we will do the following things for the setTimeout in react native.

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

Let’s start and following this example:

Step 1: Download Project

Now in the first step need run the following command to create a project.

expo init ExampleApp

Step 2: App.js

Then In this step, we will open the App.js file and then 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://www.nicesnippets.com/image/nice-logo.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;

Run Project

Now in the last step need run our project by using the below command.

expo start

Read Also: How To Change phpMyAdmin Login URL Ubuntu Apache 22.04 ?

Thanks for read. I hope it help you. For more you can follow us on facebook