How to use async and await inside a React Native functional component?

Oct 06, 2022 . Admin

This simple article demonstrates of using async/await inside a react functional component. let’s discuss about how to use async/await in the functional component react native. step by step explain using async await inside react's useeffect() hook. you can understand a concept of how to use async and await inside a react functional component.

In this example,We will use async and await inside a React functional component, we can define an async function inside the component and call it.below's this 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, useState } from 'react';
import { View, Text,StyleSheet } from 'react-native';

const FunctionalComponent = () => {
  const [isFlag, setIsFlag] = useState(false);
    useEffect(() => {
        async function changeFlag() {
          await delay(1500);
    }, []);
  const delay = async ms => new Promise(res => setTimeout(res, ms));
  return (
    <View style={styles.container}>
      {isFlag && <Text>Hello World! </Text>}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

export default FunctionalComponent;
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.


It will help you...

#React Native