React Native Navigation

Install React Navigation
npm install @react-navigation/native

Install dependencies
npm install react-native-screens react-native-safe-area-context

Stack Navigator
npm install @react-navigation/native-stack

Bottom Tabs
npm install @react-navigation/bottom-tabs

Drawer
npm install @react-navigation/drawer

Basic setup
import { NavigationContainer } from @react-navigation/native;
import { createNativeStackNavigator } from @react-navigation/native-stack;

const Stack = createNativeStackNavigator();

function App() {
  return (
    
      
         name="Home" component={HomeScreen} 
         name="Details" component={DetailsScreen} 
      
    
  );
}

Navigate to screen
navigation.navigate("Details");
navigation.navigate("Details", { itemId: 42 });

Push new screen
navigation.push("Details");

Go back
navigation.goBack();

Pop to top
navigation.popToTop();

Access params
const { itemId } = route.params;

Set params
navigation.setParams({ itemId: 99 });

Setup
import { createBottomTabNavigator } from @react-navigation/bottom-tabs;

const Tab = createBottomTabNavigator();

function App() {
  return (
    
       name="Home" component={HomeScreen} 
       name="Settings" component={SettingsScreen} 
    
  );
}

Custom icons
screenOptions={({ route }) => ({
  tabBarIcon: ({ color, size }) => {
    return  name="home" size={size} color={color} ;
  }
})}

Screen options

  name="Home"
  component={HomeScreen}
  options={{
    title: "My Home",
    headerStyle: { backgroundColor: "#f4511e" },
    headerTintColor: "#fff",
    headerTitleStyle: { fontWeight: "bold" }
  }}


Dynamic title
navigation.setOptions({
  title: "Updated!"
});

Header buttons
headerRight: () => (
   onPress={handlePress} title="Info" 
)