How set function on react-navigation navigationOptions?

Question

after setup a simple textInput on navigationOptions, i'd like to render a clear button conditionally.

static navigationOptions = ({ navigation }) => {
    const q = navigation.getParam("q", "");
    const onSearch = navigation.getParam("onSearch");
    const onFocus = navigation.getParam("onFocus");

    return {
      headerStyle: {
        backgroundColor: "#fff"
      },
      header: (
        <View style={styles.searchContainer}>
          <HeaderBackButton
            tintColor="black"
            onPress={() => navigation.navigate("Home")}
          />
          <TextInput
            underlineColorAndroid="transparent"
            style={styles.inputContainer}
            placeholder="Search"
            value={q}
            onChangeText={text => onSearch(text)}
            onFocus={onFocus}
            //clearButtonMode="always"
          />
          {this.renderClearButton()}
        </View>
      )
    };
  };

So here is the function

 renderClearButton() {
    if (this.state.onSearchStatus == "touched") {
      return (
        <TouchableOpacity onPress={navigation.getParam("clearText")}>
          <Image
            style={styles.button}
            source={require("../assets/icons/clear.png")}
          />
        </TouchableOpacity>
      );
    } else {
      return "";
    }
  }

But this happen

TypeError: undefined is not a function (evaluating '_this2.renderClearButton()')

i've tried to:

const renderClearButton = navigation.getParam("renderClearButton");
and {renderClearButton}

but

the error now is Functions are not valid as a react child. this may happen if you return a component instead

So is possible to add a function to navigationOptions?

Jaydeep Galani Jaydeep Galani · Accepted Answer · 2019-03-22T03:37:54

In navigationOption you do not have access to this context, you can not call your method in navigationOption.

So now, to dynamically change the header contents,

You can pass one navigation param to your current screen from previous screen like onSearchStatus.

use a ternary operator to show your content dynamically like this in navigationOption itself,

{navigation.state.params.onSearchStatus == "touched" && navigation.state.params.onSearchStatus != undefined  ?
    ....//your touchableopacity code
: null}

now to change the content dynamically set params from navigation using setParams(),

for more detail,

How set function on react-navigation navigationOptions?

1 Answers