0

I have a drawer item "Share App" where I want to open an alert and display a message rather than opening an entire screen in react native. My code is as follows:

const Screen6_StackNavigator = createStackNavigator({
  //All the screen from the Screen6 will be indexed here
  Sixth: {
    screen: ShareApp, //don't want this screen
    title:'Share',
    navigationOptions: ({ navigation }) => ({
      headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#138808',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigatorExample = createDrawerNavigator({
  ShareApp: {
    //Title
    screen: Screen6_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Share App',
      drawerIcon: (<Entypo name="share" size={20} color='black'></Entypo>)

    },
  },
);

Where Do I add the onPress parameter in order to call the function? I dont want the screen parameter, want a function to be called only when I click on Share App.

How to do that in react native??

Do help as I am new in React native development....

Thanks.

Josss
  • 229
  • 1
  • 4
  • 19

1 Answers1

1

You can create a custom drawer content component and pass it to the contentComponent option in the DrawerNavigatorConfig.

Creating the custom drawer content:

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView
      style={{ flex: 1 }}
      forceInset={{ top: 'always', horizontal: 'never' }}>
      <TouchableOpacity
        onPress={() => {
          // Do something...
          Alert.alert('Heading', 'Body');
        }}
        style={{ left: 15, flexDirection: 'row', alignItems: 'center' }}>
        <Entypo name="share" size={20} color='black'></Entypo>
        <Text style={{ marginLeft: 30, fontWeight: 'bold' }}>Share App</Text>
      </TouchableOpacity>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

The DrawerItems component will render clickable drawer options based on the screens you create, but above the DrawerItems we can add your share button for example.

Passing the custom drawer content component to contentComponent

const DrawerNavigatorExample = createDrawerNavigator(
  {
    Screen1: {
      // Properties...
    },
    // Other screens...
  },
  {
    // Pass custom drawer content component...
    contentComponent: props => <CustomDrawerContentComponent {...props} />,
    // Other configurations...
  },
);

DrawerItems should be imported from react-navigation-drawer.

5eb
  • 14,798
  • 5
  • 21
  • 65
  • Thanks this worked.. but not able to call a function on onPress of TouchableOpacity. How to do that? – Josss Sep 03 '20 at 14:01
  • Can you test by replacing the Alert line in my example by a normal `alert(1)` to check if it actually gets called? Because Alert doesn't work on `web`. So test on an actual device if you aren't already. – 5eb Sep 03 '20 at 14:19
  • Yes..alert is coming proper but not able to call a function onPress={() => this.testFunction()} , error shown is: _this2.testFunction is not a function. (In '_this2.testFunction()', '_this2.testFunction' is undefined) – Josss Sep 03 '20 at 14:26
  • Oh I see. Yeah that's because `CustomDrawerContentComponent` is a functional component so you don't use `this`. – 5eb Sep 03 '20 at 14:28