Remove screen from drawerNavigator - reactjs

I have react native problem with react navigation v2 and drawerNavigator. Actually, I want drawerNavigator (header) to showup on screen, but I don't want that page in drawer to show.
There is my main drawer and I want to display it also on ActionPage, but I don't want Action inside it.
const MainDrawer = DrawerNavigator(
{
Home: {
screen: HomeStack,
navigationOptions: {
title: 'POČETNA',
}
},
OrderP: {
screen: OrderStack,
navigationOptions: {
title: 'NARUČI',
}
},
CatalogP: {
screen: CatalogStack,
navigationOptions: {
title: 'KATALOZI',
}
},
InstructionP: {
screen: InstructionStack,
navigationOptions: {
title: 'UPUTSTVO ZA PORUČIVANJE',
}
},
InfoP: {
screen: InfoStack,
navigationOptions: {
title: 'INFORMACIJE O APLIKACIJI'
}
},
ActionP: {
screen: ActionStack,
navigationOptions: {
header: null,
title: ''
}
}
}
);
And root stack:
const RootStack = StackNavigator(
{
MainDrawer: {
screen: MainDrawer,
},
Contact: {
screen: ContactPage
},
ActionP: {
screen: ActionPage
},
News: {
screen: NewsPage
}
},
{
headerMode: 'none'
}
);

In order to hide the pages you want, you can adapt this code:
// this const is used to hide desired pages
const hiddenDrawerItems = [
'Home',
'Profile',
]
const MainDrawer = createDrawerNavigator(
{
Home: { screen: HomePage },
Profile: { screen: ProfilePage },
// other pages
},
{
// this entry is used to actually hide you pages
contentComponent: (props) => {
const clonedProps = {
...props,
items: props.items.filter(item => !hiddenDrawerItems.includes(item.key)),
}
return <DrawerPage {...clonedProps} />
},
},
)

Related

Screen navigates to previous screen automatically in React Navigation

So, in my root index.js file I've this route
const RootNav = createSwitchNavigator(
{
Auth: {
screen: Auth
},
Tabs: {
screen: TabHolder
},
},
{
initialRouteName: 'Auth',
}
);
Auth.js
const Auth = createStackNavigator(
{
Splash: {
screen:Splash
},
BeforeLogin: {
screen:BeforeLogin
},
Signin: {
screen:Signin,
},
ForgotPassword: {
screen:ForgotPassword
},
Signup: {
screen:Signup
},
},
{
headerMode:'none',
mode:'modal',
}
);
TabHolder.js
const TabHolder = createBottomTabNavigator ({
HomeMainTab: {
screen: HomeMainStack,
navigationOptions: { },
},
ProfileMainTab: {
screen: ProfileMainStack,
navigationOptions: { },
},
)}
const ProfileMainStack = createStackNavigator({
Profile: {
screen:Profile
},
Settings: {
screen:Settings,
},
},
{
headerMode:'none',
mode:'modal',
},
);
Now when I navigate from Settings screen to Signin screen using this.props.navigation.navigate('Signin'). I get navigated to Signin screen and then immediately to BeforeLogin screen. I don't know why this is happening.

How to set an initial screen that is not shown in drawer component?

I want to show an initial screen when the user logs into my react native app.But i don't want to show the screen on the drawer component as i have used drawer component for other screens from react navigation. When the user goes to different screens from the drawer component,i want to make them come to the previous initial screen on pressing back button.
const AppStackNavigator = createStackNavigator({
Map: {
screen: Maps,
navigationOptions: () => ({
header: null
})
},
UpdateProfile: {
screen: UpdateProfileScreen,
navigationOptions: () => ({
header: null
})
},
SearchDetails: {
screen: SearchDetails,
navigationOptions: () => ({
header: null
})
},
})
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen : AppStackNavigator,
navigationOptions: () => ({
title: `Map`,
drawerIcon: ({tintColor}) => (
<Image source={require('./assets/img/s_logo.png')} style={{height: 24, width: 24}}/>
)
})
},
Search: {
screen: SearchScreen,
navigationOptions: () => ({
title: `Search by`
})
},
Vendor: {
screen: HomeScreen,
navigationOptions: () => ({
title: `Vendor List`,
})
},
Notifications: {
screen: NotificationScreen
},
Events: EventsScreen,
Venue : {
screen: VenueAvailabilityScreen,
navigationOptions: () => ({
title: `Venue Availability`,
})
},
Settings: {
screen: SettingsScreen
}
}, {
drawerPosition: 'left',
contentComponent: customDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoure: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerWidth: 320,
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#030303',
activeBackgroundColor: '#B90066',
inactiveBackgroundColor: '#fff',
itemsContainerStyle: {
marginHorizontal: 10
},
itemStyle: {
height: 40,
borderRadius: 60,
},
activeLabelStyle: {
fontSize: 20,
fontWeight: 'normal'
}
}
})
const AuthStackNavigator = createStackNavigator({
SplashScreen: { screen: SplashScreen },
ModalScreen:{
screen: ModalScreen
},
LocationNotification: {
screen: LocationNotificationScreen,
navigationOptions: () => ({
header: null
})
},
LoginScreen: {
screen : LoginScreen,
navigationOptions: () => ({
header: null
})
},
SignUpScreen: {
screen : SignUpScreen,
navigationOptions: () => ({
header: null
})
},
SignUpStepTwo: {
screen : SignUpStepTwo,
navigationOptions: () => ({
header: null
})
},
ForgotPassword: {
screen: ForgotPassword,
navigationOptions: () => ({
header: null
})
}
})
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: {
screen: AppDrawerNavigator
}
})
const MyAppDrawer = createAppContainer(AppSwitchNavigator)
class App extends Component {
render() {
return <MyAppDrawer />
}
I want to set the map screen as initial but don't want to show that on drawer. How could i do that?
You can't ... at least it's not easy. You need to create a custom contentcomponent yourself and implement the navigation. Tutorial here. Another approach is to make your appdrawernavigator ,a child of a stacknavigator with the initial screen
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: MainStackNavigator
})
//the main stack
const MainStackNavigator= createStackNavigator({
InitialScreen: {screen: InitialScreen},
DrawerNav: {screen:AppDrawerNavigator}
},{headerMode: 'none'})

React-Navigation display dynamic headers on tabNavigation

I have this code:
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from './modules/Home/HomeScreen';
import DetailScreen from './modules/Home/DetailScreen';
import React from 'react';
const tabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
},
Details: { screen: DetailScreen },
},
);
//
tabNav.navigationOptions = ({ navigation }) => {
let { routeName } = navigation.state.routes[navigation.state.index];
console.log('navigation: ', navigation.state);
let title;
if (routeName === 'Home') {
title = 'Home';
} else if (routeName === 'Details') {
title = 'Detail';
}
return {
title,
headerMode: 'none',
};
};
//
const RootNavigator = createStackNavigator(
{
Main: tabNav,
},
{
navigationOptions: {
headerMode: 'none',
headerTransparent: true,
},
},
);
export default RootNavigator;
This is code is working well.
My question is, I want to change this section become dynamic. I've tried to put stackNavigator inside the tab but keep returning me error.
if (routeName === 'Home') {
title = 'Home';
} else if (routeName === 'Details') {
title = 'Detail';
}
Any suggestion?
Update:
I've tried to put stackNavigator inside my screen:
const tabNav = createBottomTabNavigator(
{
Home: createStackNavigator({
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
}),
Details: { screen: DetailScreen },
},
);
It keeps return me The component for route 'navigationOptions' must be a React component.
the StackNavigator is misconfigured, try this :
const tabNav = createBottomTabNavigator({
Home: {
screen: createStackNavigator({
homeSreen: {
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
},{
initialRouteName: 'homeScreen',
})
},
Details: { screen: DetailScreen },
});
or
const HomeStack = createStackNavigator({
home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
},
},{
initialRouteName: 'home',
});
const tabNav = createBottomTabNavigator({
Home: { screen: HomeStack },
Details: { screen: DetailScreen },
});
and
https://reactnavigation.org/docs/en/stack-navigator.html
and you can set title per screen:
const tabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
},
},
Details: {
screen: DetailScreen,
navigationOptions: {
title: 'Details',
},
},
},
);
https://reactnavigation.org/docs/en/tab-navigator.html#navigationoptions-for-screens-inside-of-the-navigator

Undefined is not a function SwitchNavigator error

I'm using React Native and create a navigation. But this module gives an "undefined is not a dunction SwitchNavigator" fault. How can i fix?
I know relased 2.0.x but i don't want use. Because that is gives;
Cannot listen for a key that isn't associated with a Redux store. First call createReactNavigationReduxMiddleware so that we know when to trigger your listener
screenshot
react-navigation 1.0.0-beta.15
react-native expo
const NonAuthNavigator = StackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
Register: { screen: Register },
},
{
initialRouteName: "Main",
headerMode: "none"
}
);
const AuthTabNavigator = TabNavigator(
{
Home: { screen: Home },
Camera: { screen: Camera },
Document: { screen: Document },
Settings: { screen: Settings },
},
{
initialRouteName: "Home",
headerMode: "none"
}
);
const LeftButtonNavigator = StackNavigator(
{
Menu: { screen: Menu },
},
{
initialRouteName: "Main",
headerMode: "none"
}
);
const AuthMainNavigator = StackNavigator(
{
AuthTabNav: { screen: AuthTabNavigator },
LeftButtonNav: { screen: LeftButtonNavigator }
},
{
initialRouteName: "AuthTabNav",
headerMode: "none"
}
);
const AppNavigator = SwitchNavigator(
{
NonAuthNav: NonAuthNavigator,
AuthMainNav: AuthMainNavigator,
},
{
initialRouteName: 'NonAuthNav',
headerMode: "none"
}
);

When switch between tabs of TabNavigator all of the tabs is mounting

Shows console after switching from the first tab to second:
When it occurs, state of the previous tab is not saving, and the transition to next tab is slow
My route config
const NestedStack1 = StackNavigator({
Tab1Page1: { screen: Tab1Page1 },
},{
navigationOptions: {
headerMode: 'screen'
}
});
const NestedStack2 = StackNavigator({
Tab2Page1: { screen: Tab2Page1 },
},{
navigationOptions: {
headerMode: 'screen'
}
});
const ProfileScreenStack = StackNavigator({
ProfileScreen: { screen: ProfileScreen },
},{
navigationOptions: {
headerMode: 'screen'
}
});
export default TabNavigator({
Tab1: { screen: NestedStack1 },
Tab2: { screen: NestedStack2 },
Tab3: { screen: Tab3 },
Tab4: { screen: Tab4 },
ProfileScreen: { screen: ProfileScreenStack }
},{
tabBarOptions: {
showLabel: false,
activeTintColor: c.BLACK
}
});
How to fix the update of tabs? switching should be quickly with saving state

Resources