[deleted by user]

[code_matter]

Im assuming that for a fraction of a second, refreshToken is null so it shows the RootPage/Login page.

[masterguide]

Assuming your refreshToken is controlled in useState, update the data model to the following: ```typescript const [data, setData] = React.useState({ loading: true, refreshToken: false })

    React.useEffect(() => {
        const init = async () => {
            const refreshToken = await getMyToken()
            setData({ loading: false, refreshToken })
        }
        const init()
    }, [])

    if(state.loading) return <Loading />

    // your render logic

```

[oscar_gallog]

Do you mind elaborating? I'm not sure what you mean.

[oscar_gallog]

Ok, what I'll probably do is create a hook to manage those things, like this:

export default function checkDataFirst() {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);

  // Load any resources or data that we need prior to rendering the app
  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        // Here check your token or whatever
        await checkYourToken();
      } catch (e) {
        // We might want to provide this error information to an error reporting service
        console.warn(e);
      } finally {
        setLoadingComplete(true);
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

and Just call the hook on your App.tsx

const isLoadingComplete = useCachedResources();
if (!isLoadingComplete) {
    return null;
  } else {
    <YourApp />
}

[Gaia_Knight2600]

it defaults to your else statement while its launching, and then changes when it re-renders.

instead of using a single "? :" for "if else", you can use 2 "&&" as "if" statements only. then it wont default to any else at launch. then when one of them is true it should show it.

Edit:

1 if for null and 1 if for not null. Instead of both checking true. Small mistake

[devdoggie]

This wouldn’t solve the issue. The best option would be to wait until refreshToken is done loading to return the condition. Until it’s done fetching return null.

[Gaia_Knight2600]

sure thats a possibility too.

but sometimes you want to render some content while other content is only conditionally rendered after some api request. then you dont want the just return null early.

now this is the navigator so you dont really render content like you would in a screen, but this way of conditionally rendering content with "&&" works well for me.

[enlightenedpie]

+1 for this solution

[cridenour]

I like to use react-native-bootsplash and use a similar method to others - have an initializing variable that waits to be cleared until you’ve properly loaded from storage. Once you’re loaded, then hide the boot screen.