feat: manage unhandled deep link on authentication

[kacperkapusciak]

Motivation

This PR implements API for handling deep links with conditional rendering described in detail by @satya164 in Handle deep link + auth in React Navigation.

Demo

Before

Default behavior

Screen.Recording.2022-10-20.at.16.42.05.mov

After

With the use of useLinkingOnConditionalRender hook

with.useLinkingOnConditionalRender.mov

Test plan

Invoke deep link in Expo Go on iOS:
xcrun simctl openurl booted exp://127.0.0.1:19000/--/profile

Invoke deep link in Expo Go on Android

adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/profile" host.exp.exponent

Code example

import {
  NavigationContainer,
  useLinkingOnConditionalRender,
} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createURL } from 'expo-linking';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

const HomeScreen = ({ navigation }: any) => (
  <View style={styles.container}>
    <Text style={{ ...styles.text, ...{ color: 'teal' } }}>Home Screen</Text>
    <Button
      onPress={() => navigation.navigate('Profile')}
      title="Go to profile"
    />
  </View>
);

const DetailsScreen = ({ route }: any) => {
  const {
    params: { message },
  } = route;

  return (
    <View style={styles.container}>
      {message && <Text style={styles.text}>Message: {message}</Text>}
    </View>
  );
};

const ProfileScreen = ({ navigation }: any) => (
  <View style={styles.container}>
    <Text style={{ ...styles.text, ...{ color: 'indianred' } }}>
      Profile Screen
    </Text>
    <Button onPress={() => navigation.popTo('Home')} title="Go back to home" />
  </View>
);

const SignInScreen = ({ signIn }: any) => {
  const scheduleNext = useLinkingOnConditionalRender();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>SignIn Screen</Text>
      <Button
        onPress={() => {
          scheduleNext();
          signIn();
        }}
        title="Sign In"
      />
    </View>
  );
};

const Stack = createStackNavigator();

const config = {
  screens: {
    Home: 'home',
    Details: {
      path: 'details/:message',
      parse: {
        message: (message: string) => `${message}`,
      },
    },
    Profile: 'profile',
  },
};

const linking = {
  prefixes: [createURL('/')],
  config,
  // async getInitialURL() {
  //   return `${createURL('/')}profile`;
  // },
};

export default function App() {
  const [isSignedIn, setSignedIn] = React.useState(false);
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        {isSignedIn ? (
          <Stack.Group
            screenOptions={{
              headerRight: () => (
                <Button onPress={() => setSignedIn(false)} title="Sign Out" />
              ),
            }}
          >
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
          </Stack.Group>
        ) : (
          <Stack.Screen
            name="SignIn"
            options={{
              animationTypeForReplace: !isSignedIn ? 'pop' : 'push',
            }}
          >
            {() => <SignInScreen signIn={() => setSignedIn(true)} />}
          </Stack.Screen>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

[github-actions]

The Expo app for the example from this branch is ready!

expo.dev/@react-navigation/react-navigation-example?release-channel=pr-10939

[codecov-commenter]

Codecov Report

❗ No coverage uploaded for pull request base (7.x@9ee1317). Click here to learn what that means.
Patch has no changes to coverable lines.

Additional details and impacted files

@@          Coverage Diff           @@
##             7.x   #10939   +/-   ##
======================================
  Coverage       ?   76.07%           
======================================
  Files          ?      172           
  Lines          ?     5175           
  Branches       ?     1996           
======================================
  Hits           ?     3937           
  Misses         ?     1198           
  Partials       ?       40           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[satya164]

/rebase