const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
},
WelcomeScreen: {
screen: WelcomeScreen
},
HomeScreen: {
screen: HomeScreen
}
}, {
initialRouteName: "HomeScreen",
},
);
what ever i rendered as initial page , some space is coming at top side. I have to avoid it. I used header: null/none/false. But no result.Thanks in advance.
I have fixed this issue, by using headerMode: none.
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
}
}, {
initialRouteName: "Registration",
headerMode: "none"
});
Related
I'm currently implementing a small React Native app, and here is the navigators I'm currently having:
const RootNav= createStackNavigator(
{
Login: LogInScreen,
},
);
const TabNav = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Calendar: { screen: CalendarScreen },
Discussion: { screen: DiscussionScreen },
Profile: { screen: ProfileScreen },
},
);
export const SwitchNav = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: RootNav,
MainApp: TabNav,
},
{
initialRouteName: 'AuthLoading',
},
);
Right now in HomeScreen and CalendarScreen there are several Card components which should navigate to another screen named EventScreen with the options to go back to the previous screen which should be another createStackNavigator I think, but I still need help what's the right way to set up the navigators. Thanks in advance.
You can have a parent StackNavigator with EventScreen and TabNav as its children:
const RootNav = createStackNavigator(
{
Login: LogInScreen,
}
);
const HomeNav = createStackNavigator(
{
tabNav: TabNav,
Events: { screen: EventScreen },
}
);
const TabNav = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Calendar: { screen: CalendarScreen },
Discussion: { screen: DiscussionScreen },
Profile: { screen: ProfileScreen },
}
);
export const SwitchNav = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: RootNav,
MainApp: HomeNav,
},
{
initialRouteName: 'AuthLoading',
}
);
If you feel like you'll need a DrawerNavigation as well in the future, it is a good idea to take care of it now. This article may help.
I'm using react-navigation.
now I want to change first screen load from inside of StackNavigator.
export const LoginStack = StackNavigator({
Login: {
screen: Login,
},
Phone: {
screen: Phone,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none',
initialRouteName: 'Phone',
});
export const HomeStack = StackNavigator({
Home: {
screen: ContainerNavs,
},
Notifications: {
screen: Notification,
},
Question: {
screen: Question,
},
SelectContacts: {
screen: SelectContacts,
},
Options: {
screen: Options,
},
},
{
headerMode: 'none'
});
export const RootNavigator = StackNavigator({
Login: {
screen: LoginStack,
},
Home:{
screen: HomeStack,
},
},{
mode: 'modal',
headerMode: 'none',
initialRouteName: 'Login',
}
);
but my router always load Login screen. but I want to load Phone screen.
Just Replace The Screen and set first screen you want to load first .. that's it... so i just set Phone screen at the top of the stacknavigator
export const LoginStack = StackNavigator({
Phone: {
screen: Phone,
},
Login: {
screen: Login,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none',
initialRouteName: 'Phone',
});
I'm trying to work my way toward building a drawer navigator using this really nice tutorial/demo
Issue is that although this code works and I can walk through all the screens in my stacknavigator:
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
export default navigator;
But when i try to include, as a first step, consolidating the login scenes into a loginstack and then having that as a screen in another const, it does not work:
const LoginStack = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
const navigator = StackNavigator({
loginStack: { screen: LoginStack },
//drawerStack: { screen: DrawerNavigation }
}, {
// Default config for all screens
headerMode: 'none',
title: 'Main',
initialRouteName: 'loginStack'
});
export default navigator;
here is the error I am getting:
The link you brought spread a wrong approach out.
I wrote a comment there,
Putting drawer under the StackNavigation is a bad idea and it’s not
fit with any design guide. In iOS, drag to open action is duplicated
with go back action in navigation. In Android, you can find no app
from google use this approach. A drawer should cover StackNavigator
from outside.
You need to change your second StackNavigator to DrawerNavigator. And see 'react-navigation' documents or example for DrawerNavigator.
Stack Navigator "Root"
--Stack Navigation A
-- SN Login
-- SN Signup
-- SN HOME
Initial Route is "LOGIN"
HOME contain tab navigation
--Tab Navigator
--- TAB Navigator A
----Screen "Setting"
--- TAB Navigator B
----Screen "1"
----Screen "Setting"
App.js
const AppNavigator = StackNavigator({
Login: {
screen: Login
},
SignUp: {
screen: SignUp
},
TermsConditions: {
screen: TermsConditions
},
Home: {
screen: Home
},
Setting: {
screen: Setting
}
}, {
initialRouteName: "Login",
headerMode: "none",
// mode: 'modal',
navigationOptions: {
gesturesEnabled: false
}
});
When user login, navigate to "Home" screen -- End open the Truck as initial route.
Home.js
const HomeNavigation = StackNavigator(
{
Home: {
screen: Trucks
},
TruckDetailController: {
screen: TruckDetailController
},
Setting: {
screen: Setting
},
{
initialRouteName: "Home",
headerMode: "none"
}
);
const FavouriteNavigation = StackNavigator(
{
Favourite: {
screen: Favourite
},
TruckDetailController: {
screen: TruckDetailController
},
Setting: {
screen: Setting
},
{
initialRouteName: "Favourite",
headerMode: "none"
}
);
const TabRoute = TabRouter(
{
Trucks: {
screen: HomeNavigation
},
Favourite: {
screen: FavouriteNavigation
},
Loyalty: {
screen: Loyalty
},
Offer: {
screen: Offer
}
},
{ initialRouteName: "Trucks" }
);
I Just want to logout from setting and switch to "Stack Navigation A -- Login" screen.
If anybody will give the solution for above so its appreciable and make a good point. :)
You have two options here. The first, is to use the Back action with a key (you'll have to save the key for the Feed screen when you're there).
The second is to use Reset as you have, but you misunderstood the role of the actions array - it is only intended for building a stack for a stack navigator.
To perform the inner stack-navigator navigation, you'll have to specify an action inside the navigation action:
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({
routeName: '1',
params: {},
action: NavigationActions.navigate({
routeName: 'Feed'
})
})
]
});
I want to use the Navigator All togather but i fail to implement this the code which i use for integration is
const MyApp = const MyApp = TabNavigator({
Home: {
screen: HomeScreen,
},
Notifications: {
screen: HomeButton,
},
},
DrawerNavigator({
Home: {
screen: list,
},
SwipeList:{
screen:SwipeLists
},
},{
initialRouteName: 'Home',
contentComponent: SideDrawer,
});
});
const Simple = StackNavigator({
Login: {
screen: Login,
},
signup: {
screen: SignUp,
},
forget:{
screen:forget
},
});
I use this above but this is not correct i am not now how to integrate them plz recmond the way how to integrate the three navigator in react native