Show ActivityIndicator 5 seconds in react native splash screen-CodePudding

I wanted to show Activity indicator at least 5 seconds in this splash screen. I tried setTimeOut method but it doesn't worked. It disappeared quickly and show this warning also.

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 a useEffect cleanup function. at src/screens/SplashScreen.js:15:15 in setTimeout$argument_0

Here is my code and how can I fixed this?

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, View } from 'react-native';

const SplashScreen = () => {
  const [animate, setAnimate] = useState(true);

  useEffect(() => {
    closeActivityIndicator();
  }, []);

  const closeActivityIndicator = () => {
    setTimeout(() => {
      setAnimate(false);
    }, 5000);
  };

  return (
    <View
      style={{ flex: 1, justifyContent: 'center', backgroundColor: '#06bcee' }}
    >
      <ActivityIndicator animating={animate} size="large" color="#ffffff" />
    </View>
  );
};

export default SplashScreen;

CodePudding user response：

I cannot see where your navigation function call is. Anyways, what you can do is keep your animate state to true, it doesn't matter the activity indicator is animating. The other problem I see is that your component unmounts but your setTimout() doesn't get cleared so it keeps on updating your state. You can do something like this.

const timerRef = React.useRef(null) // you can also import useRef() directly from 'react'

useEffect(() => {
  timerRef.current = setTimeout(() => {
    // code for navigation
  }, 5000);
  
  return () => clearTimeout(timerRef.current);
}, []);