CODEWITHSUNDEEP
javascriptreact-nativeasynchronousexpo
Jacob Liddy
Jacob Liddy

Reputation: 75

How do I execute asynchronus code in a react native navigator?

Attached is the small working example. I want to know how to execute asynchronous code when the navigation container makes it's decision near the in the example below. I know that in this code there is nothing that makes async special here, but in my actual code I have an asynchronous server fetch function.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Provider as PaperProvider } from 'react-native-paper';
import { createDrawerNavigator } from '@react-navigation/drawer';

var is_authorized = false

async function doSomething(){
  console.log("I do something asynchronus here.")
  is_authorized = !is_authorized
}
function Drawer1(){
  return(
    <Text>Drawer 1</Text>
  )
}
function Drawer2(){
  return(
    <Text>Drawer 2</Text>
  )
}
function LoginScreen(){
  return(
    <Text>LoginScreen</Text>
  )
}
export default function App() {

    return (
    <PaperProvider>
      <NavigationContainer>
        {is_authorized ? (
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
              <Drawer.Screen name="Drawer1" component={Drawer1} /> 
              <Drawer.Screen name="Drawer2" component={Drawer2} />
            </Drawer.Navigator> 
          ) : (
            <LoginScreen/>
          )
        }      
      </NavigationContainer>
    </PaperProvider>  
  );
}

In other words, every time is_authorized ? ( is executed, I would like to execute await doSomething() immediately before. I am not sure it is relevant at all, but I am running this with a managed workflow(expo).

EDIT: The asynchronous function that I believe needs to be run is a loop that checks a websocket for new messages, and sleeps while it waits for a message. I use await here to sleep.

this.websocket.onmessage = function(evt) {
  let json_message = JSON.parse(evt.data)
  let message_id = json_message["message_id"]
  this.message_dict[message_id] = json_message;
}
//...
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
//...
for (var i = 0; i < timeout*2; i++) {
  if (message_id in this.websocket.message_dict){
    ...
  }
  await sleep(500)
}

Upvotes: 2

Views: 566

Answers (1)

shyguy189540
shyguy189540

Reputation: 244

This is an interesting problem. I will make a few assumptions, but I think I can get you where you need to go. Base on your code above, I'm going to assume you're working in a stack manager of some sort, that imports all of the files in your project.

You're going to need a useState function. Then, somewhere in the code, you'll need to write a "const" function that will return a promise. You can then take that promise and route it to check to see if it has been given authentication into your stack manager. If the authentication is true, it'll let you access your files; otherwise it won't let you through. It could probably look something like this:

const [authentication, setAuthentication] = React.useState(false) //this will set the initial return to be false, and will only navigate you forward if verified

const getAuthentication = () =>{
 (async () => { //this will execute the function asynchronously 
let authentication_promise = await server.is_auth() //this calls back to what I am assuming will be a server. It will determine authentication credentials from here
setAuthentication(authentication_promise)//This fills the second part of the preset false variable above
    }
    )
   ()
return (authentication) //this returns either a true or false statement based on what "setAuthentication" returns
}


<NavigationContainer>
    { getAuthentication() ? ( //If credentials are verified, promise will return true, and change the initial "const" from above from false to true, and allow you to proceed.
...
}
</NavigationContainer>

Upvotes: 1

Related Questions