title: Change header text dynamically in React Native
body: <p>My navigationOptions for StackNavigator is:--</p>
  
  <pre><code>static navigationOptions = ({navigation}) =&gt; {
      return ({
          headerRight: (
              (navigation.state.params.actionTitle)?
                  &lt;TouchableOpacity style={{padding: 10}} onPress={() =&gt; navigation.state.params.onPressDelete()}&gt;
                      &lt;Text style={{
                          fontSize: 16,
                          color: Colors.primaryText
                      }}&gt;{navigation.state.params.actionTitle}&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;:null
          )
      })
  };
  </code></pre>
  
  <p><strong>navigation.state.params.actionTitle</strong> is by default undefined. So on page lode it will not show the headerRight view. I want to display the headerRight view based on some network response from redux. I am handling the redux data in <strong>componentWillReceiveProps</strong> section.</p>
  
  <p>But from <strong>componentWillReceiveProps</strong> if I tried to change the actionTitle then a recursion is happening and whole UI is blocking. By recursion I mean componentWillReceiveProps is called repeatedly. I am setting the navigation state using:--</p>
  
  <pre><code>componentWillReceiveProps(props){
    this.props.navigation.setParams({
          actionTitle : "Delete"
    });
  }
  </code></pre>
  
  <p>What am I doing wrong here?</p>