title: How to access component state inside navigation options in react native?
body: <p>I want to access my component state inside navigationOptions. I tried to assign it to params inside componentDidMount. Still it didn't work. How can I set, this.state.SearchText as the value of the input which is inside navigationOptions?</p>
  
  <pre><code>export default class WorkoutScreen extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        searchText: "Test Text"
      };
    }
  
    componentDidMount() {
      this.props.navigation.setParams({
        searchWorkouts: this.searchWorkoutHandler
      });
    }
  
    onChangeSearch = value =&gt; {
      this.setState({
        searchText: value
      });
    };
  
    searchWorkoutHandler = () =&gt; {
      alert("Searching Workouts");
    };
  
    render() {
      return (
        &lt;View&gt;
          &lt;Text style={styles.searchInput}&gt;{this.state.searchText}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  
    static navigationOptions = ({ navigation }) =&gt; {
      const { params = {} } = navigation.state;
      alert(params.searchText);
  
      return {
        headerTitle: (
          &lt;SearchInput
            style={styles.searchInput}
            value={params.searchText}
            source={Search}
            borderRadius={50}
            placeholder="Search / Filter"
            onChangeText={value =&gt; this.onChangeSearch(value)}
            onPress={() =&gt; params.searchWorkouts()}
          /&gt;
        ),
        headerTitleStyle: { width: "100%", alignItems: "center" },
        headerStyle: {
          paddingRight: 10,
          paddingLeft: 10
        },
        headerLeft: (
          &lt;ClickableIcon
            source={Bookmark}
            onIconPressed={() =&gt; alert("Notifications Clicked Workout")}
          /&gt;
        ),
        headerRight: (
          &lt;ClickableIcon
            source={Movements}
            onIconPressed={() =&gt; alert("Add New Clicked")}
          /&gt;
        )
      };
    };
  }
  </code></pre>
  
  <p>Is there any standard way that I can use to achieve this?</p>