Hide and show component on pulling down the screen

I am trying to show a search bar on pulling down the screen and hiding it on scroll the view up.

Below is my react-native code:

render() {
    return (
        <View style={styles.container}>
            <ScrollView
                style={styles.scrollView}
                onScroll={() => { console.log('onMomentumScrollBegin'); }}
                onScrollBeginDrag={() => { console.log('onScrollBeginDrag'); }}
                onScrollEndDrag={() => { console.log('onScrollEndDrag'); }}
            >
                <SearchBar
                    onChangeText={(obj) => {console.log(obj);}}
                    placeholder='Type Here...'
                    icon={{ type: 'font-awesome', name: 'search' }}
                />
                <View style={styles.innerContainer}>
                    <Text>Hello</Text>
                </View>
                <View style={styles.innerContainer}>
                    <Text>Hello</Text>
                </View>
            </ScrollView>
        </View>
    );
}

onScroll, onScrollBeginDrag, onScrollEndDrag is not calling if there are not enough elements for scroll.

Here is screenshot of my screen:

If anyone has any idea about how to achieve it, that will be very helpful.

Thanks in advance.