How to use async await in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This article will help you to use async await in react native, we use async-await to manage time consuming tasks using async await we have the option to wait for the first task before executing the second task. Today we will learn to create async functions and how to use await with example in-class component and functional component.

Let’s start today topic how to use async await in react native ✌️

Introduction

First, we have to understand when we use async and when await ☝️.

Async keyword use for define function for use await task, when you want to use to await for wait task then first you have to define async function. Await keyword use for stop execution till task response, we will use multiple await calls in one async function.

Syntax

After understand the meaning 😉 of async await we have to understand their syntax to use in react native, let start with async.

Async syntax for normal function example

1async function exampleOne(items) {
2
3}

Async syntax for arrow function example

1const exampleSecond = async () => {
2
3}

Await syntax example

You can use await function native library calls or you can also use for call your async function

1await AsyncStorage.setItem("@ProductTour:key", "true");

Await call own function example

1const exampleSecond = async () => {
2    await exampleOne();
3}

Async await example in class component

Let’s understand how to use and call async await in class component, well first we need class component structure 😆

1import React, { Component } from 'react';
2import { Text } from 'react-native';
3import AsyncStorage from '@react-native-async-storage/async-storage';
4
5class ClassComponent extends Component {
6
7  constructor(props) {
8      super(props);
9      
10      this.state  =   {
11          name : "Infinitbility",
12      }
13
14  }
15  
16  componentDidMount() {
17    this.doTask();
18  }
19  
20  doTask = async () => {
21    // Some consuming task like fetch api or await calls
22    
23    await AsyncStorage.setItem("@ProductTour:key", "true");
24    
25    await this.setState({name : "Infinitbility".toUpperCase() });
26    
27  }
28
29  getName = () => {
30  
31    return this.state.name;
32  }
33
34  render() {
35    return (
36      <Text>Hello, Hear {this.getName()}!</Text>
37    );
38  }
39}
40
41export default ClassComponent;

Async await example functional component

Let’s understand how to use and call async await in functional component….

1import React, { useEffect, useState } from 'react';
2import { View, Text } from 'react-native';
3
4const FunctionalComponent = () => {
5
6  const [isFlag, setIsFlag] = useState(false);
7    
8    useEffect(() => {
9
10        async function changeFlag() {
11        
12          await delay(1500);
13          setIsFlag(!isFlag)
14        }
15        
16        changeFlag();
17    }, []);
18    
19    
20
21    const delay = async ms => new Promise(res => setTimeout(res, ms));
22
23
24  return (
25    <View>
26      {isFlag && <Text>Hello, I am your cat! </Text>}
27    </View>
28    
29  );
30}
31
32export default FunctionalComponent;

Thanks For Reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

How to use async await in react native

Introduction

Syntax

Async await example in class component

Async await example functional component

Follow me on Twitter

Join our email list and get notified about new content

Looking For React Native Tutorial?

Guide book

Tutorials

Categories

More articles from Infinitbility

How to disable textinput in react native

How to disable touchableopacity in react native