CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-drawer
PolarisTLX
PolarisTLX

Reputation: 349

How to make an React DrawerNavigator item just be a clickable link

I want to make an item in my React-Native DrawerNavigation that is just a clickable link that opens the user's browser to a link.

Here is the main code:

File: /src/routes/AuthorizedNavigator.js

import { createDrawerNavigator } from "react-navigation";
import type { NavigationContainer, NavigationState } from "react-navigation";
import { Linking } from "react-native";

import CustomDrawerComponent from "../stories/commonComponents/CustomDrawerComponent";

import Settings from "./SettingsNavigator";
import constants from "shared/src/utils/constants";
const AuthorizedNavigator: NavigationContainer<
    NavigationState,
    {},
    {}
> = createDrawerNavigator(
    {
        [constants.settings]: Settings,
        [constants.help]: "Help",        <----HERE
    },
    {
        contentComponent: CustomDrawerComponent,

I've tried replacing [constants.patientAuthorizedRoutes.help]: "Help", with [constants.patientAuthorizedRoutes.help]: { screen: Linking.openURL('https://www.helplink.com') }

But this causes the app to start up with automatically opening the browser to that link first thing without the user doing anything.

I've also tried creating an whole separate component for "Help", which all it did was to trigger opening the browser to that link. This actually worked, BUT for some reason it can only be done once, if a user tried to click on "Help" a second time, they are just taken to a blank white screen. Here is that code:
Added to file /src/routes/AuthorizedNavigator.js:

import Help from "./HelpNavigator";
.
.
[constants.help]: Help,

File: patient-mobile/src/routes/HelpNavigator.js

import { createStackNavigator } from "react-navigation";
import type { NavigationContainer, NavigationState } from "react-navigation";

import navigationTabHelper from "../utils/navigationTabHelper";
import Help from "shared/src/screens/Help";

const HelpNavigator: NavigationContainer<
    NavigationState,
    {},
    {}
> = createStackNavigator(
    {
        Help: Help
    },
    {
        initialRouteName: "Help",
        headerMode: "none"
    }
);

HelpNavigator.navigationOptions = navigationTabHelper;

export default HelpNavigator;

File: shared/src/screens/Help/index.js

import * as React from "react";
import { View } from "native-base";
import { withNavigation } from "react-navigation";
import type { NavigationScreenProp, NavigationState } from "react-navigation";
import { Linking } from "react-native";

type Props = {
    navigation: NavigationScreenProp<NavigationState>
};
type State = {};

class Help extends React.Component<Props, State> {

    openHelpLink = () => {
        Linking.openURL("https://www.helplink.com");
        this.props.navigation.navigate("Settings");
    };


    // something else I tried:
    // componentDidMount() {
    //    Linking.openURL("https://www.helplink.com");
    //    this.props.navigation.navigate("PackageCatalogue");
    // }

    render() {
        return (
            <View>
                {this.openHelpLink()}
            </View>
        );
    }
}

export default withNavigation(Help);

Upvotes: 0

Views: 1949

Answers (2)

Simrn Gupta
Simrn Gupta

Reputation: 21

You can do the same by adding Drawer Item in CustomDrawerComponent.

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => Linking.openURL('https://mywebsite.com/help')}
      />
    </DrawerContentScrollView>
  );
}

'Help' will be listed below the other screens.

Worked perfectly for me, here is the link https://reactnavigation.org/docs/drawer-navigator/

Upvotes: 2

Auticcat
Auticcat

Reputation: 4489

The reason why your second solution does work only the first time is because once you open it up a first time, the component gets rendered. The moment you leave it, the component will stay mounted not triggering a second render on it.

A solution for this is to use the withNavigationFocus HOC provided by react navigation.

First of all you need to import it and put it around your screen component:

import { withNavigationFocus } from 'react-navigation';
...
...
...
...
export default withNavigationFocus(Help);

So your screen would become:

componentDidMount = () => {
   this.openHelpLink()   //triggers at first render
}

componentDidUpdate = (prevProps) => {
   if( this.props.isFocused===true && this.props.isFocused!==prevProps.isFocused) 
      this.openHelpLink()  //triggers on the other screen instances
}

Using componentDidMount makes the render useless to render something, so you can just render null

  render() {
    return null
  }

SOURCE: https://reactnavigation.org/docs/en/with-navigation-focus.html

Upvotes: 0

Related Questions