React Native Overlay on a ScrollView

Here's my code atm.:

'''

return(< SafeAreaView style = {style.main}><ScrollView style= {{backgroundColor: ""}}><View style = {style.container}><Food style = {style.food} image = {require("../../assets/icon.png")} /><Food style = {style.food} image = {require("../../assets/icon.png")} /><Food style = {style.food} image = {require("../../assets/icon.png")} name = "Sajtos  Csiga" price = "5000 Ft"/><Food style = {style.food} image = {require("../../assets/icon.png")} /><Food style = {style.food} image = {require("../../assets/icon.png")} /><Food style = {style.food} image = {require("../../assets/icon.png")} /><Food style = {style.food} image = {require("../../assets/icon.png")} /><Food style = {style.food} image = {require("../../assets/icon.png")} /></View></ScrollView><Overlay style = {style.overlay}/></SafeAreaView >)'''

And the the thing what I'd like to achieve would look like this:

Where the Overlay would be the "BUFEE".

Can you help me with the CSS (or more like the StyleSheet), please?