New ReactNative project doesnt apply full screen size view

Question

i just created a new react native project (0.73.6) and my App.tsx is

 import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';

function App(): React.JSX.Element {
  return (
    // <SafeAreaView style={{}}>
    <View style={{}}>
      <Text>Hey</Text>
    </View>
    // </SafeAreaView>
  );
}

export default App;

when i run the app its load like this . i big gap between top and bottom

i also added a normal app screenshot. so its easy to see the gap and what is wrong there because App.tsx just a simple code

Answer 1

Install react-native-safe-area-context using npm install react-native-safe-area-context. Wrap your code in <SafeAreaProvider> and then <SafeAreaView>. This time, <SafeAreaView> is imported from react-native-safe-area-context. See if this works. sample code

import React from "react";
import { Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View>
          <Text>Hey</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;