React native Question posted in
The official React Native documentation can be found here.

White splash screen while navigating routes or at keyboard popup in React Native Expo

import { Redirect, router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { View, Text, ScrollView, Image } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { images } from "../constants";
import CustomButton from "../components/CustomButton";


export default function App() {
  return (
    <SafeAreaView className="bg-primary h-full">
      <ScrollView contentContainerStyle={{ height: "100%" }}>
        <View className=" w-full justify-center items-center min-h-[85vh] px-4">
          <Image
            source={images.logo}
            className="w-[130px] h-[84px] mt-3"
            resizeMode="contain"
          />
          <Image
            source={images.cards}
            className="max-w-[380px] w-full h-[300px]"
            resizeMode="contain"
          />
          <View className="relative mt-5">
            <Text className="text-3xl text-white font-bold text-center">
              Discover endless posibilites of
              <Text className="text-secondary-200"> Aora!</Text>
            </Text>
            <Image
              source={images.path}
              className="w-[126] h-[15] -bottom-2 -right-4 absolute "
              resizeMode="contain"
            />
          </View>
          <Text className="text-sm font-pregular text-gray-100 mt-7 text-center">
            Where creativity meets innovation: Embark on a journey of limitless
            exploration with Aura
          </Text>
          <CustomButton
            title="Continue With Email"
            handlePress={() => router.push('/signin')}
            containerStyle="w-full"
          />
        </View>
      </ScrollView>
      <StatusBar backgroundColor="#161622" style="light"/> 
    </SafeAreaView>
  );
}

index.jsx

_layout.jsx:
import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import { View } from "react-native";

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
  });

  useEffect(() => {
    if (error) throw error;

    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <Stack>
        <Stack.Screen  name="index" options={{ headerShown: false }} />
        <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    </Stack>
  );
}

Whenever i’m navigating to any of the Auth routes or clicking the form field and keyboard popups, a small white slpash can be screen, I want to eliminate that on my React Native Expo App, kindly note, I’m using a dark theme and this white flashes make the app experience look really bad. Above i have attached the _layout.jsx and indx.jsx code, do let me know what changes are required.

Tags:

2

Answers


  1. 0

    Are you sure its related to your splashscreen? It might have something to do with your apps background color that gets seen when in-between screens.

    In the expo documention for app.json / app.config.js, if you scroll down you will find a value named ‘backgroundColor’. Try setting that to your dark theme color and see if that helps.

    Login or Signup to reply.
  2. 0

    I would look into NavigationContainer

    
...

export const appTheme: Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: "black",
  },
};

...

return (
   <NavigationContainer theme={appTheme}>

    ...

   </NavigationContainer>
)

    Place NavigationContainer at the top component or at least with your whole navigation state wrapped in. And add a basic theme.

    I don’t know if this will help but it is worth a try!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search