Programming Tutorials

StackNavigator example in React Native

By: Manoj in React-Native Tutorials on 2023-04-09  

Here's an example of an Expo app with StackNavigator:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
   <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <view>
      <text>Details Screen</text>
      <button title="Go to Details again" onpress="{()"> navigation.push('Details')}
      /&gt;
      </button><button title="Go back" onpress="{()"> navigation.goBack()} /&gt;
    </button></view>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <navigationcontainer>
      <stack.navigator>
        <stack.screen name="Home" component="{HomeScreen}"></stack.screen>
        <stack.screen name="Details" component="{DetailsScreen}"></stack.screen>
      </stack.navigator>
    </navigationcontainer>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In this example, we import createStackNavigator and NavigationContainer from @react-navigation/native. We then define two screens, HomeScreen and DetailsScreen, which are rendered using Stack.Screen components inside a Stack.Navigator component. We also define a Stack constant to hold our StackNavigator.

HomeScreen and DetailsScreen are functional components that accept navigation as a prop, which is used to navigate between the screens. The Button components use navigation.navigate() and navigation.push() to move between the screens. The DetailsScreen component also includes a Button component that uses navigation.goBack() to go back to the previous screen.

Finally, we export our App component and include it in the index.js file. We also define a styles constant to hold our styles.