Question 263829 in React native Question posted in
The official React Native documentation can be found here.

React Native logic based navigation depending on next screen data

I have a React Native applications where during the onboarding workflow (after login), I have few screens to display or to skip depending on the data retrieved from my backend (which are stored in a local database).

For instance, I have a screen displaying legal documents to be accepted by user, but if the user reinstall the app on a new device, when he authenticates, the agreed status of the legal documents will be retrieved from backend and this screen may be skipped…

My problem is to determine where to write that logic related to navigation.

The typical workflow is :

Login => Loading screen (until we have downloaded legal docs) => Legal documents (optional as explained) => other onboarding screens => Loading screen again (if data retrieval from backend is still in progress).

Where should I write the navigation.navigate('LegalDocuments') line of code.

  • If I write it in the Loading screen, I will fetch the documents (in order to determine next screen), and then in the legal documents screen, I will fetch those documents one more time.
  • Same problem if I fetch them in the navigator.
  • If I fetch them in the useFocusEffect of the legal documents screen, the user will briefly see the screen transition.

How/Where should I implement this navigation logic ?

Tags:

2

Answers


  1. 0

    You don’t need to have a loading screen per se, but a simple loading component (which can be fullscreen if needed).

    So you would fetch the documents inside a hook like useFetchLegalDocuments and you would navigate from the login to the LegalDocuments screen, but until the fetch is done you would display the loading.

    const LegalDocumentsContainer = () => {
  const { isLoading, legalDocuments } = useFetchLegalDocuments();

  if (isLoading) {
    return <Loading />
  }

  return <LegalDocuments documents={legalDocuments} />
}

    When the user gets to this screen they will see a loading indicator, but as soon as fetching finishes the component will render the legal documents.

    Please keep in mind this is very high level and I moved part of the logic into the hook so I could focus on the question.

    Login or Signup to reply.
  2. 0

    Personally I do an AuthorizedAreaNavigator and a separate LoginNavigator.

    I would put the legal calls/onboarding workflow in the login/authorization loader on the login page. So that when you hit the authorized area navigator you already have all the data you need to navigate the user to your correct area. I think this is a better user experience than multiple loading screens.

    In order to have all the data available to your Authorized Area Navigator I usually use a create a React Context Provider I would call it something like UserContext. The context holds all the state for your user and more specifically the state and files that you would need to show for onboarding/legal.

    https://react.dev/reference/react/createContext

    I personally like to put my logic in a context as well so I would create a function to do the http call to get user data in the context then just call that function in the login screen or even better as part of the authorize/login function. That way I only have to surface out one method to the loginScreen for authorize/login and when that completes I know I have all the user data I will need to move forward and get the user to where they need to go.

    Hope that helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search