React-Native : Adding alpha to background image

In React-native there is no straightforward way to add alpha to a full screen background image and have content render on it . To add alpha you can follow these steps.

Let’s take an example of a screen that has a image as full screen background and some text. Your code will look something like this :-

<Image style={{flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover'}}> 
    <Text>
    Hi.
    </Text>
</Image>

To add alpha we simply add a View tag with a background image that has alpha and wrap the content under the View like this

<Image style={{flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover'}}> 
     <View 
     style={{backgroundColor: 'rgba(0,0,0,0.4)', flex: 1}} >
<Text>
    Hi.
    </Text>
   </View>
</Image>

The 0.4 corresponds to the alpha you want.