How to use 'await/async' in react native?

[orhangazi]

1. SDK Version: expo --version: 4.0.17
2. Android Bersion: Android 10
3. expo-sqlite, expo-sqlite-orm

I am getting isValidate value from sqlite and routing user to MainTabs or ValidateUser components. But I can not do it because it is not working async/await (Or I couldn’t.).

initialRouteName will be assigned the name of the component to which users will be routed.
Now react native routing to "ValidateUser".

Not: When I try flag async the MainNavigationContainer and I write await directly inside it is throwing error.

Not: I am using expo-sqlite-orm for getting data from database

GitHub - dflourusso/expo-sqlite-orm: Expo SQLite ORM

    //imports truncated...
    
    const Stack = createStackNavigator()
    
    //truncated...
    
    const MainNavigationContainer = (props) => {
    
    	console.log("MainNavigationContainer props", props)
    
    	var initialRouteName = "ValidateUser"
    
    	async function validateUserFunc () {
    		const validatedUser = await Users.findBy({isAdmin_eq: 1})
    		console.log('validatedUser in validateUserFunc: ', validatedUser)
    		props.setValidatedUser(validatedUser)
    
    		let userIsValidated = validatedUser.isValidated
    		let validatedTelNumber = validatedUser.telNo
    
    		initialRouteName = userIsValidated === 1 ? "MainTabs" : "ValidateUser"
    		console.log('initialRouteName in validateUserFunc: ', initialRouteName)
    	}
    
    	validateUserFunc()
    	console.log('initialRouteName after validateUserFunc: ', initialRouteName)
    
    	//truncated...
    
    	return (
    		<NavigationContainer>
    			<Stack.Navigator
    				screenOptions={screenOptions}
    				initialRouteName={initialRouteName}
    			>
    				//truncated Stack.Screen...
    			</Stack.Navigator>
    		</NavigationContainer>
    	)
    }
    
    const mapStateToProps = state => {
    	return {
    		...state
    	}
    }
    
    export default connect(mapStateToProps, {validateUser, listenMessages, setValidatedUser})(MainNavigationContainer)

Users.js entity:

import * as SQLite from 'expo-sqlite'
import { BaseModel, types } from 'expo-sqlite-orm'
import * as FileSystem from "expo-file-system";

export default class Users extends BaseModel {
	constructor(obj) {
		super(obj)
	}

	static get database() {
		/*return async () => SQLite.openDatabase({
			name:"ulak.db",
			location:"default"
		})*/

		return async () => SQLite.openDatabase("ulak.db")
		//return async () => SQLite.openDatabase(`${FileSystem.documentDirectory}SQLite/ulak.db`)
	}

	static get tableName() {
		return 'users'
	}

	static get columnMapping() {
		return {
			id: { type: types.INTEGER, primary_key: true }, // For while only supports id as primary key
			userName: { type: types.TEXT, not_null: true },
			userSurname: { type: types.TEXT, not_null: true },
			telNo: { type: types.TEXT, not_null: true },
			deviceId: { type: types.TEXT },
			isValidated: { type: types.INTEGER, default: 0, not_null: true },
			isAdmin: { type: types.INTEGER, not_null: false, default: 0 },//if isAdmin=1 phone owner, it will authentication.
			profilePicture: { type: types.TEXT, default: null },
			registerDate: { type: types.DATETIME, not_null: true, default: () => Date.now() }
		}
	}
}

[likeso]

You should use the useEffect hook. This will execute once your component mount. after your async task finished, you can update your component by setState