How to access a function or method of js file from navigationBar in React Native?

Question

I want to call a function called 'test()' that is stated inside Main.js. Especially test() function will update the state of somestate inside Main.js and I put console log to see what's going on.

When the index of route is 1, as stated the below, the leftButton configuration(that is done in index.ios.js) is applied ( so it becomes 'click!' ). When I click this, then an error message is displayed, saying, Main.test is not a function.

Is there way that I can access test() function inside Main.js when clicking 'leftButton' in the navigator while staying in Main.js?

Do I have to do something inside index.ios.js or inside Main.js? Please share any idea with me!! (:

The below is snippet of my code ( both index.ios.js and Main.js )

////////////////////////////////////////////////////////////////

...
var Main = require('./Main');
...
render() {

    return (
        <Navigator
        initialRoute={{ title: 'Log In Page', index: 0, component: FirstPage }}
        configureScene={() => {
          return Navigator.SceneConfigs.FloatFromRight;
        }}

        navigationBar={
          <Navigator.NavigationBar
            routeMapper={{
              LeftButton: (route, navigator, index, navState) =>
              {
                if (route.index === 0) {
                  return null;
                } else if(route.index ===1) {
                  return (
                    <TouchableHighlight onPress={() =>  {  Main.test()  } } >
                        <View style={styles.back}>
                          <Text>click!</Text>
                        </View>
                    </TouchableHighlight>
                  );  
                } else{
                  return (
                    <TouchableHighlight onPress={() => {navigator.pop();     console.log('ended..'); }}>
                      <View style={styles.back}>
                        <Text>Click</Text>
                      </View>
                    </TouchableHighlight>
                  );
                }
              },

              Title: (route, navigator, index, navState) =>
                { return (<Text style={styles.route_title}> {route.title} {route.index} </Text>); },
            }}
          style={{backgroundColor: '#28b496'}} />
        }

        renderScene={(route, navigator) => React.createElement(route.component, { ...route.passProps, navigator })}
        style={{padding: 0}}  />

      );

  }

////////////////////////////////////////////////////////////////

..

class Main extends Component {

  constructor(props) {
    super(props);
    ..
  }

  test(){
   console.log('I wish this will be triggered!');
   console.log('This is the function that I want to call');
   this.setState({
     somestate: 'change to this man'
   });
  }

  render(){
     return(
     <Text>HI</Text>
     );
  }

...
module.exports = Main;

////////////////////////////////////////////////////////////////

Answer 1

Looks like Main is a React component - in that case you cannot call test method directly unless you instantiate that component and access a reference to it (eg this.refs.main.test() ).

I'd strongly suggest extracting test method out so that it's not component specific or making it static.

In case none of the above are possible, you could try rendering Main in below the <Navigator /> and using refs:

render() {
  return (
    <View>
       <Navigator />
       <Main ref="main" />
    </View>
  );
}

and accessing the method using refs as proposed at the beginning of the answer.

However, if your Main component is already in the tree (eg it's your parent component), you could use context and pass the method as a part of it.