react-native-progress
react-native-progress copied to clipboard
oblador
[Android] CircleSnail shows a black rectangle on react-native v0.57
Hi After upgrading my react-native project to 0.57, on Android, CircleSnail component shows a black reactangle. It was working on v 0.56. My code:
import * as Progress from 'react-native-progress';
// in render()
<Progress.CircleSnail size={80} color='#ffffff' indeterminate/>
update: I checked on both Windows and Linux. I also checked with Android v7.0 & v8.0, nothing changed and the problem still exists. I took a look at the ReactNativeART and found nothing because both versions(0.56 & 0.57) are almost identical.
i got the same issue when upgrade RN 0.57. in <Progress.Circle />. in ios work fine, but every android devices, just a black square.
I see two behaviours:
- black background
- blue color of the text shown - should be the pie color
- transparent (or maybe white) color of the pie (so it's inivisible)
<Progress.Circle ...>
Using react 0.57.2 - this has worked nicely with 0.56
ReactNative: 0.57 React-Native-Progress: 3.5.0
Upon launching of my app I use <Progress.Circle > which use to work fine but since upgrading it just shows a black box.
Also, within my app I have a refresh button and upon tapping the button the <Progress.Circle > shows up but does not animate.
Hope this helps at all.
It did work with RNP 3.4 and RN 0.55
Same issue and it's weird, it's only happen the first time the component is <Progress.Circle/> is loaded !
Facing the same issue. Only happens when the component is loaded. After that it works fine. RN 0.57
Yes,same issue. i use version RN 0.57.3 Circle And CircleSnail color Black.
I found out the workaround. In my case, It works well as intended on Android devices.
I hope this helps.
constructor(props: Props) {
super(props);
this.state = {
isVisible: false,
};
}
componentDidMount() {
requestAnimationFrame(() => {
this.setState({
isVisible: true,
});
});
}
render() {
if (!this.state.isVisible) {
return null;
}
return (
<View style={styles.container}>
<Progress.Circle
size={52}
progress={0.5}
unfilledColor="#fff"
color="#ff457f"
thickness={2}
borderWidth={0}
>
</Progress.Circle>
</View>
);
}
@ifsnow Is your workaround to set it to be invisible initially and then load it in?
@Slooowpoke Yes. I don't fully know why this solves the issue. but, It work well for me.
I found out the workaround. In my case, It works well as intended on Android devices.
I hope this helps.
constructor(props: Props) { super(props); this.state = { isVisible: false, }; } componentDidMount() { requestAnimationFrame(() => { this.setState({ isVisible: true, }); }); } render() { if (!this.state.isVisible) { return null; } return ( <View style={styles.container}> <Progress.Circle size={52} progress={0.5} unfilledColor="#fff" color="#ff457f" thickness={2} borderWidth={0} > </Progress.Circle> </View> ); }
returning null didn't work, but I used an ActivityIndicator and it worked. Thank you!
I found out the workaround. In my case, It works well as intended on Android devices.
I hope this helps.
constructor(props: Props) { super(props); this.state = { isVisible: false, }; } componentDidMount() { requestAnimationFrame(() => { this.setState({ isVisible: true, }); }); } render() { if (!this.state.isVisible) { return null; } return ( <View style={styles.container}> <Progress.Circle size={52} progress={0.5} unfilledColor="#fff" color="#ff457f" thickness={2} borderWidth={0} > </Progress.Circle> </View> ); }
I applied your solution, but the issue sometime appear for me, any idea?
same issue with RN 0.59.5.
<Progress.Circle /> display with the black square, but ios fine.
I'm using this with the latest Expo v32.0.0 which is using React Native 0.57 but don't seem to face this issue.
I can't fix it, it is so weird, and all the solutions above didn't work. So i give up. In my condition, i just wrote it with two views instead —— use borderWidth, borderRadius, AnimatedView. It worked.
@ckOfor The issue came back in version 5.0.0 but then was fixed in version 5.0.1
