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'
});
Related
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 have a screen nested in a navigator which is inside a navigator.
const AppNavigator = createSwitchNavigator({
AuthLoading,
MainNavigator,
AuthNavigator
},
{
initialRouteName: 'AuthLoading'
});
const AuthNavigator = createStackNavigator({
VerificationNavigator,
OtpVerificationStack
},
{
initialRouteName: 'VerificationNavigator',
header: null,
headerMode: 'none'
});
AppNavigator loads AuthNavigator first, then from VerificationNavigator(second screen) I navigate to OtpVerificationStack using navigation props.
const OtpVerificationStack = createSwitchNavigator({
OTPLoading,
SignupNavigator,
MainNavigator
},
{
initialRouteName: 'OTPLoading',
});
In OtpVerificationStack the flow SignupNavigator loads first.
const SignupNavigator = createStackNavigator({
FirstName,
LastName,
Email
},
{
header: null,
headerMode: 'none'
});
The Screen FirstName consists of a google login, after successful login I want to go to MainNavigator or it's screen 'Home'.
I tried
const resetAction = StackActions.reset({
index: 0,
key: OtpVerificationStack,
actions: [
NavigationActions.navigate({ routeName: 'Home' })
]
});
this.props.navigation.dispatch(resetAction);
But this does not seem to work. It does nothing!
EDIT: I tried setting token in asyncstorage and in the OTPLoadingscreen checked for a token. So in essence, I had to reset it back to OTPVerificationStack which I could do by keeping key: null but I don't know if that is a good method to follow.
I too faced this kind of issue and solved by this flow.
You can reset stacknavigator, when you are in the flow.
Stack1:
screen1
screen2
screen3...
Flow screen1->screen2->screen3 (Now if you want to reset it will work).
When you want to reset stack1 and navigate to stack2 initial screen, try the following:
navigateToStack(stackName,routeName,params){
const navigateAction = NavigationActions.navigate({
routeName: stackName,
action: NavigationActions.navigate({
routeName: routeName,
params: params,
})
});
this.props.navigation.dispatch(navigateAction);
}
You just provide stackname,screen routename correctly.It will automatically go to home.
this.navigateToStack(MainTab,home,{item:item}):
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.
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.
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' },
}}
/>