Values lower than 50% not displayed correctly

[zash80]

See attached screenshots - values below 50% not showing up correctly.

[JackPu]

can u tell me your version?

[zash80]

$ yarn add react-native-percentage-circle
yarn add v0.21.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ [email protected]
Done in 9.65s.

[huangxiaohao]

@zash80 I have the same problem as you , how did you solve the issue?

[huangxiaohao]

@JackPu 我貌似也碰到了同样的问题
版本：
"react-native": "0.41.2"
"react-native-percentage-circle": "^1.0.6"

[JackPu]

OK我修复后通知你们更新。 #

[zash80]

@huangxiaohao : I tried to fix it, but did not get it managed - also being busy on other stuff...

[huangxiaohao]

@zash80 OK, It does not matter ,the author was already know this issue, we waited for him to fix this issue.

[AdityaAgg]

@JackPu using your library and would love for this to be fixed as well!

[JackPu]

@AdityaAgg I am trying to fixed it soon. Last week i don't have enough time to debug this issue. But this week I'll have some free time. 💐

[Yincongxiao]

我也遇到了这个问题,希望及时修复啊- -

[zachzhao1984]

same here , hope fixed soon

[huangxiaohao]

请问 这个问题目前有没有被修复呢？

[JackPu]

@huangxiaohao @Yincongxiao @AdityaAgg 请提供下你的测试设备机型，我试过了Nexus 模拟器和 自己的华为手机的没有出现过这个bug,希望你们能留言下你们测试的机型？ 😝

[zachzhao1984]

iOS模拟器上有问题

[JackPu]

iOS上模拟器什么问题？ @nouh 可以帖下图么？

[huangxiaohao]

iOS模拟器和iPhone真机均有问题。具体的图片我在上面的提问上面有截图，你可以看看。
不过因为项目原因，我今天换了一个其他的组件来解决这个问题。

[JackPu]

iOS 我一直都是测试的这个，android相对测试较少，你们发下 你们的 RN 版本？

[zachzhao1984]

我目前用的是RN 0.43

[tza17313]

https://facebook.github.io/react-native/docs/view.html#collapsable
leftWrap View should add collapsable={false}

collapsable?: bool
Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

render() {
        const {disabled,disabledText,radius,bgColor,color,percent,innerColor="#fef7ea"}=this.props
        const {leftTransformerDegree,rightTransformerDegree,borderWidth,textStyle}=this.state
        if (disabled) {
            return (
                <View style={[styles.circle,{
                    width:radius*2,
                    height: radius*2,
                    borderRadius:radius
                }]}>
                    <Text style={styles.text}>{disabledText}</Text>
                </View>
            );
        }
        return (
            <View style={[styles.circle,{
                width:radius*2,
                height: radius*2,
                borderRadius:radius,
                backgroundColor: bgColor
            }]}>
                <View collapsable={false} style={[styles.leftWrap,{
                    width: radius,
                    height: radius * 2,
                    left:0,
                }]}>
                    <View style={[styles.loader,{
                        left: radius,
                        width:radius,
                        height: radius*2,
                        borderTopLeftRadius:0,
                        borderBottomLeftRadius:0,
                        backgroundColor:color,
                        transform:[{translateX:-radius/2},{rotate:leftTransformerDegree},{translateX:radius/2}],
                    }]}></View>
                </View>
                <View collapsable={false} style={[styles.leftWrap,{
                    left:radius,
                    width: radius,
                    height: radius * 2,
                }]}>
                    <View style={[styles.loader,{
                        left:-radius,
                        width:radius,
                        height: radius*2,
                        borderTopRightRadius:0,
                        borderBottomRightRadius:0,
                        backgroundColor: color,
                        transform:[{translateX:radius/2},{rotate:rightTransformerDegree},{translateX:-radius/2}],
                    }]}></View>
                </View>
                <View style={[styles.innerCircle,{
                    width:(radius - borderWidth)*2,
                    height:(radius - borderWidth)*2,
                    borderRadius:radius - borderWidth,
                    backgroundColor: innerColor,
                }]}>
                    {this.props.children ? this.props.children :
                        <Text style={[styles.text, textStyle]}>{percent}%</Text>}
                </View>

            </View>
        );
    }

[HongXiaoMing]

iOS模拟器和iPhone真机 确实有这个问题

[HongXiaoMing]

[HongXiaoMing]

[checkitoutteam]

Hey everyone,
I encountered the same issue. I fixed it like (line 95):

 componentWillReceiveProps(nextProps) {
    let percent = nextProps.percent;
    let leftTransformerDegree = '0deg';
    let rightTransformerDegree = '0deg';
    if (percent >= 50) {
      rightTransformerDegree = '180deg';
      leftTransformerDegree = (percent - 50) * 3.6 + 'deg';
    } else {

      // Remove these 2 lines :
      // rightTransformerDegree = '0deg';
      // leftTransformerDegree = -(50 - percent) * 3.6 + 'deg';
      // and add :
      rightTransformerDegree = percent * 3.6 + 'deg';

    }

   // ...

Hope it helps

Kevin

[SeanLine]

Android Studio 上的Nexus模拟器都不行

[JackPu]

好呢，我测试下。 @SeanLine

[JackPu]

@SeanLine I have published a new version and fix the bug through the code by @checkitoutteam. I have tested it on both ios and android devices.

[zash80]

@JackPu, the fix looks good - thanks! also thanks @checkitoutteam for providing the solution...

[liuruizhe]

@JackPu ios 模拟器上，低于50%确实不展示进度条，貌似就是因为那个原因
@HongXiaoMing

[bianbiandashen]

i have solved the issue,you need change these codes:

#line 11
import Platform

#line 96
// rightTransformerDegree = '0deg'; // leftTransformerDegree = -(50-percent) * 3.6 + 'deg';

if (Platform.OS == 'ios') { leftTransformerDegree = '0deg'; rightTransformerDegree = percent * 3.6 + 'deg'; }else{ leftTransformerDegree = '0deg'; rightTransformerDegree = -(50-percent) * 3.6 + 'deg'; }

#line 157
//backgroundColor: this.props.percent < 50 ? this.props.bgcolor : this.props.color,

backgroundColor: Platform.OS == 'ios' ? this.props.color : this.props.percent < 50 ? this.props.bgcolor : this.props.color,

line number maybe is wrong，just search the code :)