NavigationStack

Navigation

NavigationStack

Simple stack container for wizard or onboarding flows.

Usage

Manage progressive steps with built-in header + back handling.

Highlights

• Hooks into Portal for overlays
• Abstracts step transitions

When to use it

• Multi-screen flows live inside a modal.
• You need consistent header/back affordances.

Related components

TabsAppbar

Examples

Default

Preview (Web)

import { useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from 'react-native-molecules/components/Button';
import { NavigationStack } from 'react-native-molecules/components/NavigationStack';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  container: {
      width: 320,
      height: 320,
      padding: 24,
      borderRadius: 16,
      alignItems: 'center',
      justifyContent: 'center',
      gap: 12,
      backgroundColor: '#e7e5ff',
  },
  text: {
      fontSize: 24,
      fontWeight: '600',
  },
  button: {
      alignSelf: 'stretch',
  },
});

export default function Example() {
  const ref = useRef(null);

  const navigate = (route: string) => ref.current?.navigate(route);
  const goBack = () => ref.current?.goBack();

  return (
      <NavigationStack ref={ref} initialRouteName="home">
          <NavigationStack.Item name="home">
              <View style={styles.container}>
                  <Text style={styles.text}>Home</Text>
                  <Button variant="outlined" style={styles.button} onPress={() => navigate('profile')}>
                      Go To Profile
                  </Button>
              </View>
          </NavigationStack.Item>
          <NavigationStack.Item name="profile">
              <View style={styles.container}>
                  <Text style={styles.text}>Profile</Text>
                  <Button variant="outlined" style={styles.button} onPress={() => navigate('settings')}>
                      Go To Settings
                  </Button>
                  <Button variant="outlined" style={styles.button} onPress={goBack}>
                      Go Back
                  </Button>
              </View>
          </NavigationStack.Item>
          <NavigationStack.Item name="settings">
              <View style={styles.container}>
                  <Text style={styles.text}>Settings</Text>
                  <Button variant="outlined" style={styles.button} onPress={goBack}>
                      Go Back
                  </Button>
              </View>
          </NavigationStack.Item>
      </NavigationStack>
  );
}

Prop	Type	Default	Description
initialRouteName	string | undefined	—	—
childrenRequired	ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[]	—	—

Defined in react-native-molecules/components/NavigationStack