The round shape also known as Circle is used to create Round buttons in react native application if you create creating any type of animation in your app. So in this example we would going to create Circle Round Oval Shape View in React native android iOS application using custom Style.CSS classes.
Circle : Circle is a plane fully rounded view created using Compass in Maths.
Oval : Oval shape is a Egg Shape flat round view stretched from both sides.
Contents in this project Create Custom Round Oval Shape View in React Native :
1. Import StyleSheet, View component in your react native 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 view is the Main View and all the component should be created inside this view.
|
1 2 3 4 5 6 7 8 9 |
render() { return ( <View style={styles.container}> </View> ); } |
3. Now create 2 children View inside the Main View, First View is used to Show Pure Circle shape and Second View is used to Show the Oval Egg Shape.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style={styles.container}> <View style={styles.CircleShapeView}> </View> <View style={styles.OvalShapeView} > </View> </View> ); } |
4. Create container, CircleShapeView and OvalShapeView CSS Styles classes :
|
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', margin: 10 }, CircleShapeView: { width: 150, height: 150, borderRadius: 150/2, backgroundColor: '#00BCD4' }, OvalShapeView: { marginTop: 20, width: 100, height: 100, backgroundColor: '#00BCD4', borderRadius: 50, transform: [ {scaleX: 2} ] }, }); |
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 50 51 52 53 |
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.CircleShapeView}> </View> <View style={styles.OvalShapeView} > </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, CircleShapeView: { width: 150, height: 150, borderRadius: 150/2, backgroundColor: '#00BCD4' }, OvalShapeView: { marginTop: 20, width: 100, height: 100, backgroundColor: '#00BCD4', borderRadius: 50, transform: [ {scaleX: 2} ] }, }); |
Screenshot in Android Application :
Screenshot in iOS application :
I want to generate the horizontal scrollable view where multiple round shapes views are present and have to follow the randomly placed pattern, how can I get this?
for ex:
https://cdn-images-1.medium.com/max/1200/1*i1B2ZqmzIJDI3eZrKhFhhw.png
Rohit first read my this post to make Horizontal Scrollview https://reactnativecode.com/horizontal-scrollview-react-native/ then place all of your views inside it.
Yes. I have gone through this course. I made horizontal scrolling but the thing is, I have dynamic location name data in array to render horizontally in circle shape and clickable view and one imp thing the views will appear as un-unified pattern as shown in
https://cdn-images-1.medium.com/max/1200/1*i1B2ZqmzIJDI3eZrKhFhhw.png
Rohit you need to randomly show image every time , Am i correct ?
Let say, I have [24] elements to show in circular view horizontally in random manner, from which [8] views will display default without scrolling and after scroll another [8] element will be visible in the same pattern as first [8] has been displayed and after next scroll remaining [8] will display same.
Now the problem is first 8 are not in any manner or any specific pattern they are just random views, so how to repeat the same for remains?
Rohit sorry i have no idea how to help you and i really don’t understand what is actually you want.
Anyways np
Thanks for your replies.
Welcome Rohit and Thanks for vising my site 🙂 .
Thank you for this code it really helps me a lot
Welcome dear 🙂 .
how can i get the width or heigh of a view Component?