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 :
Gr8 job
Hi,
Can u please tell me how to design octagon text input in react-native
Srikanth octagon text or octagon shape ?
can i give
borderLeftWidth: 60,
borderRightWidth: 60,
in percentage, please reply
This site got em all.
https://codedaily.io/tutorials/The-Shapes-of-React-Native