Develop Reference

React Navigation header not hiding

I have a react project and I have two navigators, I'm trying to remove the navigation bar, I tried two ways but no success.
This is my App.js
const switchNavigator = createStackNavigator({
loginFlow: createStackNavigator({
Signin: {
screen: SigninScreen,
navigationOptions: {
headerShown: 'false'
}
},
Signup: {
screen: SignupScreen,
},
},
),
mainGrid: createStackNavigator({
Account: AccountScreen,
Bath: BathScreen,
Eco: EcoBath,
Electricity: ElectricityConsScreen,
Water: WaterConsumptionScreen,
Help: HelpScreen,
Parents: ParentsControlScreen
})
});
As you can see I tried o hide using the headerShown: 'false' I tried to change to 'hide' and doesn't seems to work. I tried to add separately like:
SigninScreen.navigationOptions = () => {
return{
header: () => false
};
};
But didn't worked too.
I tried to remove the arrow function and set like header: null and no success too.
What can I do about this?

if you are using react-navigation V5:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
else:
hide header for 1 screen:
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
navigationOptions: {
header: null,
},
},
})
or
export default class HomePage extends Component {
static navigationOptions = {
header: null
}
}
hide header for all screens:
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
},
},
{
navigationOptions: {
header: null,
},
})
Deprecation in 'navigationOptions': - 'header: null' will be removed
in a future version. Use 'headerShown: false' instead
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
navigationOptions: {
headerShown: false
},
},
})

I am using following in my code:
const AppStackNavigator = createStackNavigator ({
Home: HomePageScreen
},
{
headerMode: "none"
});
https://reactnavigation.org/docs/stack-navigator/#headermode

Mates I solved! I was using the Navigation v4.
The problem was here
const switchNavigator = createStackNavigator({
Then I swapped t
const switchNavigator = createSwitchNavigator({
And Added
SigninScreen.navigationOptions = () => {
return {
header: false
};
};
Now It's working like a charm, but all answers that you lads answered are correct. I used in the other versions. Thanks for your time lads.

I want to put a materialTopTabNavigator under the header echo with navigationOptions of a stack

I want to put the buttons under the header that I have made with the stack, but I can not think of how I leave a part of the code of how I have done it.
//stacks
import React from "react";
import { connect } from "react-redux";
import { createStackNavigator } from "react-navigation";
import ScreenAutoridades from "../../views/autoridades/ScreenAutoridades";
import DetallesAutoridades from "../../views/autoridades/autoridades/Components/DetallesAutoridades";
import AutoridadesList from "../../views/autoridades/autoridades/Components/AutoridadesList";
import ButtonMenu from "../components/ButtonMenu";
import ButtonHome from "../components/ButtonHome";
import { defaultNavigationOptions } from "../components/stylesNavigations";
let AutoridadesRedux = connect(state => ({
autoridades: state.autoridades
}))(ScreenAutoridades);
const AutoridadesStack = createStackNavigator(
{
AUTORIDADES: {
screen: AutoridadesRedux,
navigationOptions: ({ navigation }) => {
return {
headerLeft: <ButtonMenu navigation={navigation} />,
headerRight: <ButtonHome navigation={navigation} />
};
}
},
AutoridadesList: {
screen: AutoridadesList
},
DetalleAutoridades: {
screen: DetallesAutoridades
}
},
{
defaultNavigationOptions
}
);
export { AutoridadesStack };
//Drawer
const DrawerNavigator = createDrawerNavigator(
{
Diputados: { screen: DiputadosStack },
Bloques: { screen: BloquesStack },
Interbloques: { screen: InterBloquesStack },
Comisiones: { screen: ComisionesStack },
Autoridades: { screen: AutoridadesStack },
"Sesion En Vivo": { screen: SesionEnVivoStack },
"Diputados TV": { screen: DiputadosTVStack },
"Reglamentos HCDN": { screen: PDFReglamentosStack }
},
{
contentComponent: CustomDrawerContentComponent,
drawerWidth: width / 2,
contentOptions: {
activeTintColor: white,
activeBackgroundColor: Gris_Drawer,
inactiveTintColor: "rgb(105,105,104)",
itemsContainerStyle: {
textAlign: "center"
},
labelStyle: {
fontFamily: "RobotoCondensed-Regular",
fontWeight: "100",
fontSize: 17,
marginTop: 8,
marginLeft: 10
}
},
iconContainerStyle: {
opacity: 1
}
}
);
I just want to add the createMaterialTopTabNavigator below the header made with the createStackNavigator.
What I did was put a createMaterialTopTabNavigator but at the time of adding the stacks inside I stayed up the createMaterialTopTabNavigator and below I had the navigation of the stack

You can use a navigator for a screen in creating any navigator.
For example:
import {
createMaterialTopTabNavigator,
createStackNavigator
} from 'react-navigation'
import MyComponent from '../some-component-folder/'
import MyHomeComponent from '../some-component-folder/'
import MyNavigator from '../some-navigator-folder/'
const TabNavigator = createMaterialTopTabNavigator(
{
Tab1: { screen: MyComponent }
Tab2: { screen: MyNavigator }
}
)
const StackNavigator = createStackNavigator(
{
Screen1: { screen: MyHomeComponent }
Screen2: { screen: TabNavigator }
}
)

TabNavigator customize icon error in react-native

I'm using Xcode 10 & latest react-native version.
I created StackNavigator app with TabNavigator.
Code: navigation.js Class
import React from "react";
import { TabNavigator, StyleSheet, Text, View, Image} from "react-navigation";
import Dashboard from '.././Screen/Dashboard'
import Home from '.././Screen/Home'
import Events from '.././Screen/Events'
import Settings from '.././Screen/Settings'
export default Tab = TabNavigator({
Home: {
screen: Home,
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.png')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
},
},
Events: {
screen: Events,
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: '#f2f2f2',
activeBackgroundColor: "#2EC4B6",
inactiveTintColor: '#666',
labelStyle: {
fontSize: 16,
padding:4,
}
}
});
But i got error here,
[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of TabBarIcon.
If i remove this line:
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.jpeg')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
then its working perfectly without icon.
i searched everything but don't find solution.

Please try this ( assuming u r creating a bottom navigator and you have latest react navigation )
import { createBottomTabNavigator } from 'react-navigation';
export default createBottomTabNavigator({
Home: {
screen: Home,
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.png')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
},
},
Events: {
screen: Events,
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: '#f2f2f2',
activeBackgroundColor: "#2EC4B6",
inactiveTintColor: '#666',
labelStyle: {
fontSize: 16,
padding:4,
}
}
});

React navigation tabBarVisible: false not working for StackNavigator inside TabNavigator

I am totally confused to achieve something like below, this is working fine but can't hide tab bar for EditPage and PageTwo
Login
SignUp
TabNavigator(TabNavigator)
FirstTab
SecondTab(StackNavigator)
ListPage
EditPage
ThirdTab(StackNavigator)
PageOne
PageTwo
Settings
Below is my configuration for it.
import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
//Other required imports here
const SignedOut = createStackNavigator({
Signup: { screen : Signup},
Login: { screen : Login}
});
const SignedIn = createBottomTabNavigator({
Dashboard: {
screen: Dashboard
},
Rewards: {
screen: createStackNavigator({
Rewards:{
screen: Rewards,
navigationOptions:{
header:null
}
},
AddReward:{
screen: AddReward,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
},
Activities: {
screen: createStackNavigator({
Rewards:{
screen: Activities,
navigationOptions:{
header:null
}
},
NewActivity:{
screen: NewActivity,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
},
Settings: {
screen: Settings
}
},{
tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
});
export const createRootNavigator = (signedIn) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
headerMode: 'none'
}
);
};
Problems
I can't hide tab bar for AddReward and NewActivity
tabBarVisible: false not working for StackNavigator inside TabNavigator
Thanks

You could use one StackNavigator with all your stacks, and set the TabNavigator as default route :
SwitchNavigator
Login
SignUp
StackNavigator
TabNavigator
FirstTab
ListPage
Settings
EditPage
PageTwo

The problem is that your screens (Rewards and AddRewards are inside a Stack Navigator)
OLD:
Rewards: {
screen: createStackNavigator({
Rewards:{
screen: Rewards,
navigationOptions:{
header:null
}
},
AddReward:{
screen: AddReward,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
}
FIX:
Rewards: {
screen: createStackNavigator({
Rewards,
AddReward,
}),
navigationOptions:{
header:null,
tabBarVisible: false
}
}

More details are found on the official document, Tested working with v 3.0.9:
A tab navigator contains a stack and you want to hide the tab bar on specific screens
modified code from:
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileScreen,
});
const AppNavigator = createSwitchNavigator({
Auth: AuthScreen,
Home: TabNavigator,
});
To:
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
/* any other route you want to render under the tab bar */
});
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileScreen,
});
const HomeStack = createStackNavigator({
Tabs: TabNavigator,
Details: DetailsScreen,
/* any other route you want to render above the tab bar */
});
const AppNavigator = createSwitchNavigator({
Auth: AuthScreen,
Home: HomeStack,
});
Additionally, in this example, FeedScreen will have two headers: one from FeedStack and the other from HomeStack. To solve this problem, one solution is to set default header height of HomeStack to 0 and override height in DetailsScreen. Below is an example:
const HomeStack = createStackNavigator(
{
Tabs: TabNavigator,
Details: DetailsScreen,
/* any other route you want to render above the tab bar */
},
{
initialRouteName: 'Tabs',
defaultNavigationOptions: {
headerStyle: { height: 0, },
headerForceInset: { top: 'never', bottom: 'never' },
},
},
);
The other solution is:
A stack contains a tab navigator and you want to set the title on the stack header
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileStack,
});
TabNavigator.navigationOptions = {
// Hide the header from AppNavigator stack
header: null,
};
Well, for me these solutions are kind of tricky.
Anyway, it works.

React Navigation v5:
https://www.youtube.com/watch?v=sH6OqX6ANeE
This solved my problem.

In Tab.Screen options, just use the tabBarStyle: {display: none}.
Ex:
<Tab.Screen name="About Screen" component={TabAboutScreen}
options={{
tabBarLabel:"About",
tabBarStyle: { display: 'none' },
}}
/>

Jumping between different navigators in react native using react-navigation

I have 3 Navigators. The MainNavigator is the root of the other two (Auth and Activities). Based on whether the user has successfully logged in, I need to route the user from the Auth Stack to the Activities stack. How can I do that? I can't seem to figure this out just yet (new to react-native, coming from Angular).
Here's the line of code that I use to navigate to the Activities stack:
this.props.navigation.navigate('Activities');
Auth:
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
Activities:
export const ActivitiesNavigator = TabNavigator({
ActivityList: {
screen: ActivityList
},
MyActivityList: {
screen: MyActivityList
},
CreateActivity: {
screen: CreateActivity
}
}, {
initialRouteName: 'ActivityList'
});
Main Navigator:
export const MainNavigator = StackNavigator({
Auth: { screen: AuthNavigator},
Activities: { screen: ActivitiesNavigator },
}, {
initialRouteName: 'Auth',
headerMode: 'none',
animationEnabled: 'true'
});

This actually works. Lack of sleep made me put the 'navigate' command in a different method. So in my App.js file I just need to return the MainNavigator and I'm good to go:
render() {
return (
<MainNavigator/>
);
}

Visit StackActions reset :
The reset action wipes the whole navigation state and replaces it with the result of several actions.
In Latest react-navigation version: 3.3.0, I have used: at Signup or Login so that to start Home/Main Flow
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
key: null, // <-this is imp.
actions: [
NavigationActions.navigate({ routeName: 'Main' })
],
});
this.props.navigation.dispatch(resetAction);
Remember: Adding key: null means master route will be null and not on any route. So we are free to navigate to the route in any Nested Stacks
key - string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.

YOU DON'T NEED 3 Navigators. this is the way to do it with React Navigation
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
},
Main: {
screen: ActivitiesNavigator
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});