Since I don't want to put the view (which gives a color to my status bar) in each and every single one of my screens, I decided to put it in my app.js. The problem is that it also shows during my loading animation, which is pretty annoying. I wanna hide it when it's on the "SplashAnimation" screen but I can't figure out how to do it, can someone give me a hand. Here's my code for the App.js file
import React from "react";
import { useState, useEffect } from "react";
import { Asset } from "expo-asset";
import Constants from "expo-constants";
import { SafeAreaView, View, StyleSheet } from "react-native";
import * as SplashScreen from "expo-splash-screen";
import { COLORS } from "./app/assets/Colors/Colors";
import Navigation from "./app/navigation";
import { NavigationContainer, useRoute } from "@react-navigation/native";
SplashScreen.preventAutoHideAsync();
function cacheAssets(images) {
return images.map((image) => {
if (typeof image === "string") {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
export default function App() {
const [appIsReady, setAppIsReady] = useState(false);
// Load any resources or data that you need prior to rendering the app
useEffect(() => {
async function loadResourcesAndDataAsync() {
try {
const Assets = cacheAssets([
require("./app/assets/salutt_splash_video_no_tagline.mp4"),
require("./app/assets/AppCustomBackgroundsFrench/LoginOptionsFR1.png"),
require("./app/assets/AppCustomBackgroundsFrench/SignInFR1.png"),
]);
await Promise.all([...Assets]);
} catch (e) {
// You might want to provide this error information to an error reporting service
console.warn(e);
} finally {
setAppIsReady(true);
setTimeout(SplashScreen.hideAsync, 400);
}
}
loadResourcesAndDataAsync();
}, []);
if (!appIsReady) {
return null;
}
return (
<View style={styles.root}>
<View
style={{
height: Constants.statusBarHeight,
backgroundColor: COLORS.background,
}}
/>
<Navigation style={styles.root} />
</View>
);
}
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: COLORS.background_Pale,
},
});
Here's my code for the Navigation component:
import { View, Text } from "react-native";
import React from "react";
import ConfirmEmailScreen from "../screens/ConfirmEmailScreen";
import ForgotPasswordScreen from "../screens/ForgotPasswordScreen";
import Home from "../screens/Home";
import LoginOptions from "../screens/LoginOptions";
import ResetPasswordScreen from "../screens/ResetPasswordScreen";
import SignInScreen from "../screens/SignInScreen";
import SignUpScreen from "../screens/SignUpScreen";
import SplashAnimation from "../screens/SplashAnimation";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="SplashAnimation"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="SplashAnimation" component={SplashAnimation} />
<Stack.Screen name="LoginOptions" component={LoginOptions} />
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="ConfirmEmail" component={ConfirmEmailScreen} />
<Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
<Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default Navigation;
For the answer, if possible, send a modified version of my code so I can just plug it into my program instead of just telling me what function or import to use. It would really be appreciated.