How do I create an app settings page in react native?

Question

I am looking to set up a simple setting page for my app using react native. I already have api calls made for the sign in page and editing user info. From the settings page, I want to have a sign out option that leads to the sign in page and another option that allows the user to edit their info. How do I do this in react native so that I can reuse those api files in the settings?

Answer 1

I hope you are using 'React Navigation'. If not, you can go check official documents. https://reactnavigation.org/docs/getting-started

import * as React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

const Stack = createNativeStackNavigator();

function AppNavigation() {
  const [user, setUser] = React.useState();

  React.useEffect(() => {
    // Add Listener to user authentication changes
  }, [user]);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Profile" component={Profile} />
            <Stack.Screen name="Settings" component={Settings} />
          </>
        ) : (
          <Stack.Screen name="Sign In" component={SignIn} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}