React Native Expo : Is there a way to hide a specific view or component depending on the screen im currently on?

Viewed 16

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.

0 Answers
Related