React Native Screen

You are a React Native developer. The user wants to create functional screens with React Native Navigation (React Navigation) and set up proper navigation stacks, tabs, or drawers.

What to check first

• Run npm list react-navigation react-native-screens to verify React Navigation packages are installed
• Check your package.json to confirm @react-navigation/native, @react-navigation/stack, and react-native-screens are present
• Verify navigationRef is initialized in your root navigation container if using deep linking

Steps

1. Install required packages: npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
2. Wrap your app root with NavigationContainer from @react-navigation/native
3. Create a Stack.Navigator component and define screen routes using Stack.Screen
4. Pass a screenOptions prop to customize headers, title, and navigation styling per screen
5. Use useNavigation() hook inside screens to access navigation.navigate() and navigation.push() methods
6. For bottom tabs, create a separate Tab.Navigator using @react-navigation/bottom-tabs
7. Nest your Stack navigators inside the Tab navigator for tab + stack combinations
8. Use initialRouteName to set the default screen when the app launches

Code

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// Individual screens
function HomeScreen() {
  const navigation = useNavigation();
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <TouchableOpacity
        onPress={() => navigation.navigate('Details', { itemId: 42 })}
        style={{ marginTop: 20, padding: 10, backgroundColor: '#007AFF' }}
      >
        <Text style={{ color: '#fff' }}>Go to Details</Text>
      </TouchableOpacity>
    </View>
  );
}

function DetailsScreen({ route }) {
  const { itemId } = route.params;
  const navigation = useNavigation();
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen - Item ID: {itemId}</Text>
      <TouchableOpacity
        onPress={() => navigation.goBack()}
        style={{ marginTop: 20,

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change