How can i make the splashscreen cover 100% for React native Expo?

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.

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.