Rendered content behind the Statusbar

Question

I’m taking a course where the app screen should be this way, with the component at the top not exceeding the layout limit:

But in my code it was like this:

You can see until the icon has been cut.

Follow the code of App.js, which is the same as the course.

import React from 'react';
import { View } from 'react-native';

import Topo from './componentes/Topo';
import Texto from './componentes/Texto';
import Cards from './componentes/Cards';

export default function App () { 
return (
  <View>
    <Topo />
    <Texto />
    <Cards />
  </View>
);
}

The code of the component (Topo) index js.:

import React from 'react';
import { View, Text, Image } from 'react-native';
import estilo from './estilo'
import churrasco from '../../assets/churrasco.png';

export default function Topo() {
  return (
    <View style={estilo.box}>
      <Image style={estilo.boxIcone} source = { churrasco } />

      <View>
        <Text style={estilo.boxTitulo}>Churrasco em casa</Text>
        <Text style={estilo.boxSubtitulo}>Calculando a comida e a bebida</Text>
      </View>
    </View>
  )
}

I think maybe it can be the version, since this course should have a little bit of time.

Can you enlighten me as to why this happens? And what is the solution?

Answer 1

At the beginning of a course on React Native, I had a similar problem, even following the tutorial the top part was cutting, at first I put only one marginTop: 20, then I realized the problem is StatusBar, I think in previous versions it was already automatic, now you have to call it.

You can put a marginTop in the view:

<View style={estilo.box, {marginTop: 20}}>
      <Image style={estilo.boxIcone} source = { churrasco } />
  <View>
    <Text style={estilo.boxTitulo}>Churrasco em casa</Text>
    <Text style={estilo.boxSubtitulo}>Calculando a comida e a bebida</Text>
  </View>
</View>

OR

You can put the Statusbar in App.js, I advise you to do this: (Remember to put (<> </>) at the beginning and end of the Return)

import React, { useState } from "react";
import { StatusBar } from "react-native";
import Routes from "./src/routes/routes";

export default function App({ navigation }) {
  return (
    <>
      <StatusBar barStyle="light-content" backgroundColor="#3e91e4" />
      <Routes />
    </>
  );
}

Answer 2

The problem is that your screen is not considering the size of StatusBar.

For example, when the StatusBar is with the property translucent defined the application will be rendered behind it, which may be useful in some situations, but is a problem in your case.

To resolve you can render the <StatusBar /> the appropriate component, but without defining the ownership translucent. Note that even if you render the <StatusBar /> in various components, React Native will consider the last rendered.

<StatusBar backgroundColor='#fff' barStyle='dark-content' />

^{If you are using the Expo, use the expo-status-bar.}

Another option is to make use of SafeAreaView as root of its component rather than a View. The operation is the same as View, however the SafeAreaView takes into consideration some details (such as StatusBar, navigation bars, tab etc.) and adds a padding:

<SafeAreaView>
  {/* componentes */}
</SafeAreaView>

^{There is also the React-Native-safe-area-context. If you are using the Expo, see here}

Note that it is preferable to use SafeAreaView instead of you putting a manual style because the available screen size varies according to the device and also OS (Android / iOS).

Answer 3

Oops, good night. As far as I can tell, your question is about the header that cuts your Component, right? You can hide the same, but note that the implementation depends on the version of Navigator stack who are using.

From version 5 you can do the following:

<Stack.Navigator
 screenOptions={{
   headerShown: false 
  }}>
 <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator> 

In case you’re doubtful just tell me, I’ll try to explain it better to you.