'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