How to change Transparency of Image in React Native

In this blog post, I explain how to change transparency, that is, the opacity of an image in react native. In order to change the opacity, you should use the style property opacity of the Image component.

You can change the transparency from 0.0 to 1.0 whereas 1.0 is the maximum i.e. the image becomes opaque. For example, if you want to bring down the transparency to 50 percent you have to use the value 0.5 for opacity.

Now, I have an image from Pixabay. I want to reduce its opacity to 50 percent.

Have to say the image is really cute! The following react native example reduces the opacity of the image to 50 percent.

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

const Home = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{
          uri: 'https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
    opacity: 0.5,
  },
});

export default Home;

The output will be as given in the screenshot below.

That’s how you change the opacity of the image in react native.