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>
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')}
</button><button title="Go back" onpress="{()"> navigation.goBack()} /&gt;
</button></view> ); } const Stack = createStackNavigator(); function App() { return ( <navigationcontainer>
<stack.screen name="Home" component="{HomeScreen}"></stack.screen>
<stack.screen name="Details" component="{DetailsScreen}"></stack.screen>
</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.

Add Comment

* Required information


No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native