Navigate to URL/Deep Link with DrawerNavigator [React native]

Question

How can we open a link from a navigator entry? For example, like:

 const Home = DrawerNavigator ({
     Account: { screen: Account },
     Availability: { screen: Availability },
     Favorites: { screen: Favorites },
     Website: { screen: Linking.openURL('http://www.example.com') },   }

Radii

This issue has a discussion of current possibilities: github.com/react-community/react-navigation/issues/73 – Troxell

Answer 1

I know this was asked a while ago, but I've recently come across this need and found a working solution.

You want to first establish the drawer with createDrawerNavigator:

import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import { Linking } from 'react-native';

const Drawer = createDrawerNavigator();

With the latest version of react-native navigation, we can't pass fields to DrawerNavigator like you're doing. One way to set up the drawer and its navigation contents is like so:

return (
        <Drawer.Navigator
          initialRouteName="Account"
          drawerPosition="right"
          drawerContentOptions={{
            activeTintColor: 'white',
            inactiveTintColor: 'blue',
            activeBackgroundColor: 'blue',
            labelStyle: {
              fontFamily: 'Arial',
              fontSize: 18,
              textTransform: 'uppercase',
              paddingTop: 5
            }
          }}
          drawerContent={props => <CustomDrawerContent {...props}/>}
        >
          <Drawer.Screen name="Account" component={Account} />
          <Drawer.Screen name="Availability" component={Availability} />
          <Drawer.Screen name="Favorites" component={Favorites} />
          {/* Custom Links (defined next) */}
        </Drawer.Navigator>
      );

I've included my return statement to show that this is what I'm rendering on the screen. drawerContentOptions shows one of the parameters you can pass to the drawer. All options are defined here: https://reactnavigation.org/docs/drawer-navigator/

Next, we want to create the custom drawer content that we referenced in one of the Drawer.Navigator props. You can also apply very similar props like we did earlier to the drawer navigation items. Keep in mind that all custom links are going to display below the Drawer.Screen components referenced/defined earlier. This is due to the line DrawerItemList {...props}> which takes in the defined list of navigation links and displays them before our custom links. You can reverse this so custom displays first, but I'm not sure if you can put custom links in the middle.

// set up custom links for main navigation drawer
  function CustomDrawerContent(props) {
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem
          label="Website"
          inactiveTintColor={'blue'}
          labelStyle= {{
            fontFamily: 'Arial',
            fontSize: 18,
            textTransform: 'uppercase',
            paddingTop: 5
          }}
          onPress={() => Linking.openURL('http://www.example.com')}
        />
      </DrawerContentScrollView>
    );
  }

Tjader

Just want to say say this answer is the way to go in 2021 with React Navigator 5 and probably 6. Thanks for taking the time to add an updated answer. – Housekeeper

Answer 2

If in case, anyone comes across this, this is how I resolved this in 2023.

Basically you have to nest your path in the linking object that you pass to navigation container.

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="favorites"
        component={Favorites}
      />
    </Drawer.Navigator>
  )
}

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Drawer"
        component={DrawerNavigator}
      />
    </Stack.Navigator>
  )
}


export default function App() {
  const linking = {
    prefixes: [<YOUR_PREFIX>],
    config: {
      screens: {
        Drawer: {
          screens: {
            favorites: "favorites",
          },
        },
      },
    },
  };
  return (
    <>
      <NavigationContainer linking={linking}>
        <StackNavigator />
      </NavigationContainer>
    </>
  );
}

Kowal