backgroundColor property of Style is used to set background color of View components in react native. The backgroundColor property supports all type of color formats like ARGB, RGB and Hex values. There is one value which the backgroundColor supports which is transparent. Using the transparent value we can easily set any View component background to Transparent which will make the Beneath View visible. This type of designing is mostly used to make the view overlap in react native applications. So in this tutorial we would Create Transparent Background View in React Native Android iOS App Example Tutorial.
Contents in this project Create Transparent Background View in React Native Android iOS App Example Tutorial:
1. Open your project’s App.js file and import Text, View and StyleSheet component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Text, View, StyleSheet } from ‘react-native’;
|
2. Creating our main export default class App extends Component. This is our main Root class.
|
1
2
3
4
|
export default class App extends Component {
}
|
3. Creating render’s return block -> A main root view -> A Child view. Our child View is the Transparent background view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.childView} >
<Text style={styles.text}> Set Background Color of View Transparent in React Native </Text>
</View>
</View>
);
}
|
4. Creating Style.
In childView style we would use the backgroundColor styling property with transparent value to make the Child View transparent.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
},
childView: {
justifyContent: ‘center’,
backgroundColor: ‘transparent’,
width: 300,
height: 200,
borderWidth:2,
borderColor: ‘#BF360C’,
padding: 25
},
text: {
fontSize: 24,
color:‘#BF360C’,
fontWeight: ‘bold’,
textAlign: ‘center’,
},
});
|
5. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import React, { Component } from ‘react’;
import { Text, View, StyleSheet } from ‘react-native’;
export default class App extends Component {
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.childView} >
<Text style={styles.text}> Set Background Color of View Transparent in React Native </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FAFAFA’,
},
childView: {
justifyContent: ‘center’,
backgroundColor: ‘transparent’,
width: 300,
height: 200,
borderWidth:2,
borderColor: ‘#BF360C’,
padding: 25
},
text: {
fontSize: 24,
color:‘#BF360C’,
fontWeight: ‘bold’,
textAlign: ‘center’,
},
});
|
Screenshot:
Also Read :
React Native Collapsible Animated Text View with Slide up Slide down Animation
How to Create Strike Through Text in React Native Android iOS App
React Native Calculate Square Cube and Square Root Cube Root
React Native Transform Scale Animation Android iOS Example
Installing React Native on Windows Tutorial
