How to style default SafeAreaView in React Native (expo)?

I'm building React Native app with Expo. I'm using version 51 of the Expo. When I ran the app for the first time, there was already some templates. I wanted to change the color of SafeAreaView at the top (and bottom on iPhone devices) but I don't know where to do so since there is already safe area applied by default and I don't know where to change it. I'm using the App router. Also when I add new screen and wrap it with SafeAreaView, it just shift my screen down little bit creating empty space between actual safe area (notch on the phone) and my content.

For example adding wrapper of SafeAreaView to my screen like this, creates the empty space as you can see in the image.

 <SafeAreaView style={{ flex: 1, backgroundColor: "olive" }}>

After a while I found what's going on in my case. Thank you everyone for comment. All of these comments were right about the safe area and its usage. But in my case the problem was in my _layout.tsx file in App directory. In this file there is located Stack by default. What caused the "double" safe area was that the first safe area was created by header of Stack. To fix this issue I simply hide this header like this:

<Stack screenOptions={{ headerShown: false }}> 

After hiding the header, the safe area that was created by me is on the right place and I can customize it.