React Native - Header Right Button

React Native comes with a default header, which has a back button which allows you to go back to the previous page. You can also add a button to the right side of the header by using headerRight property like below;

static navigationOptions = ({ navigation }) => ({
    headerTitleStyle: {
    ...
    headerRight: (
      <TouchableOpacity
        onPress={navigation.getParam('handleClick')}
        style={{ marginRight: 17 }}
      >
        <Text
          style={[
            styles.headerRightBtn,
            navigation.getParam('checkInput')
              ? styles.applyGreen
              : styles.applyGray
          ]}
        >
          완료
        </Text>
      </TouchableOpacity>
    )
  });

As you can see, a method that gets called onPress is not a typical this.whateverYouWouldLikeToCall. Instead, I used navigation property and used getParam. This is because navigationOptions is static, which I will talk about in a later post.

####TL;DR I used navigation in order to call a method when the header right button is pressed. In order for the button to getParam, you have to setParam in componentDidUpdate() like below

componentDidMount() {
    this.props.navigation.setParams({
      handleClick: this._makePost
    });
  }

So when the header right button fires handleClick via getParam, a method called _makePost is executed.