Navigate back to the homepage

How to use async await in react native

Infinitbility
React Native
August 5th, 2021 · 1 min read
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…

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.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to disable textinput in react native

How to disable textinput in react native

React Native disable textinput example

August 4th, 2021 · 1 min read
How to disable touchableopacity in react native

How to disable touchableopacity in react native

React Native disable touchableopacity example

August 4th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]