Progress circle does not displayed after recovering from lock on android #106

dnwilson · 2018-01-03T17:34:09Z

I implemented a countdown clock which displays day, hours, mins, and seconds. However, if lock my screen and unlock it only the progress circle for seconds is displayed until the value for mins has changed then that one will update as well. Not sure how to resolve.

Jacse · 2018-01-03T19:19:48Z

Could you post reprodusible code?

dnwilson · 2018-01-03T20:52:35Z

@Jacse seems like this is a know issue which #95 was supposed to fix

Jacse · 2018-01-03T21:04:57Z

@dnwilson Indeed, but that doesn't explain the sequential updating that you are experiencing.

dnwilson · 2018-01-03T21:26:18Z

@Jacse see below

class Countdown extends Component {
  state = {
    day: 0,
    hour: 0,
    min: 0,
    sec: 0
  }
  
  componentDidMount() {
    // update every second
    this.interval = setInterval(() => {
      const date = this.calculateCountdown();
      date ? this.setState(date) : this.stop();
    }, 1000);
  }

  componentWillUnmount() {
    this.stop();
  }

 ...

  stop() {
    clearInterval(this.interval);
  }

  addLeadingZeros(value) {
    value = String(value);
    while (value.length < 2) {
      value = '0' + value;
    }
    return value;
  }

  render() {
    const countDown = this.state;
    const pluralize = (label) => {
      return countDown[label] === 1 ? label : label + 's';
    }
    const ATTRIBS = ['day', 'hour', 'min', 'sec']
    const MAX = {
      day: 365,
      hour: 24,
      min: 60,
      sec: 60
    }

    return (
      <Card theme={variables} style={{marginLeft: 8, marginRight: 8, marginTop: 8}}>
        <CardItem>
          <Body style={styles.container}>
            {
              ATTRIBS.map((attr) => {
                const fill = countDown[attr]/MAX[attr] * 100
                return(
                  <CircularProgress
                    key={attr}
                    size={70}
                    width={2}
                    fill={fill}
                    rotation={0}
                    tintColor="#2196F3">
                    {
                      (fill) => (
                        <View>
                          <Text style={styles.primaryText}>{ this.addLeadingZeros(countDown[attr]) }</Text>
                          <Text style={styles.secondaryText}>{ pluralize(attr) }</Text>
                        </View>
                      )
                    }
                  </CircularProgress>
                )
              })
            }
          </Body>
        </CardItem>
      </Card>
    );
  }
}

ckruppe · 2018-01-15T23:52:23Z

I had also some issue with this behavior.
Problem seems to be that the circles do not redraw. (In my case it was the background circle if the progress is 0%)

Fixed it with AppState in CircularProgress.js. I change the circle width on AppState change and change it back directly after.

export default class CircularProgress extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        backgroundWidth: this.props.backgroundWidth
      }
  }
  
  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChange);
  }

  handleAppStateChange = nextAppState => {
     this.setState({backgroundWidth: this.props.backgroundWidth - 1});
     this.setState({backgroundWidth: this.props.backgroundWidth});
  }

Please notice i have some slightly changed CircularProgress.js because i changed some other behaviors also.

dnwilson · 2018-01-22T21:32:38Z

Still having this issue.

Jacse · 2018-03-02T10:54:15Z

So this is apparently an issue with RN ART (see issue #17565). I'm looking into what hacky fixes could mitigate this.

Jacse · 2018-03-02T11:12:38Z

Will publish to NPM within this week. If you could install from master and verify the fix works that would be great.

call-llc · 2018-03-16T01:22:05Z

@Jacse It worked! thanks!! react-native-circular-progress@0.2.0

, bartgryszko#79, bartgryszko#65 etc

Jacse closed this as completed in f198080 Mar 2, 2018

lekamj pushed a commit to lekamj/react-native-circular-progress that referenced this issue Aug 2, 2018

Proper Android unlocking. Reverts bartgryszko#105. Fixes bartgryszko#106

60fc3bc

, bartgryszko#79, bartgryszko#65 etc

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Progress circle does not displayed after recovering from lock on android #106

Progress circle does not displayed after recovering from lock on android #106

dnwilson commented Jan 3, 2018

Jacse commented Jan 3, 2018

dnwilson commented Jan 3, 2018 •

edited

Loading

Jacse commented Jan 3, 2018

dnwilson commented Jan 3, 2018

ckruppe commented Jan 15, 2018 •

edited

Loading

dnwilson commented Jan 22, 2018

Jacse commented Mar 2, 2018

Jacse commented Mar 2, 2018

call-llc commented Mar 16, 2018 •

edited

Loading

Progress circle does not displayed after recovering from lock on android #106

Progress circle does not displayed after recovering from lock on android #106

Comments

dnwilson commented Jan 3, 2018

Jacse commented Jan 3, 2018

dnwilson commented Jan 3, 2018 • edited Loading

Jacse commented Jan 3, 2018

dnwilson commented Jan 3, 2018

ckruppe commented Jan 15, 2018 • edited Loading

dnwilson commented Jan 22, 2018

Jacse commented Mar 2, 2018

Jacse commented Mar 2, 2018

call-llc commented Mar 16, 2018 • edited Loading

dnwilson commented Jan 3, 2018 •

edited

Loading

ckruppe commented Jan 15, 2018 •

edited

Loading

call-llc commented Mar 16, 2018 •

edited

Loading