How to Set Opacity of Background Image in React Native?

Aug 31, 2022 . Admin

This article will provide some of the most important example how to set background image opacity. This article goes in detailed on how to change the opacity of background image. I would like to share with you image opacity react native. In this article, we will implement a background image opacity react native.

In this example,We will set background image opacity in react native.you can easy and simply set to opacity of background image in react native.you can set to opacity set to background image.The complete example below shows you how to do that.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, Image} from 'react-native';

export default function App() {
    return (
      <View style={styles.container}>
        <Image
        style={styles.container}
        source={require('./assets/tree.jpg')}
        />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null,
    opacity: 0.6
  },
});

Step 3: Run Project

In the last step run your project using the below command.