Simple Example Expo / React Navigation 5

Question

I'm trying to figure out a simple example using Deep Linking with Expo and React Navigation 5. The doc does not really help me with that.

(1) When I go exp://192.168.2.130:19000 -> This already opens my app. Good

(2) Now I want to add a /News-route so that when I open exp://192.168.2.130:19000/News I render the News-Screen (see code below).

How can I do that based on the example below?

import { Linking } from 'expo';

const prefix = Linking.makeUrl('/');

export default function App() {

  const linking = {
    prefixes: [prefix]
  }

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Tab.Navigator>
        <Tab.Screen name="EventExplore" component={EventExploreStack} />
        <Tab.Screen name="MyTasks" component={MyTasksScreen} />
        <Tab.Screen name="News" component={NewsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

You can map your screens names with the path you want. For example, re-using the piece of code.

    import { Linking } from 'expo';

    const prefix = Linking.makeUrl('/');

    export default function App() {

      const linking = {
        prefixes: [prefix],
        config: {
          News: "/News"
        }
      }

      return (
        <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
          <Tab.Navigator>
            <Tab.Screen name="EventExplore" component={EventExploreStack} />
            <Tab.Screen name="MyTasks" component={MyTasksScreen} />
            <Tab.Screen name="News" component={NewsScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }

There are more details in the react-navigation documentation here: https://reactnavigation.org/docs/configuring-links