How to Change Transparency of Image in React Native

Last Updated on December 10, 2020.

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.

Class based component


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


class Home extends Component {

    constructor(props){
        super(props);
    }

        render() {
        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;

Function based component

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 increase or reduce transparency of image in react native.

Leave a Reply

%d bloggers like this: