How to Create Custom Circle Round Oval Shape View in React Native

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.

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.

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.

4. Create containerCircleShapeView and OvalShapeView CSS Styles classes :

5. Complete source code for App.js File :

Screenshot in Android Application :

Circle Round Oval Shape View

Screenshot in iOS application :

10 Comments

  1. 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

  2. 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

  3. 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?

  4. Anyways np
    Thanks for your replies.

  5. Thank you for this code it really helps me a lot

Leave a Reply

Your email address will not be published. Required fields are marked *