Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

Deep link with react-navigation v5

$
0
0

I'm trying to use deep links in react native project with react navigation but I got some weirds scenarios in both platforms(ios & android).

My codeNavigationContainer

const linking = {        prefixes: ['https://latineo.com', 'latineo://'],        config: {            Home: {                path: 'homestack',                initialRouteName: 'Explore',                screens: {                    Explore: 'explore',                    Posts: 'posts',                    Favorites: 'favorites',                    Settings: 'settings',                },            },            ExploreOptions: {                path: 'explorestack',                initialRouteName: 'Restaurants',                screens: {                    Restaurants: 'rts',                    ShowRestaurants: 'restaurants',                    ShowRestaurant: 'restaurant/:id',                },            }        },    };<NavigationContainer            theme={navigatorTheme}            ref={(nav: any) => {                navigator = nav;                NavigationService.setNavigator(navigator);            }}            linking={linking}            fallback={<LoadingIndicator                size='giant'></LoadingIndicator>}            onStateChange={(nav) => {                console.log("AppNavigator -> nav", nav)            }}>            {isAuth && <HomeNavigator />}            {!isAuth && didTryAutoLogin && didOnboard && didPermission && <AuthNavigator />}            {!isAuth && didTryAutoLogin && !didOnboard && <OnboardScreen />}            {!isAuth && didTryAutoLogin && didOnboard && !didPermission && <LocationPermissionScreen />}            {!isAuth && !didTryAutoLogin && <IsAuthScreen />}</NavigationContainer>

HomeNavigator

const Stack = createStackNavigator<HomeParamList>();export const HomeNavigator = (): React.ReactElement => {    return (<Stack.Navigator            initialRouteName={'Home'}            headerMode='none'><Stack.Screen name='Home' component={HomeTabsNavigator} /><Stack.Screen name='ExploreOptions' component={LayoutsNavigator} /><Stack.Screen name='CreateOptions' component={PostNavigator} /><Stack.Screen name='FavoritesOptions' component={FavoritesNavigator} /><Stack.Screen name='SettingsOptions' component={SettingsNavigator} /></Stack.Navigator>    );};export const HomeTabsNavigator = (): React.ReactElement => {    return (<BottomTab.Navigator            screenOptions={TabBarVisibleOnRootScreenOptions}            initialRouteName={'Explore'}            tabBar={props => <HomeBottom {...props} />}><BottomTab.Screen name='Explore' component={LayoutsScreen} /><BottomTab.Screen name='Post' component={PostsScreen} /><BottomTab.Screen name='Favorites' component={LayoutsScreen} /><BottomTab.Screen name='Settings' component={SettingsContainer} /></BottomTab.Navigator>    );};

Scenario 1

When I try (App in background) with xcrun simctl openurl booted latineo://homestack/explore or latineo://homestack/settings, explorestack/restaurant/:id, etc it works fine, but when the app is closed(killed) it always open homestack/explore.

Scenario 2When I try with explorestack/restaurant/:id it works but when I press a button that navigation.back() it back to a blank screen (If I use gestures from this white screen I can back to my home screen). explorestack/restaurant/:id

blank screen

Something similar happen when I try with explorestack/restaurants when I use back button it navigate to same screen but without header.

explorestack/restaurantswithout header


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>