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') },   }

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>
    );
  }