React Native Cheatsheet

React Native Navigation

Use this React Native reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

React Navigation Setup

The standard navigation library for React Native. This page targets React Navigation v7.

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
cd ios && pod install

# Stack navigator
npm install @react-navigation/native-stack

# Tab navigator
npm install @react-navigation/bottom-tabs

# Drawer navigator
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Root Setup

// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'My Profile' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

TypeScript: Typed Params

// types/navigation.ts
export type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; name: string };
  Profile: { userId: string };
};

// Screen component
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;

function DetailsScreen({ route, navigation }: Props) {
  const { itemId, name } = route.params;
  return <Text>{name}</Text>;
}

// useNavigation hook with types
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

Stack Navigator

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

<Stack.Navigator
  initialRouteName="Home"
  screenOptions={{
    headerStyle: { backgroundColor: '#007AFF' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
    headerBackButtonDisplayMode: 'minimal',  // v7; replaces deprecated headerBackTitleVisible
    animation: 'slide_from_right',
    contentStyle: { backgroundColor: '#fff' },
  }}
>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={({ route, navigation }) => ({
      title: 'Home',
      headerRight: () => (
        <Pressable onPress={() => navigation.navigate('Settings')}>
          <Text>⚙</Text>
        </Pressable>
      ),
    })}
  />
  <Stack.Screen
    name="Modal"
    component={ModalScreen}
    options={{ presentation: 'modal' }}  // iOS sheet
  />
</Stack.Navigator>

Stack `animation` values

`presentation` values

Navigation Methods

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

// Navigate to screen
navigation.navigate('Details', { itemId: 42, name: 'Widget' });

// Push new screen even if it already exists in stack
navigation.push('Details', { itemId: 99 });

// Go back
navigation.goBack();
navigation.canGoBack()  // boolean

// Replace current screen
navigation.replace('Login');

// Reset navigation state
navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
});

// Pop multiple screens
navigation.pop(2);
navigation.popToTop();

// Set params on current screen
navigation.setParams({ name: 'Updated' });

// Programmatic options update
navigation.setOptions({ title: 'New Title', headerShown: false });

Route Params

import { useRoute } from '@react-navigation/native';

function DetailsScreen() {
  const route = useRoute();
  const { itemId, name } = route.params as { itemId: number; name: string };
  return <Text>{name}</Text>;
}

// From screen props (preferred with TypeScript)
function DetailsScreen({ route, navigation }: Props) {
  const { itemId } = route.params;
}

Bottom Tab Navigator

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

const Tab = createBottomTabNavigator();

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      const iconName = route.name === 'Home' ? 'home' : 'settings';
      return <Icon name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: '#007AFF',
    tabBarInactiveTintColor: '#8E8E93',
    tabBarStyle: { backgroundColor: '#fff', borderTopColor: '#E5E5EA' },
    headerShown: false,
  })}
>
  <Tab.Screen name="Home" component={HomeStack} />
  <Tab.Screen
    name="Search"
    component={SearchScreen}
    options={{ tabBarBadge: 3 }}
  />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

Drawer Navigator

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

<Drawer.Navigator
  screenOptions={{
    drawerPosition: 'left',
    drawerType: 'slide',       // 'slide' | 'front' | 'back' | 'permanent'
    drawerStyle: { width: 280 },
    drawerActiveTintColor: '#007AFF',
    overlayColor: 'rgba(0,0,0,0.5)',
    swipeEnabled: true,
  }}
  drawerContent={(props) => <CustomDrawerContent {...props} />}
>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Settings" component={SettingsScreen} />
</Drawer.Navigator>

// Open/close from code
navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();

Nested Navigators

// Tabs inside Stack (common pattern)
const RootStack = createNativeStackNavigator();
const MainTab = createBottomTabNavigator();

function MainTabs() {
  return (
    <MainTab.Navigator>
      <MainTab.Screen name="Home" component={HomeScreen} />
      <MainTab.Screen name="Feed" component={FeedScreen} />
    </MainTab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
        <RootStack.Screen name="Modal" component={ModalScreen} options={{ presentation: 'modal' }} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

Navigation Events & Focus

import { useFocusEffect, useIsFocused } from '@react-navigation/native';

// Run on focus / cleanup on blur
useFocusEffect(
  React.useCallback(() => {
    fetchData();
    return () => cancelRequest();
  }, [])
);

// Boolean: is this screen focused
const isFocused = useIsFocused();

// Event listener
useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => console.log('focused'));
  return unsubscribe;
}, [navigation]);

// Available events
navigation.addListener('blur', handler);
navigation.addListener('focus', handler);
navigation.addListener('state', handler);
navigation.addListener('beforeRemove', handler);  // intercept back

Deep Linking

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:itemId',
      Profile: {
        path: 'user/:userId',
        parse: { userId: (id: string) => parseInt(id) },
      },
    },
  },
};

<NavigationContainer linking={linking} fallback={<ActivityIndicator />}>
  ...
</NavigationContainer>

Expo Router (File-based routing)

npx create-expo-app MyApp --template tabs

app/
├── _layout.tsx       # Root layout (NavigationContainer equivalent)
├── index.tsx         # "/" route
├── (tabs)/
│   ├── _layout.tsx   # Tab layout
│   ├── home.tsx      # "/home"
│   └── profile.tsx   # "/profile"
└── details/
    └── [id].tsx      # "/details/123"

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: 'Home' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
    </Tabs>
  );
}

// Navigation in components
import { router, useLocalSearchParams } from 'expo-router';

router.push('/details/42');
router.replace('/login');
router.back();

// In details/[id].tsx
const { id } = useLocalSearchParams();