strokeCap={'round'} Produces undesired results

[SiyabongaNzulwana]

@nihgwu @SpencerLynn @zgordon01 @kevkevinpal are you guys aware of this issue?

if you know of a solution to this please share... Thank you in advance.

[zgordon01]

Can you please provide a code snippet?

Also note a few disclaimers in the strokeCap section of our docs, which might be applying here.

strokeCap ( round , butt ) defaults to butt - string, optional PLEASE NOTE If using strokeCap={'round'} it is highly recommended to use a higher innerRadius (around 60% of radius and higher) in addition to not having very small percentage sections. This will ensure proper display. We hope to address these issues in future PRs

[SiyabongaNzulwana]

@zgordon01 thanks for the response, I did read the disclaimers, however even if I change/play around with the radius and inner_Radius, I still get the same results. below is the snippet of code you asked for.

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.pieViewWrapper}>
          <View style={styles.yourConnections}>
            <Pie
              radius={120}
              innerRadius={100}
              sections={[
                {
                  percentage: 50,
                  color: '#48d1cc',
                },
              ]}
              backgroundColor="#EBECF0"
              strokeCap={'round'}
            />
          </View>
        </View>
        <View style={styles.pieViewWrapper}>
          <View style={styles.connectionsPerfomance}>
            <Pie
              radius={150}
              innerRadius={130}
              sections={[
                {
                  percentage: 90,
                  color: '#66cdaa',
                },
              ]}
              backgroundColor="#EBECF0"
              strokeCap={'round'}
            />
          </View>
        </View>
        <View style={styles.pieViewWrapper}>
          <View style={styles.communityPerfomance}>
            <Pie
              radius={180}
              innerRadius={160}
              sections={[
                {
                  percentage: 40,
                  color: '#ffd700',
                },
              ]}
              backgroundColor="#EBECF0"
              strokeCap={'round'}
            />
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    height: height * 0.5,
    width: width,
  },
  pieViewWrapper: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },
  yourConnections: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  connectionsPerfomance: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  communityPerfomance: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  points: {
    color: '#000',
    fontSize: 35,
    fontWeight: 'bold',
  },
  pointsText: {
    color: 'grey',
    fontSize: 10,
    alignSelf: 'center',
  },
})

[SiyabongaNzulwana]

@zgordon01, @nihgwu I have managed to figure out what was going wrong with the strokeCap prop on version 1.1.2 of react-native-pie I have sent a PR for it.

[gokulrajkp]

I'm still getting this issue how do u guys solve this