I want to draw this shape. Of course, it can be divided into more parts.
How can I draw this using StyleSheet?
Or do I need to use some libraries like react-native-svg?
I would be appreciate if anybody can help me.
Thank you in advance!
1 Answers
I found a solution for this.
StyleSheet
outerCircle: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
width: 42,
height: 42,
borderRadius: 21
},
innerCircle: {
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
width: 34,
height: 34,
borderRadius: 17
},
leftWrap: {
position: 'absolute',
top: 0,
left: 0,
width: 21,
height: 42
},
halfCircle: {
position: 'absolute',
top: 0,
left: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
width: 21,
height: 42,
borderRadius: 21
},
View
<View style={[styles.outerCircle, { backgroundColor: color1 }]}>
<View style={styles.leftWrap}>
<View
style={[
styles.halfCircle,
{
backgroundColor: color2,
transform: [
{ translateX: 21 / 2 },
{ rotate: '180deg' },
{ translateX: -21 / 2 },
],
},
]}
/>
</View>
<View style={styles.innerCircle} />
</View>
This works well for 2 division, but not good for 3 division.
Here are the codes for 3 division and screenshots.
<View style={[styles.outerCircle, { backgroundColor: color1 }]}>
<View style={styles.leftWrap}>
<View
style={[
styles.halfCircle,
{
backgroundColor: color2,
transform: [
{ translateX: 21 / 2 },
{ rotate: '180deg' },
{ translateX: -21 / 2 },
],
},
]}
/>
</View>
<View style={styles.leftWrap}>
<View
style={[
styles.halfCircle,
{
backgroundColor: color2,
transform: [
{ translateX: 21 / 2 },
{ rotate: '90deg' },
{ translateX: -21 / 2 },
],
},
]}
/>
</View>
<View style={styles.innerCircle} />
</View>
I want to divide into 3 parts in same length. I tried several times, no luck. :(
Related