Como instalar react native bootsplash 2025 react native cli

[Thomas]

Como instalar react native bootsplash atualizado 2025 react native cli. Veja neste tópico como instalar de forma correta e funcional. Qualquer dúvida deixe um comentário abaixo.



Instalação:

$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash

Configurações IOS:

Edite o arquivo ios/YourApp/AppDelegate.swift:

import ReactAppDependencyProvider
import RNBootSplash // ⬅️ add this import

// …

class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {

  // …

  // ⬇️ override this method
  override func customize(_ rootView: RCTRootView) {
    super.customize(rootView)
    RNBootSplash.initWithStoryboard("BootSplash", rootView: rootView) // ⬅️ initialize the splash screen
  }
}

Configurações Android:

Edite o arquivo android/app/src/main/java/com/yourapp/MainActivity.kt:

// ⬇️ add these required imports
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

// …

class MainActivity : ReactActivity() {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState) // super.onCreate(null) with react-native-screens
  }
}

OBS: Se caso o seu arquivo mencionado acima nao for desta forma faça como esta aqui abaixo:

import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {

// …

  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState) // super.onCreate(null) with react-native-screens
  }

  override fun createReactActivityDelegate(): ReactActivityDelegate =
      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}

Agora use o comando:

npx react-native-bootsplash generate assets/images/splash.png \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html

Pronto agora seu app tem splash screen configurado!

Para sumir o Splash screen use isso no App principal:

import { useEffect } from "react";
import { Text } from "react-native";
import BootSplash from "react-native-bootsplash";

const App = () => {
  useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
    };

    init().finally(async () => {
      await BootSplash.hide({ fade: true });
      console.log("BootSplash has been hidden successfully");
    });
  }, []);

  return <Text>My awesome app</Text>;
};