React Navigation header not hiding - javascript

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.

Related

React Native not passing data through navigation param

I'm trying to pass some data when navigating to another screen, but it's not working. It navigates to the screen but the data is undefined.
I have this button on the 'Produto' Screen:
onPress={() => {
props.navigation.navigate("Login", {
test: "This is just a test"
});
}}
Login Screen:
const LoginScreen = props => {
const test = props.navigation.getParam("test");
console.log(test);
test is undefined.
My Navigator (I removed imports and other stuff from this snippet):
const MainNavigator = createStackNavigator(
{
Home: HomeScreen,
Produto: ProdutoScreen,
},
{
initialRouteName: "Home"
}
);
const LoginNavigator = createStackNavigator(
{
Login: LoginScreen
}
);
const DrawerNavigator = createDrawerNavigator(
{
Main: {
screen: MainNavigator
},
Login: {
screen: LoginNavigator
}
}
);
const SwitchNavigator = createSwitchNavigator({
Start: StartScreen,
Home: DrawerNavigator
});
Just update the line where you are trying to access the param. Like this,
const LoginScreen = props => {
const test = props.navigation.state.params.test;
console.log(test);
}
Just do this
const MainNavigator = createStackNavigator(
{
Home: HomeScreen,
Produto: ProdutoScreen,
Login: LoginScreen, //this will resolve your issue
},
{
initialRouteName: "Home"
}
);

How to navigate without a nest navigation

I use react-navigation stackNavigator for my native router. The simply path is LoginRouter -> DashboardRouter -> AddressRouter, map tree here.
// LoginRouter.js
const LoginRouter = createStackNavigator(
{
Login: Login,
Register: Register,
Dashboard: DashboardRouter
},
{
initialRouteName: "Login"
}
);
// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
{
MessageRouter: MessageRouter,
AddressRouter: AddressRouter,
},
{
...
}
);
// AddressRouter.js
const AddressRouter = createStackNavigator(
{
// these all navigator will become a nested navigation
Address: Address,
UserAdd: UserAdd,
UserGroup: UserGroup
},
{
initialRouteName: "Address"
}
);
If I want to let the AddressRouter navigate without a nest navigation, how do I change this code?
PS
The navigate work fine when I extract the AddressRouter to the LoginRouter.
// LoginRouter.js
const LoginRouter = createStackNavigator(
{
Login: Login,
Register: Register,
Dashboard: DashboardRouter,
Address: Address,
UserAdd: UserAdd,
UserGroup: UserGroup
},
{
initialRouteName: "Login"
}
);
// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
{
MessageRouter: MessageRouter,
AddressRouter: AddressRouter,
},
{
...
}
);
If I got your question right, what you can do is create another navigator as a root navigator (another StackNavigator or SwitchNavigator) and include your LoginRouter, AddressRouter there.
Something like this, maybe?
const rootNavigator = createSwitchNavigator(
{
LoginRouter: {
screen: LoginRouter,
},
AddressRouter: {
screen: AddressRouter,
}
},
{
headerMode: "none",
mode: "modal",
initialRouteName: "LoginRouter"
}
);
This is just a example to give you an idea on how you could also implement your router.

Set no header for all components React-Native

I have 4 components which all have static navigationOptions = {header: null} defined.
But that it's very time-consuming when you define that in each component.
So I define {header: null} in createStackNavigator but the header still appears at the top of the component.
Can you guys help ?
import { createStackNavigator } from 'react-navigation';
import Home from './Components/Home';
import Main from './Components/Main';
import SubjectDetail from './Components/AnimalSubject';
import Lesson from "./Components/Lesson";
const App = createStackNavigator({
First: { screen: Home },
Second: { screen: Main },
Third: { screen: SubjectDetail },
Four: {screen: Lesson},
//Route name with specified component
},
{
transitionConfig: () => ({ screenInterpolator: () => null }),
//remove transition config
},
{
initialRouteName: 'First',
//the component name 'Home' will be initiated first
},
{
header: null
//defined header: nul
}
);
export default App;
my evironment
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.2.5",
"node": "v8.11.2"
"npm": "v6.1.0"
Probably this code should works for you (based on Stack navigator docs)
const App = createStackNavigator({
First: { screen: Home },
Second: { screen: Main },
Third: { screen: SubjectDetail },
Four: {screen: Lesson},
},
{
headerMode: 'none',
transitionConfig: () => ({ screenInterpolator: () => null }),
initialRouteName: 'First',
},
);
You should pass the object with routes as a first parameter and common options as second.

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'
});

Categories

Resources