How to call a function in a React Native class from a different module

Question

In my app, I have defined a default class A in module xyz.js that renders a page on my navigation stack. Depending on one of class A's state variables, the views that are rendered differ. For example, if the app is placed in an "edit mode", then an editing view is rendered in addition to the other standard views rendered when the app is not in the "edit mode". I can't figure out how to change that state variable from a different module abc.js and cause the views associated with the instantiated class A to re-render. In my module abc.js, I create the navigation stack and I have an onPress handler for a touchableHighlight button to place the app in "edit mode". In that handler, I attempt to call a function "Edit()" in class A. But the function does not seem to get invoked. It may have something to do with binding, but that concept is not something I fully understand.

Here is what I have:

Module abc.js:

import XYZ from './xyz';
import {Edit} from './xyz';
import { pencilEditButton } from './Images';

const App = createStackNavigator(
{
    Home: {
        screen: My App,

        navigationOptions: ({ navigation }) => ({
            title: 'myApp',

            headerRight: (
            <View>
                <TouchableHighlight
                    onPress={() => Edit()}
                    underlayColor="gray">
                    <View>
                        <Image source={pencilEditButton} style={styles.navigationButtonImage} />
                    </View>
                </TouchableHighlight>
            </View>
            ),
        }),
    },
}
);

export default createAppContainer(App);

Module xyz.js:

export default class XYZ extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        editMode: false,    
    };
  };


  // Create a method to handle the press of the edit button on the navigation bar
  Edit() {
    console.log("editMode: ", editMode);
    this.setstate({ editMode: true });
    console.log("editMode: ", editMode);
    alert('User wants to edit a mix!');
  };

render() {
  return (
        <View style={styles.container}>
           { this.state.editMode === true ?
             <TouchableHighlight 
                    onPress={this._onXPressed} 
                    underlayColor="white">
                <View style={[styles.flowRight, styles.controlButton]}>
                    <Text style={styles.buttonText}>{'Edit Mode'}</Text>
                </View>
            </TouchableHighlight>
             :

             <TouchableHighlight 
                    onPress={this._onYPressed} 
                    underlayColor="white">
                <View style={[styles.flowRight, styles.controlButton]}>
                    <Text style={styles.buttonText}>{'Non Edit Mode'}</Text>
                </View>
            </TouchableHighlight>
           }
        </View>
     );
   }
 }

So as you can see, there is a function called "Edit()" after the constructor in class XYZ of module xyz.js. This function is called from module abc.js when the edit button is pressed. But when the edit button is pressed, the state is not updated, the alert view is not displayed, and the views are not re-rendered. How do I correctly call Edit() so that the state variable "editMode" is updated and the views are re-rendered?

Answer 1

If you want to follow the pattern you are using, it needs to be handles inside your 'My App' component which gets render in stack navigator. You have to use refs Go through the following code example to find out how to call Edit function.

import XYZ from './xyz';

export default class MyApp extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'myApp',
    headerRight: navigation.state.params && navigation.state.params.edit ? (
      <View>
        <TouchableHighlight
          onPress={() => navigation.state.params.edit()}
          underlayColor="gray"
        >
          <View>
            <Image source={pencilEditButton} style={styles.navigationButtonImage} />
          </View>
        </TouchableHighlight>
      </View>
    ) : null,
  })

  constructor(props) {
    super(props);
    this.onEdit = this.onEdit.bind(this);
  }

  componentDidMount() {
    this.props.navigation.setParams({ edit: this.onEdit });
  }

  onEdit() {
    if (this.xyz_Ref) {
      this.xyz_Ref.Edit();
    }
  }

  render() {
    return (
      <View>
        <XYZ ref={ref => this.xyz_Ref = ref} />
      </View>
    );
  }
}