CODEWITHSUNDEEP
javascriptreact-nativesplash-screenstack-navigator
Azad Fun
Azad Fun

Reputation: 37

Splash screen still doesn't load first in React Native app

Just added splash screen for my app, but it seem like it runs not at the first palce.

I mean when i run the app on avd simulator, i still get white screen loading first for milliseconds then splashscreen. ISs there any reason for that or maybe i used the functionality wrong?

This is my loading screen code:

function LoadingScreen ({navigation}) {
  setTimeout (() => {
    navigation.replace('FirstScreen');
  }, 4000);
return (
  <ImageBackground style={styles.backgroundContainer} source={splashScreen}/>

  
);

};



const Stack = createStackNavigator();
const PERSISTENCE_KEY = 'NAVIGATION_STATE';

function App() {
   const [isReady, setIsReady] = React.useState(false);
  const [initialState, setInitialState] = React.useState();

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          const state = savedStateString ? JSON.parse(savedStateString) : undefined;

          if (state !== undefined) {
            setInitialState(state);
          }
        
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  if (!isReady) {
    return <ImageBackground style={styles.backgroundContainer} source={splashScreen}/>
  }



  return(
    <NavigationContainer
    initialState={initialState}
    onStateChange={(state) =>

    AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))

    }
    >
      <Stack.Navigator initialRouteName='SplashScreen' headerMode='none' >
        <Stack.Screen name = 'SplashScreen' component={LoadingScreen}/>
        <Stack.Screen name ='FirstScreen' component={FirstScreen}/>

Upvotes: 2

Views: 2053

Answers (2)

AxelBrei
AxelBrei

Reputation: 1

I'm using a really helpfull library wich handle splash screen for Android and iOS react-native-splash-screen

Upvotes: 0

RowanX
RowanX

Reputation: 1317

For android: /android/app/src/main/res/layout add an xml file called launch_screen.xml and have the code in it like that:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash"
        android:scaleType="centerCrop"
/>
</RelativeLayout>

and in MainActivity.java call it like this:

public class MainActivity extends NavigationActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.launch_screen);
  }

I don't have much experience regarding the iOS splash screen, so maybe someone could help you with that area. Splash screens are called using native code, not react-native code to start with.

You can also check this library: https://github.com/crazycodeboy/react-native-splash-screen to see if it helps you with your case.

I hope that helps a bit. Good Luck!

Upvotes: 1

Related Questions