Develop Reference

TabNavigator inside StackNavigator - React Native

I am trying to place a TabNavogator inside a StackNavigator and it is complaining that it has to be a react component.
I have attached the code and the error screen shot.
Once I pass login screen I want tabs, so in Login.js on click of a button I am moving to Tabs but I think the problem is in router.js where I might have been doing it wrong.
It would be very helpful if you could suggest how to correct it
Thanks
R
router.js
import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Login from '../../scripts/components/pages/Login';
import WalkThrough from '../../scripts/components/pages/WalkThrough';
import Transactions from '../../scripts/components/pages/Transactions';
import UserProfile from '../../scripts/components/pages/UserProfile';
export const Root = StackNavigator({
WalkThrough: {
screen: WalkThrough,
navigationOptions:{
title: 'WalkThrough',
},
},
Login:{
screen: Login,
navigationOptions: {
title: 'Login',
},
},
Tabs: {
screen: Tabs,
},
}, {
mode: 'modal',
headerMode: 'screen',
});
export const Tabs = TabNavigator({
Transactions: {
screen: Transactions,
navigationOptions: {
tabBarLabel: 'Transactions',
tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
},
},
Profile: {
screen: UserProfile,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
},
},
});
index.js
import React, {Component} from 'react';
import {Root} from './config/router';
class App extends Component{
render(){
return <Root/>;
}
}
export default App;
Main index.js (FYI)
import { AppRegistry } from 'react-native';
import app from './app/index';
AppRegistry.registerComponent('DoPayRetail', () => app);
And from Login screen I want to move to Tabs.
Login.js
import React, {Component} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
class Login extends Component{
goToNext = () => {
this.props.navigation.navigate('Tabs');
};
render(){
const {navigate } = this.props.navigation;
return (
<View style = {styles.container}>
<Text> Login screen
</Text>
<Button
onPress={this.goToNext}
title="Go to next page"
color="#841584"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default Login;
This is my error message

In router.js, place the declaration and initialization of the Tabs variable above Root's initialization. You are currently using variable before declaring it. I think that should fix the issue.

If you create the StackNavigator in the same page as a React component (your Tabs TabsNavigator) this error will show up. Try moving out Tabs to it's own file.

TypeError: undefined is not an object (evaluating this.props.navigation.navigate) in react native

I have just started with React Native. Here is the code
app.js
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import Splash from "./screens/splash";
import Home from "./screens/home";
import Card from "./screens/card";
export const RootNavigator = StackNavigator({
Home: {
screen: Home,
navigationOptions: {
header: null,
},
},
Profile: {
screen: Profile,
navigationOptions: {
headerTitle: 'Profile',
},
},
Card: {
screen: Card,
navigationOptions: {
header: null,
},
},
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = { showSplash: true };
// after 1200ms change showSplash property for spalsh screen
setTimeout(() => {
this.setState(previousState => {
return { showSplash: false };
});
}, 1200);
}
render() {
if (this.state.showSplash) {
return (<Splash />);
} else {
return (<RootNavigator />);
}
}
}
In the home.js I am using card component directly like this
<ScrollView>
{
this.state.cards.map((data, index) => {
return (
<Card key={data.id} cardData={data} />
);
})
}
and here is the card.js
import React, { Component } from 'react';
import { Button, View, Text, Image } from 'react-native';
export default class Card extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View>
<View style={{ flex: 0.30 }}>
<Image source={{ uri: this.props.cardData.imgUrl }} style={{ height: 100 }} />
</View>
<View style={{ flex: 0.70, backgroundColor: 'steelblue' }}>
<Text >{this.props.cardData.name}</Text>
<Text >{this.props.cardData.imgUrl}</Text>
<Button
onPress={() => this.props.navigation.navigate('Profile', {})}
title="Profile"
/>
</View>
</View>
);
}
}
Now if I use
const { navigate } = this.props.navigation;
in the profile.js it works but in case of card.js it is showing
TypeError : undefined is not an object (evaluating 'this.props.navigation.navigate')
This question is asked many times and tried all the solutions provided by the answers, but none of the answers helped.
What could be this possible issue? Is this because I am using <Card> in the Home component

If I understood correctly, Card component in your home.js screen is component in card.js.
Because you are using Card component directly in home.js (not navigating to it with react-navigation), navigation prop is not being injected. If you want your current code to work, you should pass navigation prop to your card component from profile.js
const { navigation } = this.props;
...
<ScrollView>
{
this.state.cards.map((data, index) => {
return (
<Card navigation={navigation} key={data.id} cardData={data} />
);
})
}
</ScrollView>
Most probably, you are opening your profile.js screen with this.props.navigation.navigate('Profile'), so it is working fine there.

How to navigate from one screen to another scree in react native>?

Explanation: I have working with react native in android.I started with the login screen and pass the parameter to another screen using API success call.i used a StackNavigation to navigate the screen. After successful login it will move to another screen with parameter.
Issue: API call is success but the navigation screen is not changed. fire an error like undefined is not a function (evaluating '_this.props.navigator('SecondScreen')')
I have post my all code over here.
index.android.js
// This is the entry point of an application. It will cal the first App.js.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import App from './src/components/App';
import SecondScreen from './src/components/SecondScreen';
import {StackNavigator} from 'react-navigation';
export default class reactNavigationSample extends Component{
render(){
const {navigation} =this.props;
return(
<App navigation ={navigation}/>
);
}
}
const SampleApp = StackNavigator({
Home:{screen:App},
SecondScreen:{screen: SecondScreen}
});
AppRegistry.registerComponent('AwesomeProject', () => SampleApp);
App.js
// This file have a UI which is two TextInput and Button. When i click on button it will call the login method and the login method will call the API with the possible credentials of the login API. After successfull login it should move to another screen.
export default class App extends Component{
static navigationOptions ={
title : 'Home Screen',
}
constructor(props){
super(props);
navigate = props.navigation,
this.state={email:'',password:'',device_token:'',device_type:''};
}
login = () => {
fetch('http://span.mobiosolutions.com/api/v1/login',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify({
email: this.state.username,
password: this.state.password,
device_token: 'aajdflkajdjfajdflkj',
device_type: '1'
})
})
.then((response) => response.json())
.then((res) => {
if(res.statusCode === 1){
console.log(res);
var username=res.message;
AsyncStorage.setItem('username',username);
this.props.navigator('SecondScreen')
}else{
alert(res.message);
}
})
.done();
}
render(){
const {navigate} = this.props.navigation;
return(
<View style={styles.container}>
<Image source={require('../img/background.jpg')} style={styles.backgroundImage}>
<View style={styles.content}>
<Text style={styles.logo}>- NATIVE -</Text>
<View style={styles.inputContainer}>
<TextInput underlineColorAndroid='transparent' style={styles.input}
onChangeText={(username) => this.setState({username})}
value={this.state.username}
placeholder='username' />
<TextInput secureTextEntry={true} underlineColorAndroid='transparent' style={styles.input}
onChangeText={(password) => this.setState({password})}
value={this.state.password} placeholder='password'/>
{/*<Button*/}
{/*onPress={() => navigate('SecondScreen')}*/}
{/*title="Login"/>*/}
<Button
onPress={this.login}
title="Login"/>
</View>
</View>
</Image>
</View>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF',
},
backgroundImage:{
flex:1,
alignSelf:'stretch',
width:null,
justifyContent:'center',
},
welcome:{
fontSize:20,
textAlign:'center',
margin:10,
},
instructions:{
textAlign:'center',
color:'#333333',
marginBottom:5,
},
content:{
alignItems:'center',
},
logo:{
color:'white',
fontSize:40,
fontStyle:'italic',
fontWeight:'bold',
textShadowColor:'#252525',
textShadowOffset:{width:2,height:2},
textShadowRadius:15,
marginBottom:20,
},
inputContainer:{
margin:20,
marginBottom:0,
padding:20,
paddingBottom:10,
alignSelf:'stretch',
borderWidth:1,
borderColor:'#fff',
backgroundColor:'rgba(255,255,255,0.2)',
},
input:{
fontSize:16,
height:40,
padding:10,
marginBottom:10,
backgroundColor:'rgba(255,255,255,1)',
},
});
SecondScreen.js
const SecondScreen = () => {
return(
<View style={styles.container}>
<Text style={styles.welcome}>
THIS IS THE SECOND SCREEN.
</Text>
</View>
);
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF',
},
welcome:{
fontSize:20,
textAlign:'center',
margin:10,
},
instructions:{
textAlign:'center',
color:'#333333',
marginBottom:5,
},
});
SecondScreen.navigationOptions ={
title: 'Second Screen Title'
}
export default SecondScreen
Please help me solved out this issue in React Native. Thank you in advance.

There is a typo in the line in App.js
this.props.navigator('SecondScreen')
It should be
this.props.navigation.navigate('SecondScreen')

Navigate user to New Screen on listitem click React native

I am trying to navigate user to next screen when user click on list item. I am trying to make use of Navigator in this , i am newbie to react , there is Redux and Flux two different architecture as i am not every much good in react so i am little confuse with there working.We can navigate user by using Navigator and also by using Action. Here is my class :-
ERROR i am Getting is :- undefined is not a function(evaluating '_this4.goDetailPage(rowData)')
Today.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
import {FeedStack} from './movielistdeatilrouter';
export default class TodayView extends Component {
constructor(props , context) {
super(props , context);
}
render() {
return (
<FeedStack />
);
}
}
movielistdeatilrouter.js : -
import React from 'react';
import {StackNavigator } from 'react-navigation';
import MovieDeatilScreen from './MovieDeatilScreen';
import Movielisting from './movielisting';
export const FeedStack = StackNavigator({
Movielisting: {
screen: Movielisting,
navigationOptions: {
title: 'Movielisting',
},
},
MovieDeatilScreen: {
screen: MovieDeatilScreen,
navigationOptions: ({ navigation }) => ({
title: 'MovieDeatilScreen',
}),
},
});
movielistiing.js :-
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation';
import { Actions, ActionConst } from 'react-native-router-flux';
import home from '../images/home.png';
import MovieDeatilScreen from './MovieDeatilScreen'
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
import {
StyleSheet,
Text,
Image,
View,
AsyncStorage,
TouchableOpacity,
TouchableHighlight,
Dimensions,
ListView
} from 'react-native';
const uri = 'http://csswrap.com/wp-content/uploads/2015/03/showmenu.png';
export default class Movielisting extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
moviesData: ds.cloneWithRows([]),
};
}
componentDidMount() {
this.fetchMoviesData();
}
fetchMoviesData() {
var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=17e62b78e65bd6b35f038505c1eec409';
fetch(url)
.then(response => response.json())
.then(jsonData => {
this.setState({
moviesData: this.state.moviesData.cloneWithRows(jsonData.results),
});
})
.catch( error => console.log('Error fetching: ' + error) );
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
</View>
);
}
renderRow(rowData){
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={() => this.goDeatilPage(rowData)}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</TouchableOpacity>
</View>
);
}
goDeatilPage = (rowData) => {
alert('hi');
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
this.props.navigation.navigate('MovieDeatilScreen');
};
}
const styles = StyleSheet.create({
container: {
position:'relative',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},action: {
flex: 0.4,
},thumb: {
backgroundColor: '#ffffff',
marginBottom: 5,
elevation: 1
},
img: {
height: 300
},
txt: {
margin: 10,
fontSize: 16,
textAlign: 'left'
},ListViewcontainer:{
marginTop:50,
bottom: 50,
}
});
Index.android.js :-
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
StatusBar,
View
} from 'react-native';
import App from './app';
import DrawerMenu from './Drawer/drawer-toolbar-android';
import BookmarkView from './Pages/bookmark';
import CalendarView from './Pages/calendar';
import ClientView from './Pages/client';
import InfoView from './Pages/info';
import SettingsView from './Pages/setting';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
const stackNavigator = StackNavigator({
Info: { screen: InfoView },
Settings: {screen: SettingsView },
Bookmark: {screen: BookmarkView },
Calendar: {screen: CalendarView},
Client: {screen: ClientView},
}, {
headerMode: 'none'
});
const easyRNRoute = DrawerNavigator({
Home: {
screen: App,
},
Stack: {
screen: stackNavigator
}
}, {
contentComponent: DrawerMenu,
contentOptions: {
activeTintColor: '#e91e63',
style: {
flex: 1,
paddingTop: 15,
}
}
});
AppRegistry.registerComponent('flightbot', () => easyRNRoute);
App.js class :-
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
StatusBar,
View
} from 'react-native';
import { Navigator, NativeModules } from 'react-native';
import { COLOR, ThemeProvider } from 'react-native-material-ui';
import { Toolbar, BottomNavigation, Icon } from 'react-native-material-ui';
import Container from './Container';
import { TabRouter } from 'react-navigation';
import TodayView from './Contents/today';
import ProfileView from './Contents/profile';
import MapView from './Contents/map';
import ChatView from './Contents/chat';
const uiTheme = {
palette: {
primaryColor: COLOR.green500,
accentColor: COLOR.pink500,
},
toolbar: {
container: {
height: 70,
paddingTop: 20
}
}
}
const TabRoute = TabRouter({
Today: { screen: TodayView },
Profile: { screen: ProfileView },
Map: { screen: MapView },
Chat: {screen: ChatView}
}, {
initialRouteName: 'Today',
}
);
class TabContentNavigator extends Component {
constructor(props, context) {
super(props, context);
this.state = {
active: props.value.active,
};
}
//this method will not get called first time
componentWillReceiveProps(newProps){
this.setState({
active: newProps.value.active,
});
}
render() {
const Component = TabRoute.getComponentForRouteName(this.state.active);
return <Component/>;
}
}
export default class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
active: 'Today',
};
}
static navigationOptions = {
title: 'Menu',
};
navigate() {
this.props.navigation.navigate('DrawerOpen'); // open drawer
}
render() {
return (
<ThemeProvider uiTheme={uiTheme}>
<Container>
<StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent />
<Toolbar
leftElement="menu"
centerElement={this.state.active}
onLeftElementPress={() => this.navigate()}
/>
<TabContentNavigator value={this.state} key={this.state} />
<BottomNavigation active={this.state.active}
hidden={false}
style={{ container: { position: 'absolute', bottom: 0, left: 0, right: 0 } }}
>
<BottomNavigation.Action
key="Today"
icon="today"
label="Today"
onPress={() => this.setState({ active: 'Today' })}
/>
<BottomNavigation.Action
key="Profile"
icon="person"
label="Profile"
onPress={() => {
this.setState({ active: 'Profile' });
}}
/>
<BottomNavigation.Action
key="Map"
icon="map"
label="Map"
onPress={() => this.setState({ active: 'Map' })}
/>
<BottomNavigation.Action
key="Chat"
icon="chat"
label="Chat"
onPress={() => this.setState({ active: 'Chat' })}
/>
</BottomNavigation>
</Container>
</ThemeProvider>
);
}
}
i am trying my level best to solve this , its almost 3 days today i am looking for solution that how i can do this , i just want to open a new Screen on click on list item. Can any one tell me how to do that.I will be very Grateful if some one let me know the way to navigate to next screen.
ScreenShot of my Error :-
Thanks!!!

Using "React Navigation" should help you to do the trick.
For more information, you can find it here: https://reactnavigation.org
Cheers,
====== UPDATE ======
I believe the way you set up the Today component is incorrect, and also your question is unclear, it took me a while to understand what you're wanting to do.
Anyway, Today component should be a StackNavigator if you want to open a detail screen from it, and it will control 2 screens (ListScreen and DetailScreen):
const TodayView = StackNavigator({
List: {
screen: ListScreen,
},
Detail: {
screen: DetailScreen,
},
});
Then setup your screens like this:
class ListScreen extends Component {
static navigationOptions = {
title: 'List',
}
constructor(props , context) {
super(props , context);
this.goToDetailScreen = this.goToDetailScreen.bind(this);
}
goToDetailScreen() {
this.props.navigation.navigate('Detail');
}
render() {
return (
<TouchableOpacity onPress={() => this.goToDetailScreen()}>
<Text>GO TO DETAIL</Text>
</TouchableOpacity>
);
}
}
class DetailScreen extends Component {
static navigationOptions = {
title: 'Detail',
}
render() {
return (
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text>BACK TO LIST SCREEN</Text>
</TouchableOpacity>
);
}
}
There is an example calling "StacksInTabs" in their Github repo, that you might want to take a look at it: https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js
Cheers,

Finally it works , this is how i do following change in code . :-
<View style={styles.container}>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow.bind(this)}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
</View>
I just added .bind(this) function to renderRow.
Rest is Same :-
renderRow(rowData){
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={()=>this.goDeatilPage(rowData)}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</TouchableOpacity>
</View>
);
}
goDeatilPage = (rowData) => {
alert('hi');
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
this.props.navigation.navigate('MovieDeatilScreen');
}
Thanks #Goon for your Time i highly Appreciate your effort. Thank you Brother.

Use React Navigation for navigate screen, it is very Easy-to-Use,
Create 3 class in react native
defined navigator class
2.first screen
3.navigate screen
1.Basic.js
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: Movielistiing},
Detail: {screen: Movielistdeatilrouter},
});
module.exports = BasicApp;
2.Movielistiing.js
class Movielistiing extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to movie detail"
onPress={() =>
navigate('Detail', { name: 'Jane' })
}
/>
);
}
}
3.Movielistdeatilrouter.js
class Movielistdeatilrouter extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}

How to hide toolbar in react navigation

I want to know how to hide toolbar which is being added by default after implementation of react-navigation https://reactnavigation.org/
I have two screens - Launcher screen where I do not want a toolbar and 2nd screen where it is OK to have toolbar.
index.android.js
/**
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotification";
class SplashScreen extends Component {
render() {
console.disableYellowBox = true;
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require("./img/talk_people.png")} />
<Text style={{ fontSize: 22, textAlign: "center" }}>
Never forget to stay in touch with the people that matter to you.
</Text>
<View style={{ width: 240, marginTop: 30 }}>
<Button
title="CONTINUE"
color="#FE434C"
onPress={() => navigate("EnableNotification")}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#FFFFFF",
alignItems: "center",
justifyContent: "center",
padding: 16,
flex: 1,
flexDirection: "column"
}
});
const ScheduledApp = StackNavigator(
{
Splash: { screen: SplashScreen },
EnableNotification: { screen: EnableNotificationScreen }
},
{
initialRouteName: "Splash"
}
);
AppRegistry.registerComponent("Scheduled", () => ScheduledApp);
EnableNotification.js
/**
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from "react";
import { View, Text } from "react-native";
export default class EnableNotificationScreen extends Component {
render() {
return <View><Text>Enable Notification</Text></View>;
}
}

static navigationOptions = {
header: null ,
};
this works for me
class SplashScreen extends Component {
static navigationOptions = {
header: null ,
};
render() {
console.disableYellowBox = true;
const { navigate } = this.props.navigation;
return (
...
);
}
}

To hide header for only one screen do this in createStackNavigator function:
const Navigation= createStackNavigator({
Splash: {
screen:SplashScreen,
navigationOptions: {
header:null // this will do your task
}
},
Dashboard:{screen:Dashboard}
}
);
To hide header(toolbar) for all screen of createStackNavigator
add
{
headerMode:'none'
}
inside createStackNavigator. like this:
const Navigation= createStackNavigator({
Splash: {
screen:SplashScreen
},
Dashboard:{screen:Dashboard}
}
,{
headerMode:'none'
}
);
Note : I am using createStackNavigator which may be StackNavigator for others. So if you are using StackNavigator do all this changes as i did in createStackNavigator

All the answers I could find were from React navigation v4 for some reason, which doesn't work in v5. After spending some time on it I figured out a way to hide toolbar in v5. Here it is:
import { createStackNavigator } from "#react-navigation/stack";
import { NavigationContainer } from "#react-navigation/native";
...
const Stack = createStackNavigator();
....
//and inside render
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: "Home",
headerShown: false,
}}
/>
}
headerShown: false, this will do the trick

For anyone who ended up here, I believe the most up-to-date answer for disabling the header for the entire app looks like this:
export const Navigator = createStackNavigator({
Register: { screen: Register },
Login: { screen: Login },
},{
headerMode: 'none',
initialRouteName: 'Register',
})
note that now it's headerMode: 'none'. I tried header: null to no avail.

In order to hide toolbar you can try below code:
const ScheduledApp = StackNavigator(
{
Splash: { screen: SplashScreen,
navigationOptions: {
header: {
visible: false
}
}
}
},
EnableNotification: { screen: EnableNotificationScreen,
navigationOptions: {
header: {
visible: true
}
}
}
},
{
initialRouteName: "Splash"
}
);
Cheers :)

Check release notes, it's header: null, not header: { visible: false }. It was a breaking change.
you can check on this link https://github.com/react-navigation/react-navigation/issues/1275#issuecomment-297718049