The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Stack Navigator

Next ►
►

In this section, we will explore the Stack Navigator, a fundamental component of React Navigation that allows you to navigate between different screens in a stack-like manner. This is similar to how web pages work, where you can navigate back and forth between pages.

Key Concepts

  1. Stack Navigator: A navigator that allows you to transition between screens and manage navigation history.
  2. Screen: A component that represents a single view in your app.
  3. Navigation Prop: A prop automatically passed to each screen component, containing methods and properties to navigate between screens.

Setting Up Stack Navigator

Step 1: Install React Navigation

First, you need to install the necessary packages for React Navigation.

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

You also need to install the required dependencies:

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

Step 2: Set Up Navigation Container

Wrap your app in a NavigationContainer. This component manages the navigation tree and contains the navigation state.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
}

Step 3: Create a Stack Navigator

Create a stack navigator using createStackNavigator and define your screens.

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

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Explanation

  • NavigationContainer: This component is necessary to manage the navigation state.
  • createStackNavigator: This function creates a stack navigator.
  • Stack.Navigator: This component is used to configure the navigator.
  • Stack.Screen: This component defines each screen in the stack.

Step 4: Navigating Between Screens

Use the navigation prop to navigate between screens. The navigate method allows you to move to a different screen.

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details')}
/>

Practical Example

Let's create a simple app with two screens: Home and Details.

HomeScreen Component

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;

DetailsScreen Component

import React from 'react';
import { View, Text } from 'react-native';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default DetailsScreen;

App Component

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Exercises

Exercise 1: Add a New Screen

  1. Create a new screen component called ProfileScreen.
  2. Add ProfileScreen to the stack navigator.
  3. Add a button in HomeScreen to navigate to ProfileScreen.

Solution

ProfileScreen Component

import React from 'react';
import { View, Text } from 'react-native';

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

export default ProfileScreen;

Update App Component

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
import ProfileScreen from './ProfileScreen';

const Stack = createStackNavigator();

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} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Update HomeScreen Component

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

export default HomeScreen;

Conclusion

In this section, you learned how to set up and use the Stack Navigator in React Native. You now know how to navigate between different screens and manage navigation history. This is a fundamental skill for building multi-screen applications in React Native. In the next section, we will explore the Tab Navigator, which allows you to create a tab-based navigation system.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved