I'm building a social media application with React Native, and I have a search page containing a search box and some other content on the page. When a user clicks or focuses in the search box, I want to cover the rest of the content excluding the search bar/box so that I can show suggestions and results as the user types.

How can I make something like this happen in React native. I've tried using a modal but it covers the whole page including the searchbox.

Before search input click https://i.stack.imgur.com/Aawpo.jpg

After search input click https://i.stack.imgur.com/pUt0S.jpg