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!

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!

• javascript
• svg
• react-native
• stylesheet

1 Answer 1

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. :(