To fix the parent opacity not affecting text issue with React Native, we should try changing the opacity using alpha-value of the background color instead of opacity props.
For example, we write
<View style={{ backgroundColor: "rgba(0,0,0,0.5)" }} />;
to set the backgroundColor
style to "rgba(0,0,0,0.5)"
.
The last number is the opacity.
Then it should be possible applying different opacities for the children components.