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

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

• javascript
• react-native
• navigation
• navigation-drawer
• side-menu

Share Improve this question Follow edited Dec 27, 2018 at 11:58 Dave 51622 gold badges77 silver badges2424 bronze badges asked Nov 17, 2017 at 13:10 IdanIdan 4,07311 gold badge3131 silver badges3434 bronze badges 1

• 2 This issue has a discussion of current possibilities: github./react-munity/react-navigation/issues/73 – Scotty Waggoner Commented Dec 19, 2017 at 0:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I know this was asked a while ago, but I've recently e 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" ponent={Account} />
          <Drawer.Screen name="Availability" ponent={Availability} />
          <Drawer.Screen name="Favorites" ponent={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/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 ponents 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.')}
        />
      </DrawerContentScrollView>
    );
  }

If in case, anyone es 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"
        ponent={Favorites}
      />
    </Drawer.Navigator>
  )
}

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


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