CODEWITHSUNDEEP
androidiosreact-native
Abhishek Bhardwaj
Abhishek Bhardwaj

Reputation: 1204

How to remove default white screen in React Native?

I have created a custom SplashScreen in my react native application and that's working fine. But before that screen was called a white screen just came I want to remove that white screen.

Here is my SplashScreen component.

function SplashScreen(props) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      hideSplashScreen();
    }, 5000);
  }, []);
  function hideSplashScreen() {
    setIsVisible(false);
  }

  return isVisible ? (
    <ImageBackground
      source={backgroundImage}
      style={{
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Image
        source={triangleLogo}
        resizeMode={'cover'}
        style={{
          width: 300,
          height: 300,
        }}
      />
    </ImageBackground>
  ) : (
    <LoginScreen />
  );
}

export default SplashScreen;

Upvotes: 1

Views: 1365

Answers (1)

Fiston Emmanuel
Fiston Emmanuel

Reputation: 4849

When the app launches, the app JavaScript bundle is loaded and parsed before executing and rendering the initial app screen.

For high-end devices like the latest iPhone Models, this delay happens instantly and is unnoticeable.

Differently, on Android low-end devices, this should take a few seconds and make your app seems slow to launch.

The rule of thumb to fix this issue is to add Splash Screen which runs on the native thread and doesn't require waiting for the JavaScript bundle to be loaded and parsed.

You can use one of the following packages:

https://www.npmjs.com/package/react-native-splash-screen

https://www.npmjs.com/package/react-native-bootsplash

Upvotes: 1

Related Questions