How do i make this splashscreen to cover very well? I do not know why it just covers some place and does not cover some places. I am using react native expo.
My App.JS is looking thus
import { StyleSheet, Text, View } from "react-native";
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import OnboardingScreen from "./src/OnboardingScreen";
import LoginScreen from "./src/LoginScreen";
import RegisterScreen from "./src/RegisterScreen";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="OnboardingScreen"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="OnboardingScreen" component={OnboardingScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="RegisterScreen" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
I made use of an image which looks like the image below.
[![Screenshot-1684668761.png](https://i.postimg.cc/Mp7QWsRR/Screenshot-1684668761.png)](https://postimg.cc/w1Bv2QwT)How Can I make this to cover very well without having to show the splash with white background by the left and the right?
Like i said I am using React native expo for this. Kindly help with this.
Looking forward to hearing from you.
Please see source code for what I tried above, Kindly help.
2
Answers
I don’t see the Image component in your question, anyway you probably forgot to set the property
resizeMode="cover"
docs: React Native – Image (resizeMode)
This Issue can be resolved by using the library react-native-splash-screen
Link for lib
Link for library
Link for implementation
implementation link