I am trying deeplinking in React-Native. The code works properly when the app is in the background. But once I remove the app from background and try to launch it using the link in safari. The app is launched with details screen. But I could not find previous (Home) screens in the Navigation Stack. Please find the code below:
/* eslint-disable react-native/no-inline-styles */import 'react-native-gesture-handler';import React from 'react';import {TouchableOpacity, Text, View} from 'react-native';import {useLinking, NavigationContainer} from '@react-navigation/native';import {createStackNavigator} from '@react-navigation/stack';const HomeScreen = ({navigation}) => { return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}><Text>Home Screen</Text><TouchableOpacity onPress={() => { navigation.navigate('Details', {itemId: 40}); }}><Text>Go to Details</Text></TouchableOpacity></View> );};const DetailScreen = ({route, navigation}) => { return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}><Text>Details Screen</Text><Text>Item Id: {route.params.itemId}</Text><TouchableOpacity onPress={() => navigation.goBack()}><Text>Go Back</Text></TouchableOpacity></View> );};const Stack = createStackNavigator();const App = () => { const ref = React.useRef(); const {getInitialState} = useLinking(ref, { prefixes: ['deeplink://'], config: { initialRouteName: 'Home', Home: 'Home', Details: { path: 'Details/:itemId', parse: { itemId: null, }, }, }, getPathFromState(state, config) { console.log(state); }, }); const [isReady, setIsReady] = React.useState(false); const [initialState, setInitialState] = React.useState(); React.useEffect(() => { Promise.race([ getInitialState(), new Promise((resolve) => setTimeout(resolve, 150)), ]) .catch((e) => { console.error(e); }) .then((state) => { if (state !== undefined) { setInitialState(state); } setIsReady(true); }); }, [getInitialState]); if (!isReady) { return null; } return (<NavigationContainer fallback={<Text>Loading...</Text>} initialState={initialState} ref={ref}><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={DetailScreen} /></Stack.Navigator></NavigationContainer> );};export default App;
Launched the app using "deeplink://Details/86" in Safari.