Garmaine Staff asked 2 years ago

I'm new at React-nativ. And I cant solve problem.When I tried to hide a stack-navigator header and use :

 Home :{
        screen: Home,
        navigationOptions: {
            headerShown: false,
            title: 'NO TITLE'

        }
    }

and after this content of Home, which is a simple Text inside View go to statusbar. enter image description here I think that is only CSS problem but i dont understand how it fix. I attach my code below.

App.js :

import 'react-native-gesture-handler';
import * as React from 'react';
//import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet, Text, View } from 'react-native';
import Navigator from './routes/homeStack'

export default function App() {
  return (

    <Navigator />
  );
}

homeStack.js :

import {createStackNavigator} from 'react-navigation-stack'
import {createAppContainer} from 'react-navigation'
import Home from '../components/Home'
import ReviewDetails from '../components/ReviewDetails'

const screens = {
    Home :{
        screen: Home,
        navigationOptions: {
            headerShown: false,
            title: 'NO TITLE'

        }
    },
    ReviewDetails :{
        screen: ReviewDetails
    }

}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

Home.js :

import React,{useState} from 'react';
import { TextInput, View, Button, Text } from 'react-native' 

const Home = props => {

    const [enteredGoal,setEnteredGoal] = useState('');

    const  goalInputHandler = (enteredText) => {
        setEnteredGoal(enteredText);
    }

    return(
        <View >
            <Text>HOME PAGE</Text>
        </View>
    )
}



export default Home;

I understand that solve of this problem is add a padding to content but for me it hotfix not a bugfix. How to say for app dont use a space of Android statusbar.