Implement Searchbar on top of Screen

Question

I am trying to find some examples how to implement hidden search bar on top of Screen (react-native) like in Telegram:

And can't find any useful examles. I am using @react-navigation/bottom-tabs. This is one tab of my applicacion:

This is my part of screen that renders bottom tab an search button:

            <BottomTab.Screen
            name='Products'
            component={ProductsScreen}
            options={({navigation}: RootTabScreenProps<'Products'>) => ({
                title: __('Products'),
                tabBarIcon: ({ color }) => <TabBarIcon icon={faShop} color={color} />,
                headerRight: () => (
                    <View style={styles.headerButtons}>
                        <Pressable
                            onPress={() => navigation.navigate('Modal')}
                            style={({ pressed }) => ({
                                opacity: pressed ? 0.5 : 1,
                            })}>
                            <FontAwesomeIcon
                                icon={faSearch}
                                size={25}
                                /*color={Colors[colorScheme].text}*/
                                style={{ marginRight: 15 }}
                            />
                        </Pressable>
                    </View>
                ),
            })}
        />

and with all examples that I found - I can't figure out how to do it. Obviously I want that searchbar like this works both on Android and iOs. Please any help. Thanks