setState is called on unmounted component

[amed]

react-native-counter used for creating a counter in home page that start from 0 and counts the levels that the user reached.

<Counter
  end={this.props.level}
  start={0}
  time={2000}
  easing='linear' />

versions:

"react": "~15.4.0-rc.4",
"react-native": "0.40.0",
"react-native-counter": "^0.1.1",

In both IOS and Android this warning is occurred.

[Kerumen]

Can you show me what's your code for your Home page?

[amed]

It is a fat js file. After debugging, it turns out that the home screen do reRendering a child component which has

[Kerumen]

which has? 🤔

[Kerumen]

It this still an issue?

[amed]

We had to ignore it, throughout
console.ignoredYellowBox = ['Warning: setStat(...):']
We could not prevent the parent homeView from re-rendering several times.

[tikkichan4]

Just faced this problem too. And i found out that the requestAnimationFrame is not cancelled during component unmount.

The warning should be fixed by the following code changes: (For ES5, react-native-timer-mixin should solve the problem)

  componentDidMount() {
    this.startTime = Date.now();
    this.frameAnimationRequest = requestAnimationFrame(this.animate.bind(this));
  }
  componentWillUnmount() {
    cancelAnimationFrame(this.frameAnimationRequest);
  }
  animate() {
    const { onComplete } = this.props;

    if (this.stop) {
      if (onComplete) onComplete();
      return;
    }

    this.frameAnimationRequest = requestAnimationFrame(this.animate.bind(this));
    this.draw();
  }

Hope this help !

[Kerumen]

Can you submit a PR? Would be happy to merge it!