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 :
How do i make a view which has slope, a rectangle which has left side height is max than right side height, And that view also containing the buttons. Actually i want to make it for the footer in the app.
Rohit can you tell me the view name or its shape more specific ?
Yes. It is kind of polygon shape, here is the sample clip-path for the shape:
http://bennettfeely.com/clippy/
-webkit-clip-path: polygon(0 57%, 100% 6%, 100% 95%, 0% 100%);
clip-path: polygon(0 57%, 100% 6%, 100% 95%, 0% 100%);
Rohit this is the triangle shape read my this tutorial : https://reactnativecode.com/triangle-shape-view/
I want to make square for footer tab with icons inside. But having little slide or we can say the square is rotated -3 degree or make left side height less than right side height.
http://www.math.ucla.edu/~ronmiech/Calculus_Problems/32A/chap11/section4/708d19/IMG00004.GIF
http://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/2/2013/12/22135509/arpwea_img1.jpg
Rohit you can rotate view using transform read my this tutorial : https://reactnativecode.com/rotate-text-view-elements-to-specific-degree/ .