Transparency React Native With Expo

Question

I have problems with the transparency of a View in React Native Expo, within the View I have text but this is not seen on iphone devices and on androids the text is seen with transparency but it is not what I want.

Code:

<View style= {{paddingHorizontal:30, borderRadius:1, marginTop:5}}>
        <View style={{alpha = 1.0, alignItems:'center', borderRadius:10, backgroundColor: 'white', alignContent:'center', paddingVertical:10}}>
          <Text style={{fontSize:15, color:'white', fontWeight: 'bold'}}>Iniciar Sesión</Text>
        </View>
      </View>

What I want to do: enter image description here

What i get: enter image description here

Answer 1

The alpha on the style is applied to the entire view and as a result also causes the all child components to become transparent. You want to apply your alpha only to the background color of the parent view. In react-native you can achieve that by defining your backgroundcolor rgba format

Color documentation can be found https://reactnative.dev/docs/colors

And here is an expo snack to demonstrate the behavior. https://snack.expo.io/sl8VafHil