React Native SetTimeout Example
Jun 20, 2022 . Admin
Hi Guys,
In this article we will cover on how to implement react native setTimeout example. Here you will learn how to create setTimeout in react native. In this article, we will implement a how to use setTimeout in react native. if you want to see example of setTimeout in react native then you are a right place. Here, Creating a basic example of how to implement setTimeout in react native.
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:
Step 1: Download ProjectIn the first step run the following command to create a project.
expo init ExampleAppStep 2: App.js
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://www.mywebtuts.com/image/logo-1.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
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...