Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dnwilson opened this issue Jan 3, 2018 · 9 comments
Closed

Comments

@dnwilson
Copy link

dnwilson commented Jan 3, 2018

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
Copy link
Collaborator

Jacse commented Jan 3, 2018

Could you post reprodusible code?

@dnwilson
Copy link
Author

dnwilson commented Jan 3, 2018

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

@Jacse
Copy link
Collaborator

Jacse commented Jan 3, 2018

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

@dnwilson
Copy link
Author

dnwilson commented Jan 3, 2018

@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
Copy link

ckruppe commented Jan 15, 2018

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
Copy link
Author

Still having this issue.

@Jacse
Copy link
Collaborator

Jacse commented Mar 2, 2018

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

@Jacse Jacse closed this as completed in f198080 Mar 2, 2018
@Jacse
Copy link
Collaborator

Jacse commented Mar 2, 2018

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

@call-llc
Copy link

call-llc commented Mar 16, 2018

@Jacse It worked! thanks!! [email protected]

lekamj pushed a commit to lekamj/react-native-circular-progress that referenced this issue Aug 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants