Triangle shape view also known as Pyramid View is very important in educational applications, where developer needs to explain all the triangular formulas. So in this tutorial we would going to create a 2-D Triangle Shape using custom CSS Style in both Android and iOS applications .
Contents in this project Make Triangle Shape View in React Native :
1. Import StyleSheet and View component in your class.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View} from ‘react-native’;
|
2. Create a Root Parent View in render’s return block, This is the Main container View.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.container}>
</View>
);
}
|
3. Now create a View inside the Root View and Call the TriangleShapeCSS class in this View.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.container}>
<View style={styles.TriangleShapeCSS} />
</View>
);
}
|
4. Create CSS classes named as container for Root View and TriangleShapeCSS for Triangle View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
TriangleShapeCSS: {
width: 0,
height: 0,
borderLeftWidth: 60,
borderRightWidth: 60,
borderBottomWidth: 120,
borderStyle: ‘solid’,
backgroundColor: ‘transparent’,
borderLeftColor: ‘transparent’,
borderRightColor: ‘transparent’,
borderBottomColor: ‘#00BCD4’
}
});
|
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
|
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.TriangleShapeCSS} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
TriangleShapeCSS: {
width: 0,
height: 0,
borderLeftWidth: 60,
borderRightWidth: 60,
borderBottomWidth: 120,
borderStyle: ‘solid’,
backgroundColor: ‘transparent’,
borderLeftColor: ‘transparent’,
borderRightColor: ‘transparent’,
borderBottomColor: ‘#00BCD4’
}
});
|
Screenshot in Android application :
Screenshot in iOS application :
Also Read :
React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial
React Native Detect Device Screen Orientation is Portrait or Landscape
Upgrade Current Old React Native Project Version to Latest Version
React Native Make a Phone Call – Open Phone Number in Dial Screen
Dynamically Add Values in String Array List in React Native on button click
