Updated April 6, 2023
Introduction to React Native Opacity
To set Alpha of an image or view component in React Native based application, style’s property opacity is used. Developers can make the shape or image background transparent according to his requirement in a fixed manner; in a fixed percentage, the view is made transparent by setting alpha. Values supported by opacity are in the range 0 to 1 example .2, .5, .8 etc. The transparency level is described by the opacity-level, where 0 defines complete transparency, 0.5 that’s 50% visibility, and 1 is purely opaque. In this article, we will go through different examples to define the opacity of different components in React Native.
Syntax:
- For defining opacity of components like text, image, shape, etc.
<View style={{width: 150
, height: 200
, backgroundColor:' #181e94'
, opacity: .5
, marginBottom: 12}} />- For controllable opacity of different components in React Native
state = { opacityValue: 2 };
handleOpacityDecrease = () => {
this.setState(({ opacityValue }) => ({
opacityValue: opacityValue - 0.1
}));Examples of React native opacity
Different examples are given below:
Example #1
The below example shows the basic opacity scenario where the opacity of the image and 2 circles are predefined in the code. Styling of the whole page is done using different React Native components like Background image, Image, colors, etc.
[i] App.js
import React
, { Component } from 'react';
import { Platform
, StyleSheet
, View
, Image
, ImageBackground } from 'react-native';
const styles = StyleSheet.create({
Docker :{
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
justifyContent: 'center',
flex:1,
alignItems: 'center',
}
});
export default class Application extends Component{
render() {
return (
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/230887/pexels-photo-230887.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<View style={styles.Docker}>
<View style={{width: 100
, height: 100
, backgroundColor:'#c2fa41'
, opacity: .2
, marginBottom: 12
, borderRadius: 100/2
, borderWidth: 10
, borderColor: '#bf0d19'}} />
<Image
source = {{ uri: 'https://images.pexels.com/photos/6167767/pexels-photo-6167767.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' }}
style = {{borderRightColor: '#6ed8f5'
, width: 200
, borderTopLeftRadius: 100/2
, borderRightWidth: 10
, height: 300
, borderLeftWidth: 10
, resizeMode: 'center'
, borderLeftColor: '#ed5fb7'
, opacity: .5
, borderBottomRightRadius: 100/2
}}
/>
<View style={{width: 100
, height: 100
, backgroundColor:'#fff12e'
, opacity: .2
, marginTop: 12
, borderRadius: 100/2
, borderWidth: 10
, borderColor: '#ad5fe8'}} />
</View>
</ImageBackground>
);
}
}Output:
Example #2
The below example shows the advance opacity scenario where the opacity of the green leaf shape can be changed by clicking on the “…..Click me to Vanish the Leaf…..” text; the more you click, the more the leave becomes transparent. Styling of the whole page is done using different React Native components like Background image, text, colors, etc.
[i] index.js
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
class Application extends React.Component {
state = { opacityValue: 2 };
handleOpacityDecrease = () => {
this.setState(({ opacityValue }) => ({
opacityValue: opacityValue - 0.1
}));
};
render() {
const { opacityValue } = this.state;
return (
<div style={{
backgroundImage: `url("https://images.pexels.com/photos/1157255/pexels-photo-1157255.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")`
, height:'480px'
, width: '500px'
}}>
<BigBox style={{
color: '#c90e17'
}}>
<OpacityBox
style={{
color: '#8290a1'
}}
onClick={this.handleOpacityDecrease}
className="box_to_hover">
.....Click me to Vanish the Leaf.....
<SmallBox style={{
color: '#910a39'
}}
opacityValue={opacityValue} />
</OpacityBox>
React Native Opcaity Example
</BigBox>
</div>
);
}
}
const SmallBox = styled.div`
border-bottom-right-radius: 50px;
width: 100px;
border-top-left-radius: 100px;
border: 10px;
height: 100px;
border-bottom-left-radius: 0px;
background: #0b966c;
opacity: ${({ opacityValue }) => opacityValue};
`;
const BigBox = styled.div`
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`;
const OpacityBox = styled.div`
background-color: #a10539;
border-top-left-radius: 100px;
cursor: pointer;
border-bottom-right-radius: 100px;
padding: 30px;
margin-top: 10px;
`;
ReactDOM.render(<Application />, document.getElementById("root"));Output:
- On code execution –
- On reducing opacity to some extent on clicking “…..Click me to Vanish the Leaf…..” line –
- Making the whole leaf fully transparent –
Example #3
The below example shows the opacity of one image that is already predefined in the code, and the actual image is also displayed in the code. Styling of the whole page is done using different React Native components like Background image, text, colors, etc.
The files used for the proper execution of the code are:
[i] App.js
import React from 'react';
import { SafeAreaView
, StyleSheet
, View
, Image
, Text
, ImageBackground } from 'react-native';
const styles = StyleSheet.create({
docker: {
alignItems: 'center',
flex: 1,
marginTop: 20,
margin: 15,
padding: 20,
},
});
const Application = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/1562058/pexels-photo-1562058.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<View style={styles.docker}>
<Image
style={{
width: 200,
height: 200,
resizeMode: 'center',
opacity: 0.4,
}}
source={{
uri:
'https://pngimg.com/uploads/arctic_fox/arctic_fox_PNG41386.png',
}}
/>
<Text style={{
width: 200,
height: 50,
backgroundColor: '#a8f571',
alignContent: 'center'
}}>With Opacity Introduced</Text>
<Image
source={{
uri:
'https://pngimg.com/uploads/arctic_fox/arctic_fox_PNG41386.png',
}}
style={{
width: 200,
height: 200,
resizeMode: 'center',
}}
/>
<Text style={{
width: 200,
height: 50,
backgroundColor: '#a8f571',
alignContent: 'center',
}}>Without Opacity</Text>
</View>
</ImageBackground>
</SafeAreaView>
);
};
export default Application;Output:
- On iOS platform –
- On Android platform –
Example #4
The below example shows the touchable opacity scenario where the opacity of the “Click Me” button changes, for instance, whenever it is clicked. The button includes a counter, which counts the number of clicks on the button. Styling of the whole page is done using different React Native components like Background image, text, colors, etc.
[i] App.js
import React
, { useState } from "react";
import { StyleSheet
, Text
, TouchableOpacity
, View
, Image
, ImageBackground } from "react-native";
const styles = StyleSheet.create({
docker: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
clickibutton: {
alignItems: "center",
backgroundColor: "#ba49f2",
padding: 10,
borderRadius: 50,
},
counting: {
alignItems: "center",
padding: 10
}
});
const Application = () => {
const [count
, setCount] = useState(0);
const onPress =
() =>
setCount(
prevCount =>
prevCount + 1);
return (
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/3571551/pexels-photo-3571551.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<View style={styles.docker}>
<Image
source={{
uri:
'https://pngimg.com/uploads/peacock/peacock_PNG30.png',
}}
style={{
width: 300,
height: 300,
resizeMode: 'center',
opacity: 0.5,
}}
/>
<TouchableOpacity
style={styles.clickibutton}
onPress={onPress}
>
<Text>Click Me</Text>
<View style={styles.counting}>
<Text style={{
width: 200,
height: 50,
backgroundColor: '#a8f571',
alignContent: 'center',
color: '#181e94'
}}>
You Clicked {count} Times
</Text>
</View>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
export default Application;Output:
- On Web platform –
- On iOS platform –
- On Android platform –
- On clicking “Click Me” –
- After the first click –
Conclusion
On the basis of the above article, we understood the concept of opacity. Opacity is very much necessary for making our applications more attractive. This article will help the readers to understand and apply React Native Opacity in their own React Native applications.
Recommended Articles
This is a guide to React native opacity. Here we discuss the different examples to define the opacity of different components in React Native. You may also have a look at the following articles to learn more –
