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 :
Also Read :
Android project not found Are you sure this is a React Native project? Error Solution
Add Show Border Around Root Main Container View in React Native
Set Text Color in React Native Android iOS Tutorial
React Native Warning Failed child context type: Invalid child context ‘virtualizedCell.cellKey’ Solve Error in FlatList iOS Android
React Native Combine Two Strings Into One Using concat() Function
