Can't perform a React state update on an unmounted component

JavaScript
1

Hi.

(Sorry for my english, I’m French):shushing_face:

I have a little problem, to explain, I got the famous error :

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method,
   in LoginScreen (at HomeScreen.js:123)
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error
- node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:638:36 in warningWithoutStack
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16356:6 in warnAboutUpdateOnUnmounted
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17937:37 in scheduleWork
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules\react\cjs\react.development.js:335:31 in setState
* src\LoginScreen\LoginScreen.js:28:44 in <unknown>
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:414:17 in callTimers
- ... 5 more stack frames from framework internals

When I load my HomeScreen. I know where is the state that I don’t use correctly and I try some solution purpose on Google. Nothing is working… I really don’t understand.

So, first, there is the 123 Line in HomeScreen.js :

     return <LoginScreen navigation={this.props.navigation}/>;

Use this because I have a condition about login status of the user.

And in LoginScreen.js, the error come from :

       MainService.load(v => this.setState({loaded:true}));

So, I see some post similar in Google and try this (and other solution…) :

export default class LoginScreen extends React.Component {
 _isMounted = false;

 constructor(props) {
   super(props);

   this.animatedValue = new Animated.Value(0.5);
   this.animatedValue2 = new Animated.Value(0);

   this.state = { username: '',
                  password: '',
                  data: '',
                  crypted_password: '',
                  database_password: '',
                  connectStatus: '',
                  loaded:false };
   }

   componentDidMount() {
     this._isMounted = true;
     if (this._isMounted) {
       MainService.load(v => this.setState({loaded:true}));
       Animated.spring(this.animatedValue, {
         toValue: 1,
         friction: 4,
         delay: 1500
       }).start();

       Animated.timing(this.animatedValue2, {
         toValue: 1,
         delay: 200,
         duration: 2000
       }).start();
     }
   }

   componentWillUnmount() {
     this._isMounted = false;
   }

   render() {

Animated correspond to a sort of Loading Screen.

MainService is this class :

export default class MainService {
 static load(cb) {
   setTimeout(cb, 2000);
 }
}

So, I don’t know how to repair that…
Somebody have an idea ? Thanks.