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) {23}
Async syntax for arrow function example
1const exampleSecond = async () => {23}
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';45class ClassComponent extends Component {67 constructor(props) {8 super(props);910 this.state = {11 name : "Infinitbility",12 }1314 }1516 componentDidMount() {17 this.doTask();18 }1920 doTask = async () => {21 // Some consuming task like fetch api or await calls2223 await AsyncStorage.setItem("@ProductTour:key", "true");2425 await this.setState({name : "Infinitbility".toUpperCase() });2627 }2829 getName = () => {3031 return this.state.name;32 }3334 render() {35 return (36 <Text>Hello, Hear {this.getName()}!</Text>37 );38 }39}4041export 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';34const FunctionalComponent = () => {56 const [isFlag, setIsFlag] = useState(false);78 useEffect(() => {910 async function changeFlag() {1112 await delay(1500);13 setIsFlag(!isFlag)14 }1516 changeFlag();17 }, []);18192021 const delay = async ms => new Promise(res => setTimeout(res, ms));222324 return (25 <View>26 {isFlag && <Text>Hello, I am your cat! </Text>}27 </View>2829 );30}3132export 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.