How to get reference of TextInput which define in static Navigation Options? - react-native

Question

I am facing problem getting reference of TextInput which is defined in static navigationOptions, it's that any way to do it in React Native? i am sharing some code here so you better know about my questions.
export default class SearchClass extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
let headerTitle = (
<View style={{flex: 1}}>
<TextInput
style={{ flex: 1, height: 30 }}
placeholder='Search'
keyboardType='default'
returnKeyType='search'
underlineColorAndroid='transparent'
onChangeText={text => params.onChangeText(text)}
onSubmitEditing={(event) => { params.onSearchButton()
}}
/>
</View>
);
return { headerTitle };
};
componentDidMount() {
this.props.navigation.setParams({
onChangeText: this.__onChangeSearchText,
onSearchButton: this.__onSearchButtonPress
});
}
__onSearchButtonPress = () => {
// clear the text of TextInput
// for that i need reference here of TextInput
this.mySearchBox.clear();
}
}
_onSearchButtonPress i need to clear the text of TextInput, for that i need reference of that TextInput which is define in navigationOptions ?
does anyone know how to do it?

Answer 1

I've added a static variable inside class
static textField = null;
and then assign it inside navigationOptions
<TextInput
ref={(ref) => YourClass.textField = ref}
...
then when I need to pass events (not sure if that's the best way) I either do a pubsub-js listener and publish event or I forward events - both ways explained with code bellow.
<TextInput
ref={(ref) => YourClass.textField = ref}
onChangeText={(text) => {
YourClass.textField.onChangeText(text);
// PubSub.publish(Constants.FIELD_DID_CHANGE, [text,]);
}}
then when didFocus -- viewDidAppear equivalent
let textField = YourClass.textField;
textField.onChangeText = (text) => this._textFieldDidChange(text);
or register PubSub object in componentDidMount
// this.textFieldDidChangeListener = PubSub.subscribe(Constants.FIELD_DID_CHANGE, (msg, data) => this._textFieldDidChange(data));