React Native Set Alpha Opacity of View Image Background Android iOS

Style’s property opacity is used to set Alpha of a view or image component in react native. Setting alpha makes the view transparent in a fixed percentage way, developers can make Image background transparent according to his requirement with a fix manner. Opacity supports value between 0 to 1 like .1, .2, .3 etc. So in this tutorial we would going to Set Alpha Opacity of View Image Background in Android iOS react native app example tutorial.

Contents in this project Set Alpha Opacity of View Image Background Android iOS React Native app:

1. Import Platform, StyleSheet, View and Image component in your project.

2. Create a Parent View component in render’s return block.

3. Create a Child View component in Root view and using the Style we would set opacity property on View.

opacity : Supports value between 0 to 1.

4. Creating a Image component after Child view and again set Opacity of Image component using Style.

5. Creating Style.

6. Complete source code for App.js File :

Screenshot in Android device:

Set Alpha Opacity of View Image Background

Screenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *