I have created a custom header and search bar in my react native project. And I called both the header and search bar in my main component. I want to make a hot search. Like when users start entering the first letter itself the filter wants to work. Already I have filtered the data using button like (ALL, Item1, Item2) if user clicks (All) and they searched anything in search bar the items should get filtered. Now my problem is, Since I am having the separate class function for search bar and I am calling that class into my main Component. Where I want to write onchange function. Please correct me if my coding structure was wrong and help me to achieve the output. Thanks in advance. Below is my code for header and main component.

```
class SearchBar extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#FFFFFF",
          borderRadius: 12,
          color: "#8E8E93",
          flexDirection: "row",
          fontSize: 18,
          height: 100,
          width: config.deviceWidth * 0.89,
          margin: 25,
          marginVertical: 10,
          paddingHorizontal: 20,
          marginTop: config.deviceWidth * 0.27,
          marginRight: 20,
          alignItems: "center",
        }}
      >
        <TextInput
          placeholder="Search Product/Stores"
          style={{ fontSize: 15, paddingLeft: 2, alignItems: "center" }}
        />
        <Icon
          name="ios-search"
          style={{ fontSize: 25, paddingLeft: config.deviceWidth * 0.28 }}
        />
      </View>
    );
  }
}

class MainComponent extends Component {
    static navigationOptions = {
      headerRight: <SearchBar />
    }

}

    constructor(props) {
    this.state = {
        isLoading: true
    }
    }

    render() {
    return(

     Here I am using FlatList to populate the data 
    )
    }

```