Rectangle is the a shape that has 4 lines with 4 angles, The width of rectangle shape is grater then height. The formula of finding area of rectangle is ( A = W * L ). The Square shape has the same line structure but the width and height of square is same. So in this tutorial we would going to make a react native application with 2-D Custom Rectangle Square Shape View using custom style.css class. So let’s get started.
Contents in this project Create Custom Rectangle Square Shape View programmatically :
1. Import StyleSheet and View component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View} from ‘react-native’;
|
2. Create A root View in render’s return block. This is the main View of your class.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View style={styles.container}>
</View>
);
}
|
3. Now create 2 Views inside the Root View and call their Styles. First view is used to show the 2-D Square Shape and 2nd is used to show the 2-D Rectangle Shape.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.container}>
<View style={styles.SquareShapeView} />
<View style={styles.RectangleShapeView} />
</View>
);
}
|
4. Now finally Create the CSS classes for all 3 Views.
|
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
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
SquareShapeView: {
width: 120,
height: 120,
backgroundColor: ‘#00BCD4’
},
RectangleShapeView: {
marginTop: 20,
width: 120 * 2,
height: 120,
backgroundColor: ‘#FFC107’
}
});
|
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
47
48
49
|
import React, { Component } from ‘react’;
import { StyleSheet, View} from ‘react-native’;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.SquareShapeView} />
<View style={styles.RectangleShapeView} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
SquareShapeView: {
width: 120,
height: 120,
backgroundColor: ‘#00BCD4’
},
RectangleShapeView: {
marginTop: 20,
width: 120 * 2,
height: 120,
backgroundColor: ‘#FFC107’
}
});
|
Screenshot in Android Application :
Screenshot in iOS application :
Also Read :
React Native Set View Width Height in Fixed Dimensions Android iOS
IF-Else & Nested IF-Else conditional statement in React Native example
React Native Getting Started With React Navigation 3.x Tutorial to Add Activity
Add Fixed Sticky Header on FlatList in React Native iOS Android Tutorial
Wish You All a Very Very Happy New Year 2019
