When I click on the button "Back" in the header or on the button "go home" in the details page my app close. So Why? But with the help of swipe I can return back.
app.jsx file - only navigation
// Screensimport MainNavigation from "./src/routes/MainNavigation";export default function App() { return (<MainNavigation /> );}
Navigation is like in documentationMainNavigation.tsx
// Navigationimport { NavigationContainer } from "@react-navigation/native";import { createNativeStackNavigator } from "@react-navigation/native-stack";// Screensimport HomeScreen from "../screens/HomeScreen/HomeScreen";import TodoDetailsScreen from "../screens/TodoDetailsScreen/TodoDetailsScreen";import { Button } from "react-native";// Keep the splash screen visible while we fetch resourcesconst Stack = createNativeStackNavigator();const MainNavigation = () => { return (<NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={TodoDetailsScreen} options={ { // headerBackVisible: false, } } /></Stack.Navigator></NavigationContainer> );};export default MainNavigation;
HomeScreen.tsx - just simple scrin with one redirection
import { Button, SafeAreaView, Text, View } from "react-native";import { NavigationProp, RouteProp } from "@react-navigation/native";const HomeScreen = ({ navigation,}: { navigation: NavigationProp<any, any>;}) => { return (<SafeAreaView><Text>Home screen</Text><Button onPress={() => { navigation.navigate("Details", { _id: "123" }); }} title="go to details TODO" /></SafeAreaView> );};export default HomeScreen;
TodoDetailsScreen.tsx - simple screen
import { NavigationProp, RouteProp } from "@react-navigation/native";import { Button, Text, View } from "react-native";const TodoDetailsScreen = ({ navigation, route,}: { route: RouteProp<any, any>; navigation: NavigationProp<any, any>;}) => { const { _id } = route.params; console.log("_id", _id); return (<View><Text>TodoDetailsScreen</Text><Button onPress={() => { navigation.navigate("Home"); }} title="go home" /></View> );};
package.json
{"name": "reactnative-ts","version": "1.0.0","main": "expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web" },"dependencies": {"@react-navigation/native": "^6.1.17","@react-navigation/native-stack": "^6.9.26","expo": "~51.0.2","expo-font": "^12.0.4","expo-splash-screen": "^0.27.4","expo-status-bar": "~1.12.1","react": "18.2.0","react-native": "0.74.1","react-native-safe-area-context": "^4.10.1","react-native-screens": "^3.31.1" },"devDependencies": {"@babel/core": "^7.20.0","@types/react": "~18.2.45","typescript": "^5.1.3" },"private": true}