Using useState props in React Native navigation screens with React Navigation

Question

Using useState props in React Native navigation screens with React Navigation

I'm currently working on my first React Native app with react navigation after previously having a background in web react development.

In the past, I typically used useState for managing state. For instance, rendering a list of components based on data retrieved from a database query (such as a Friend List feature) or handling multi-step user sign up processes where each page contributes to the overall state that is then submitted via a post request.

However, it seems like this straightforward approach doesn't work quite the same in React Native. With React Navigation, every screen component is enclosed within a <Stack.Screen> component. How can I pass props to update parent component states? Is Redux necessary for achieving this?

To better explain how I managed this process in React before, let's look at an example involving a 5-step sign up flow:

The user lands on the signup page and fills out information on url/page1. After clicking next, the button triggers setState received from its parent to update the app.state. Then, it transitions to url/page2.

On url/page2, users input their address and continue by hitting next, updating the state and progressing to the subsequent step, and so forth.

Each page adds more details to the state until the final "submit" action aggregates all data and sends it through a POST request to the backend.

Within my React Native app.js, the structure looks similar but with different screens:

<NavigationContainer>
    <Stack.Navigator initialRouteName = "TempHome">
        <Stack.Screen name="TempHome" component={TempHome} />
        ...
    </Stack.Navigator>
</NavigationContainer>

With each screen transitioning to the next using

const ProfileSetupF = () => navigation.navigate('ProfileSetupF')

How do I implement state props management within this context without consolidating all setup screens into a single component or stack.Screen? I want users to utilize the back button and experience smooth transitions when moving between screens. Some suggest utilizing Redux for this purpose. Any suggestions or guidance would be greatly appreciated.

javascript react-native redux use-state react-native-navigation

Answer 1

Answer №1

To effectively handle this scenario, the recommended approach is to utilize the context API. You can learn more about it here: https://reactjs.org/docs/context.html

It's important to note that there is no requirement for the context to be global. You can selectively wrap components, such as authentication components, with the context provider.

An ideal setup would involve creating an AuthenticationContext like below:

const AuthContext = createContext();
  
export const AuthProvider = (props) => {
    const [user, setUser] = useState(null);
    
    const login = async () => {
        // LOGIN FUNCTIONS
        login().then(userDocument => setUser(userDocument))
    }

    return (
        <AuthContext.Provider
            value={{
                user,
                login: login
            }}
        >
            {props.children}
        </AuthContext.Provider>
    );
};

You can then wrap your NavigationProvider with the AuthProvider and check if a user is logged in using the following snippet:

const {user} = useContext(AuthContext)

A more efficient approach would be to dynamically generate a navigator based on the AuthContext, as demonstrated below:

const AppNavigator = () = {
  const {user} = useContext(AuthContext);

  return (
<>
        {!user ? <Stack.Navigator initialRouteName = "Auth">
          <Stack.Screen name="TempHome" component={TempHome} />
          <Stack.Screen name="Welcome" component={Welcome} />
          <Stack.Screen name="LogIn" component={LogIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </Stack.Navigator>
       :
       <Stack.Navigator initialRouteName = "TemHome">
          <Stack.Screen name="ProfileSetupA" component={ProfileSetupA} />
          <Stack.Screen name="ProfileSetupB" component={ProfileSetupB} />
          <Stack.Screen name="ProfileSetupC" component={ProfileSetupC} />
          <Stack.Screen name="ProfileSetupD" component={ProfileSetupD} />
          <Stack.Screen name="ProfileSetupE" component={ProfileSetupE} />
          <Stack.Screen name="ProfileSetupF" component={ProfileSetupF} />
          <Stack.Screen name="ProfileSetupG" component={ProfileSetupG}/>
          <Stack.Screen name="ProfileSetupH" component={ProfileSetupH}/>
          <Stack.Screen name="PetProfileHome" component={PetProfileHome} />
          <Stack.Screen name="PetProfileScheduledActivities" component={PetProfileScheduledActivities} />
          <Stack.Screen name="PetProfileAccount" component={PetProfileAccount} />
          <Stack.Screen name="PetProfileTraits" component={PetProfileTraits} />
          <Stack.Screen name="PetProfileInvitation" component={PetProfileInvitation} />

          <Stack.Screen name="Notification" component={Notification} />
          <Stack.Screen name="NetworkExample" component={Network} />
          <Stack.Screen name="MapExample" component={MapExample} />
          <Stack.Screen name="ShareExample" component={ShareExample} />

        </Stack.Navigator>
</>
  )
}

Answer 2

To effectively handle this scenario, the recommended approach is to utilize the context API. You can learn more about it here: https://reactjs.org/docs/context.html

It's important to note that there is no requirement for the context to be global. You can selectively wrap components, such as authentication components, with the context provider.

An ideal setup would involve creating an AuthenticationContext like below:

const AuthContext = createContext();
  
export const AuthProvider = (props) => {
    const [user, setUser] = useState(null);
    
    const login = async () => {
        // LOGIN FUNCTIONS
        login().then(userDocument => setUser(userDocument))
    }

    return (
        <AuthContext.Provider
            value={{
                user,
                login: login
            }}
        >
            {props.children}
        </AuthContext.Provider>
    );
};

You can then wrap your NavigationProvider with the AuthProvider and check if a user is logged in using the following snippet:

const {user} = useContext(AuthContext)

A more efficient approach would be to dynamically generate a navigator based on the AuthContext, as demonstrated below:

const AppNavigator = () = {
  const {user} = useContext(AuthContext);

  return (
<>
        {!user ? <Stack.Navigator initialRouteName = "Auth">
          <Stack.Screen name="TempHome" component={TempHome} />
          <Stack.Screen name="Welcome" component={Welcome} />
          <Stack.Screen name="LogIn" component={LogIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </Stack.Navigator>
       :
       <Stack.Navigator initialRouteName = "TemHome">
          <Stack.Screen name="ProfileSetupA" component={ProfileSetupA} />
          <Stack.Screen name="ProfileSetupB" component={ProfileSetupB} />
          <Stack.Screen name="ProfileSetupC" component={ProfileSetupC} />
          <Stack.Screen name="ProfileSetupD" component={ProfileSetupD} />
          <Stack.Screen name="ProfileSetupE" component={ProfileSetupE} />
          <Stack.Screen name="ProfileSetupF" component={ProfileSetupF} />
          <Stack.Screen name="ProfileSetupG" component={ProfileSetupG}/>
          <Stack.Screen name="ProfileSetupH" component={ProfileSetupH}/>
          <Stack.Screen name="PetProfileHome" component={PetProfileHome} />
          <Stack.Screen name="PetProfileScheduledActivities" component={PetProfileScheduledActivities} />
          <Stack.Screen name="PetProfileAccount" component={PetProfileAccount} />
          <Stack.Screen name="PetProfileTraits" component={PetProfileTraits} />
          <Stack.Screen name="PetProfileInvitation" component={PetProfileInvitation} />

          <Stack.Screen name="Notification" component={Notification} />
          <Stack.Screen name="NetworkExample" component={Network} />
          <Stack.Screen name="MapExample" component={MapExample} />
          <Stack.Screen name="ShareExample" component={ShareExample} />

        </Stack.Navigator>
</>
  )
}

Using useState props in React Native navigation screens with React Navigation

Answer №1

Similar questions

Create a custom definition for the useSelector function within a separate TypeScript file in a React

Using environmental variables in Nuxt 2 or Nuxt 3 - a step-by-step guide

Interested in integrating server side JavaScript with your Android application?

Examining whether an ajax call was not initiated within an Angular application

Utilizing Odometer to pass a variable to jQuery

Enhance user experience with jQuery UI sortable and the ability to edit content in real

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

"I'm encountering an issue with Passport.js where req.isAuthenticated is throwing an error as not

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

Is it possible for a search box selection toggle to reveal a hidden information box underneath it containing all the compiled data?

Internal styles are effective, while external styles seem to be less efficient

The authorization process for uploading data to Azure Data Lake Gen2

Basic click event triggered every second click in JavaScript and HTML

Javascript's ReferenceError occasionally acts inconsistently when using Firefox's scratchpad

Translating coordinates into their corresponding location on the chart

Can you identify the target of the term "this" in the upcoming JavaScript code?

Querying and Retrieving a List of Nested Documents in MongoDB

Automatically close the popup each time it is displayed (using jQuery/JavaScript)

Instructions for removing a class using the onclick event in JavaScript

Creating a visual representation of data using Google Charts to display a stacked bar chart