A Trapezoid is a combination of a pair of parallel sides and both angles coming from a parallel side are equal, and the sides that are not parallel are equal in length known as Trapezoid. So in this tutorial we would going to create a react native Android iOS app with Custom Trapezoid Shape View using CSS Style.
Contents in this project Create Custom Trapezoid Shape View in React Native :
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 and inside it crate another View which is used to show Trapezoid.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.TrapezoidStyle} />
</View>
);
}
|
3. Now finally we would create 2 CSS classes for Root View and Trapezoid View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
TrapezoidStyle: {
width: 200,
height: 0,
borderBottomColor: “#00BCD4”,
borderBottomWidth: 100,
borderLeftWidth: 50,
borderRightWidth: 50,
borderRightColor: ‘transparent’,
borderLeftColor: ‘transparent’,
}
});
|
4. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View} from ‘react-native’;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.TrapezoidStyle} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
TrapezoidStyle: {
width: 200,
height: 0,
borderBottomColor: “#00BCD4”,
borderBottomWidth: 100,
borderLeftWidth: 50,
borderRightWidth: 50,
borderRightColor: ‘transparent’,
borderLeftColor: ‘transparent’,
}
});
|
Screenshot in Android device :
Screenshot in iOS device:
Also Read :
React Native Insert Text Input Data To MySQL Server Android iOS Tutorial
React Native Creating Card View in Android iOS App Example Tutorial
React Native Spring Animation Android iOS Example Tutorial
React Native WebView Android iOS Installation Example Tutorial
React Native Create Alert Dialog in Android iOS Application Tutorial
