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. 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.
Please login or Register to submit your answer