React Native Call Function Task After Some Time Delay Using setTimeout(function())

The setTimeout(function(){}) is used to set a valued interval time to execute a particular task. This function would hold the event to defined time(In milliseconds-seconds) and than execute the Method. So in this tutorial we would going to create a react native app to Call Function Task After Some Time Delay Using
setTimeout(function(){}) in android iOS application.

Note: 1000 Milliseconds = 1 second.

Contents in this project Call Function Task After Some Time Delay Using setTimeout(function()) in React Native App:

1. Import StyleSheet, View, Button and Alert component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Button, Alert } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, Button, Alert } from ‘react-native’;

2. Create a function named as ShowAlertWithDelay() in your class. Inside this function scope we would create the setTimeout(function(){}) with Just a Alert message. We would define the time as 5000 milliseconds which represents 5 seconds. So when we call this function on button onPress event it will show the Alert message after 5 seconds of delay.

<br />
ShowAlertWithDelay=()=>{</p>
<p>    setTimeout(function(){</p>
<p>      //Put All Your Code Here, Which You Want To Execute After Some Delay Time.<br />
      Alert.alert(“Alert Shows After 5 Seconds of Delay.”)</p>
<p>    }, 5000);</p>
<p>  }

ShowAlertWithDelay=()=>{

setTimeout(function(){

//Put All Your Code Here, Which You Want To Execute After Some Delay Time.

Alert.alert(“Alert Shows After 5 Seconds of Delay.”)

}, 5000);

}

3. Create a Root View in render’s return block and Inside the View we would make a Button component and Call the ShowAlertWithDelay() function on button onPress event.

<br />
render() {</p>
<p>  return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>        <Button title=”CLICK HERE TO SHOW ALERT WITH 5 SECONDS OF DELAY” onPress={this.ShowAlertWithDelay} /></p>
<p>     </View></p>
<p>  );<br />
}

render() {

return (

</View>

);

}

4. Create Style.

<br />
const styles = StyleSheet.create({</p>
<p> MainContainer :{</p>
<p>   flex:1,<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   margin: 10</p>
<p> }</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

flex:1,

justifyContent: ‘center’,

alignItems: ‘center’,

margin: 10

}

});

5. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Button, Alert } from ‘react-native’;</p>
<p>export default class MainActivity extends Component {</p>
<p>  ShowAlertWithDelay=()=>{</p>
<p>    setTimeout(function(){</p>
<p>      //Put All Your Code Here, Which You Want To Execute After Some Delay Time.<br />
      Alert.alert(“Alert Shows After 5 Seconds of Delay.”)</p>
<p>    }, 5000);</p>
<p>  }</p>
<p>render() {</p>
<p>  return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>        <Button title=”CLICK HERE TO SHOW ALERT WITH 5 SECONDS OF DELAY” onPress={this.ShowAlertWithDelay} /></p>
<p>     </View></p>
<p>  );<br />
}<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p> MainContainer :{</p>
<p>   flex:1,<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   margin: 10</p>
<p> }</p>
<p>});