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.
Related
I am developing a react native application.
Here i am using this way to navigate between screens, navigatiion works OK. but when i press back button from the 3rd level screen, it comes to the 1st level screen instead of 2st level screen.
how do i fix this? please help me.
const HomePageScreen = createStackNavigator({
HomeLists: {
screen: HomeScreen,
navigationOptions: {
header: null
}
},
HotAdsLists: {
screen: AdsDetailScreen,
navigationOptions: {
title: 'Hot Ads2',
}
},
DetailsScreen: {
screen: DetailsScreen,
},
});
const SearchStack = createStackNavigator({
Home:{
screen:HomePageScreen,
navigationOptions: {
header: null
}
}
},{
initialRouteName: 'Home',
headerMode: 'screen'
});
const DrawerNavigatorExample = createDrawerNavigator({
SearchStack
},{
drawerType: 'slide',
contentComponent: Page2ComponentExample,
drawerBackgroundColor: '#4eb6ce'
});
The stack is working properly
I done the stack manually and it works fine.
I have a StackNavigation like this:
const AppNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: () => ({
title: 'Login',
headerTintColor: 'white',
headerStyle:{
backgroundColor: '#000',
elevation: 0,
showdowOpacity: 0
},
})
},
Home: {
screen: AppDrawerNavigator,
navigationOptions: () => ({
header: null
})
},
});
With a DrawerNavigator nested inside:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
gesturesEnabled: false,
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
drawerLabel: 'Favorites',
}
}
},
{
drawerPosition: 'left',
contentComponent: props => <Drawer {...props} />
});
The initial route of the stack navigator is working fine
Login -> Home
But when I try navigating from Home to Favorites it navigates immediately back to Home after rendering the Favorites screen.
I am using react-navigation#2.11.2 and react-native#0.56.0
With Home being used in both stack and drawer navigator.
There are high chances of name conflicts occurring here.
Try this structure.
const Stack = {
FirstView: {
screen: FirstView
},
SecondView: {
screen: SecondView
},
ThirdView: {
screen: ThirdView
}
};
const DrawerRoutes = {
FirstViewStack: {
name: 'FirstViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'FirstView' })
},
SecondViewStack: {
name: 'SecondViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'SecondView' })
},
ThirdViewStack: {
name: 'ThirdViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'ThirdView' })
},
};
const RootNavigator =
StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(
DrawerRoutes,
),
},
...Stack
},
{
headerMode: 'none'
}
);
I faced a similar issue when i tried to use a hamburger menu in my Home page (which uses stack navigator to goto other pages).
Check this Git Article also.
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"
});
I've made a custom tab bar in a Component which uses StackNavigator like so
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
Now my Home screen has a custom made Tab Bar like so
export default () => (
<View>
<Text>HOME</Text>
<TabBar />
</View>
)
I want my Home screens Tab bar to have no transition
Currently it animates (left to right for IOS & bottom to up for Android) when one of the Tab link is clicked
I checked docs & found mode property but it has only 2 props card & modal & I want no animation
How to do it ?
Thanks to #Vojtech, I got the answer
const customAnimationFunc = () => ({
screenInterpolator: (sceneProps) => {
const { scene } = sceneProps;
const tabs = ['Home'];
if (tabs.indexOf(scene.route.routeName) !== -1) return null;
},
});
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
transitionConfig: customAnimationFunc,
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
The only problem right now is nothing is animating. I'll edit the answer when few screens animate & tabs don't
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