How to call function in another component from Drawer in React Native

Question

We have the following code within I have the method createDrawerNavigator in my App.js file

const RootDrawer = createDrawerNavigator({
  Home: { screen: HomeScreen },
  Detail: { screen: DetailScreen },
  Result: { screen: ResultScreen },
  Section : { screen: SectionScreen }
},{
  contentComponent : ({ navigation }) => (<SideBar navigation={navigation} />),
  initialRouteName: 'Home',
  navigationOptions: {
    headerStyle: {
      backgroundColor: '#26272d',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  },
  transitionConfig: () => ({
    transitionSpec: {
      duration: 500,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const height = layout.initHeight;
      const translateY = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [height, 0, 0],
      });

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      });

      return { opacity, transform: [{ translateY }] };
    },
  }),
});

And I have the screen SideBar that acts as Drawer:

import React, { Component, PureComponent } from 'react';
import { connect } from 'react-redux';
import { Image, StyleSheet, View, TouchableOpacity, Text, Linking } from 'react-native';
import { Icon } from 'native-base';
import {StackActions, NavigationActions, DrawerActions} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

export default class SideBar extends React.Component {

  goTo = (section) => {

    const resetAction = StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Section' })
      ]
    })

    return () => this.props.navigation.dispatch(resetAction);

  }

  render() {
    return(
      <View style={styles.container}>
        <View>
          <View style={styles.logo}><Image source={require('./images/ln-header-bg.jpg')} style={styles.ln_logo} resizeMode="contain" /></View>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo('all'); }}><Text style={styles.link_menu_text}>Últimas noticias</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(68); }}><Text style={styles.link_menu_text}>La Nación</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(69); }}><Text style={styles.link_menu_text}>El Mundo</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(70); }}><Text style={styles.link_menu_text}>Gente</Text></TouchableOpacity>
          <TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(97); }}><Text style={styles.link_menu_text}>#YoParticipo</Text></TouchableOpacity>
        </View>
        <View>
          <Text style={styles.follow_social}>Síguenos en las redes</Text>
          <View style={styles.follow_social_links}>

          </View>
        </View>
      </View>
    )
  }
}

In the SideBar I want to call an function located in Home Component, I tried with react navigation dispacth method but doesn't working.

What I have to call the function or navigate to another screen? Can some help me please?

Thanks!

Answer 1

I never used drawers from react-navigation, but I would assume that the way they work is similar to stackNavigators. So, assuming that, what you could do was to set a navigation parameter in the Home screen, for example, inside the componentDidMount() method, like so:

this.props.navigation.setParams({ 'paramName': paramValue });

and then, in the drawer, in the componentWillMount() method, you could do something like:

const var_x = this.props.navigation.getParam('paramName', null);

This way, you can either send the function itself as a parameter, or send a reference to the Home screen, and then access its methods from the drawer.

ps: on both calls, paramName needs to be a string. ps2: in the getParam method call, the second argument, in the example, null, is the default value in case there is not a value for the requested parameter.

Again, I use this method for stackNavigators, so you might take a look at the react-navigation documentation to double check if there is any difference for drawer: https://reactnavigation.org/docs/en/drawer-navigator.html#docsNav