iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Stack Navigator

By · Reviewed & last updated · Part of React Native Tutorial

createNativeStackNavigator renders push/pop screens with native gestures, headers, and transitions. It’s the right answer for “a list of detail screens” navigation — the iOS / Android default.

Routes, params, headers, modals

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

const Stack = createNativeStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerStyle:      { backgroundColor: '#04AA6D' },
                    headerTintColor:  '#fff',
                    headerBackTitle:  'Back',
                    animation:        'slide_from_right',
                }}
            >
                <Stack.Screen
                    name="Feed"
                    component={Feed}
                    options={{ title: 'Feed' }}
                />
                <Stack.Screen
                    name="Post"
                    component={Post}
                    options={({ route }) => ({ title: route.params.title })}
                />
                <Stack.Screen
                    name="Settings"
                    component={Settings}
                    options={{ presentation: 'modal' }}   // slide up; X / swipe to dismiss
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

// Inside Feed — navigate to Post
function Feed({ navigation }) {
    return (
        <Pressable onPress={() => navigation.navigate('Post', { id: 42, title: 'Post #42' })}>
            <Text>Open post 42</Text>
        </Pressable>
    );
}

// Inside Post — read params, set header dynamically
function Post({ route, navigation }) {
    const { id } = route.params;

    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerRight: () => <Button title="Share" onPress={() => share(id)} />,
        });
    }, [navigation, id]);

    return <Text>Post {id}</Text>;
}

// Pop / push patterns
navigation.goBack();
navigation.popToTop();
navigation.replace('Login');               // swap current, no back
navigation.reset({ index: 0, routes: [{ name: 'Home' }] });   // wipe stack

Why it matters

Use presentation: "modal" for “temporary” screens (settings, share sheets). They get the OS-native swipe-down gesture, signalling “close me” without back-arrow confusion.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
<NavigationContainer>
    <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
    </Stack.Navigator>
</NavigationContainer>
Try it Yourself »

Discussion

Loading…