[Android] CircleSnail shows a black rectangle on react-native v0.57

[s-o-r-o-u-s-h]

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/>

[s-o-r-o-u-s-h]

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.

[NguyenHoangMinh1996]

i got the same issue when upgrade RN 0.57. in . in ios work fine, but every android devices, just a black square.

[ghost]

Same issue here, very frustrating!

[danvass]

Just ran into this too.

[AnagramEngineering]

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

[BStenfors]

ReactNative: 0.57 React-Native-Progress: 3.5.0

Upon launching of my app I use 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 shows up but does not animate.

Hope this helps at all.

It did work with RNP 3.4 and RN 0.55

[younes200]

Same issue and it's weird, it's only happen the first time the component is is loaded !

[lakshin]

Facing the same issue. Only happens when the component is loaded. After that it works fine. RN 0.57

[tianjyan]

Same issue. Do you have any workaround for this issue?

[Toshihiro2010]

Yes,same issue. i use version RN 0.57.3 Circle And CircleSnail color Black.

[philwilks]

Same issue

[ifsnow]

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>
  );
}

[Slooowpoke]

@ifsnow Is your workaround to set it to be invisible initially and then load it in?

[ifsnow]

@Slooowpoke Yes. I don't fully know why this solves the issue. but, It work well for me.

[iAlirezaKML]

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!

[YahiaJabeur]

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?

[ddthuan87]

same issue with RN 0.59.5.

display with the black square, but ios fine.

[zanechua]

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.

[ckOfor]

Any fix for this :(?

[x330650779]

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]

@x330650779 please share your solution

[jblemee]

@ckOfor The issue came back in version 5.0.0 but then was fixed in version 5.0.1