I have a view that I would like to set the background opacity to 0.5 however I need the text component inside of the view to show completely (as if its opacity was 1)
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'white',
opacity: 0.5,
borderRadius: 5,
}}>
<Paragraph>folder</Paragraph>
</View>
If you want the text folder to be less opaque, then you will have to apply styling directly to it, while keeping its parent's opacity as desired -
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'white',
opacity: 0.5,
borderRadius: 5,
}}>
<Paragraph>
<span style={{ opacity: 1 }}>
folder
</span>
</Paragraph>
</View>
You can also try setting the backgroundColor with an opacity attached directly to it -
backgroundColor: rgb(0, 0, 0, 0.5)
I've found that the most straighforward way of reaching this desired outcome is to specify that you want the backgroundColor to have this specific opacity, and not the entire View element. Check the 'Opacity' section of this page for more info: https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA%20color%20values%20are%20an,and%201.0%20(fully%20opaque)
For example, if you want to have a green background, with an opacity of 0.5, you would want to set
backgroundColor: rgba(0, 255, 0, 0.5)