'React Native deep linking not working on React Navigation V6
When I configure my links and url-scheme with react navigation it falls into the fallback error. Don't know why. Sometimes when making changes it worked but then it didn't. I have followed some tutorials that worked perfectly but when configuring it in my app It doesn't work. Please help. this is the code:
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
// NAVIGATION
import { LinkingOptions, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Ionic from 'react-native-vector-icons/Ionicons';
//APP SCREENS
import AppScreens from '../../Screens/App';
// CHECK OUT NAVIGATOR GROUPS
// AUTH SCREENS
import AuthScreens from '../../Screens/Auth';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useSelector } from 'react-redux';
import store from '../../Store';
type RootState = ReturnType<typeof store.getState>;
export type RootStackParamList = {
Login: undefined;
SignUp: undefined;
Wizard: undefined;
};
const WizardStack = createNativeStackNavigator<RootStackParamList>();
const WizardStackScreen = () => {
return (
<WizardStack.Navigator>
<WizardStack.Screen
options={() => ({
headerShown: false,
})}
name="Wizard"
component={AuthScreens.Wizard}
/>
<WizardStack.Screen
options={() => ({
headerShown: true,
})}
name="Login"
component={AuthScreens.Login}
/>
<WizardStack.Screen
options={() => ({
headerShown: true,
})}
name="SignUp"
component={AuthScreens.SignUp}
/>
</WizardStack.Navigator>
);
};
const AppStack = createNativeStackNavigator();
const AppStackScreen = () => {
return (
<AppStack.Navigator>
<AppStack.Screen
options={() => ({
headerShown: false,
})}
name="App"
component={TabScreens}
/>
</AppStack.Navigator>
);
};
const App = () => {
const [isLoading, setIsLoading] = useState(false);
const [userLoaded, setUserLoaded] = useState(false);
const userLogged = useSelector((state: RootState) => state.auth.logged);
useEffect(() => {
if (userLogged) {
setUserLoaded(true);
}
}, [userLogged]);
const config = {
screens: {
Wizard: 'wizard',
Login: 'login',
SignUp: 'signup',
},
};
const linking: LinkingOptions<RootStackParamList> = {
prefixes: ['clientsapp://app'],
config,
};
return (
<SafeAreaProvider>
{isLoading ? (
<AuthScreens.Splash />
) : (
<NavigationContainer
// linking={linking}
fallback={
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Loading... error</Text>
</View>
}>
<WizardStackScreen />
</NavigationContainer>
)}
</SafeAreaProvider>
);
};
export default App;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
