React-native/react-navigation: how do I access a component's state from `static navigationOptions`?

Question

How do you handle cases when you have, say, a form component, and you need to submit a part of the component\'s state using button in navigation bar?

Answer 1

Simple Design Pattern

Just as a follow-up to @val's excellent answer, here's how I structured my Component so that all the params are set in the componentWillMount. I find this keeps it simpler and is an easy pattern to follow for all other screens.

static navigationOptions = ({navigation, screenProps}) => {
  const params = navigation.state.params || {};

  return {
    title:       params.title,
    headerLeft:  params.headerLeft,
    headerRight: params.headerRight,
  }
}

_setNavigationParams() {
  let title       = 'Form';
  let headerLeft  = ;
  let headerRight = ;

  this.props.navigation.setParams({ 
    title,
    headerLeft,
    headerRight, 
  });
}

componentWillMount() {
  this._setNavigationParams();
}

_clearForm() {
  // Clear form code...
}

_submitForm() {
  // Submit form code...
}