I have two Nagigators 1:StackNavigator and 2:DrawerNavigator
my react native and react navigation version
"react-native": "0.55.4",
"react-navigation": "^1.0.0-beta.11",
my root navigator is the StackNavigator from which i call the DrawerNavigator.
when i call the navigation.navigate('DrawerOpen') my screen returns to the initialRouteName .
my StackNavigator
import DrawerNavigatorScreen from "./src/DrawerNavigator";
const myApp = StackNavigator({
Home: {
screen: App,
navigationOptions: {
header: null
}
},
HomeChildData: {
screen: DrawerNavigatorScreen,
navigationOptions: {
header:null,
}
},
otp: {
screen: otp,
navigationOptions: ({ navigation }) => ({
header: null
})
}
});
my DrawerNavigator (/src/DrawerNavigator)
const DrawerNavigatorScreen = DrawerNavigator(
{
social: {
screen: socialstack,
navigationOptions: {
header: null
}
},
profile: {
screen: profilescreen,
navigationOptions: ({ navigation }) => ({
header: null
})
},
{
initialRouteName: "social",
contentOptions: {
labelStyle: {
alignSelf: "center",
fontFamily: "Avenir-Light",
fontSize: 15,
color: "#3B3B3B"
},
activeTintColor: "#3B3B3B",
activeBackgroundColor: "#ffc34d", //rgba(255,181,14,0.1)
// inactiveTintColor: 'black',
inactiveBackgroundColor: "#fff"
},
});
export default DrawerNavigatorScreen
where my problem occurs
static navigationOptions = ({ navigation }) => ({
header:null,
headerTitleStyle: {
alignSelf: 'center',
marginLeft: margintLeftValue,
color: '#2F2E2F',
fontFamily: 'Avenir-Medium'
},
headerLeft: <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
<Image
source={require('./../images/menu.png')}
style={styles.drawerIcon} />
</TouchableOpacity>,
})
I want to simply open or toggle the drawer .
I think what you're looking for is navigation.toggleDrawer();.
You can read more here.
Related
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'})
I am extremely new in React Native, tried to adding a testing screen in drawer, but I couldn't.
import { createDrawerNavigator, createStackNavigator } from "react-navigation"
/* Some imports here neglected...*/
/*
* icon size
* */
const iconSize = 18
const IntegratedNavigation = createStackNavigator({
bottomNavigator: { screen: BottomNavigator, navigationOptions: { header: null } },
something: { screen: Something, navigationOptions: { header: null } },
something2: { screen: SomethingElse, navigationOptions: { header: null } },
})
export const DrawerNavigator = createDrawerNavigator({
Tabs: {
screen: IntegratedNavigation,
navigationOptions: {
drawerLabel: "Explore",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"search"} size={iconSize} color={tintColor}/>
),
header: null,
},
},
PartnersScreen: {
screen: PartnersScreen,
navigationOptions: {
drawerLabel: "Partners",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"safety"} size={iconSize} color={tintColor}/>
),
},
},
HelloScreen: {
screen: PartnersScreen, /*This is a testing new drawer tab that never appear!*/
navigationOptions: {
drawerLabel: "Test!",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"test"} size={iconSize} color={tintColor}/>
),
},
},
}, {
contentOptions: {
inactiveTintColor: color.palette.lightBlack,
activeTintColor: color.primary,
},
contentComponent: props => (<MenuUserInfo drawerItemsProps={props}/>),
drawerWidth: 240,
},
)
As a test, I just wanted to duplicate "PartnersScreen" as another tab. But the new route never appear. I couldn't figure out which other file I need to modify. Any idea?
Consider:
export default class App extends React.Component {
render() {
return(
<MyApp />
);
return(
<Navigation />
);
}
const Navigation = createStackNavigator({
Welcome: {
screen: Splash,
navigationOptions: {
header: null
}
},
Login: {
screen: Requesterlogin,
navigationOptions: {
title: "Login",
headerTitleStyle: {
alignSelf: "center",
textAlign: "center",
width: "77%"
},
headerStyle: {
backgroundColor: "#095473"
},
headerTintColor: "white"
}
},
Forgot: {
screen: Forgot,
navigationOptions: {
title: "Forgot Password",
headerTitleStyle: {
alignSelf: "center",
textAlign: "center",
width: "77%"
},
headerStyle: {
backgroundColor: "#095473"
},
headerTintColor: "white"
}
}
});
const MyApp = DrawerNavigator(
{
Home: {
screen: Reqlogin,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon
name="home"
size={25}
color="black"
//style={styles.useraccounticon}
/>
),
}
},
Profile: {
screen: Profile_Requester,
navigationOptions: {
drawerLabel: 'Profile',
drawerIcon: () => (
<Icon
name="user-circle"
size={25}
color="black"
//style={styles.useraccounticon}
/>
),
}
},
}
);
In the above code I use two navigation CreateStack navigations used for Navigation.
The Drawer navigator is used for Myapp. But in my case only Myapp is working. How can I return the proper way so both will be working?
It looks like you are trying to implement an authentication flow. You should do that using createSwitchNavigator and nesting your other navigators within that. SwitchNavigator can help you with authentication flows because it handles stuff like making sure you cannot jump to your main app from the Login screen using the Back button.
The idea is, you will have a SwitchNavigator as the parent navigator with two flows: whether the user is signed in or not. The child navigators would be something like Auth and Main. If the user is not signed in, the active navigator would be Auth, which will be a StackNavigator itself. If the user is signed in, the active navigator would be a DrawerNavigator with a stacked StackNavigator.
import { createSwitchNavigator, createStackNavigator, createDrawerNavigator } from 'react-navigation';
const App = createDrawerNavigator({ AppStack: AppStack });
const AppStack = createStackNavigator({
Home: { screen: Reqlogin },
Profile: { screen: Profile_Requester }
});
const Auth = createStackNavigator({
Welcome: { screen: Splash },
Login: { screen: Requesterlogin },
Forgot: { screen: Forgot }
});
export default createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen, // You'll check whether user is logged in or not here
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
For more help, visit this documentation and this article.
I have a navigation.js which returns SwitchNavigator...
I want to put TabIcon in one of the screens....But i can't do it inside the screen,
i.e
static navigationOptions = () => ({
header: null,
tabBarLabel: 'Orders',
});
As i have a nested tab, so i don't have a screen where i can do this ....here is my code
navigation.js
const AppStack = TabNavigator({
//ORDER TAB----->>>>
orders: {
navigationOptions: {
tabBarLabel: 'Orders',
},
screen: TabNavigator({
navigationOptions: {
tabBarLabel: 'Orders',
tabBarIcon: ({ tintColor }) => {
return <Icon name="shopping-cart" size={20} color={tintColor} />;
}
},
awaitingScreen: {
screen: StackNavigator({
awaiting: { screen: AwaitingScreen },
awaitingorderdetail: { screen: AwaitingDetailScreen }
})
},
confirmedscreen: {
screen: StackNavigator({
confirmed: { screen: ConfirmedScreen },
confirmedorderdetail: { screen: ConfirmedDetailScreen }
})
},
}, {
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
lazy: true,
animationEnabled: false,
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
labelStyle: {
fontSize: 10,
color: 'white',
fontFamily: 'NeutraText-Book'
},
style: {
backgroundColor: '#415041',
}
}
}
)
},
//PAYMENT TAB---->>>
payments: { screen: PaymentScreen },
//CUSTOMER TAB----->>
customers: { screen: CustomerScreen },
//MESSAGES TAB----->>
messages: { screen: MessageScreen },
//backBehavior: 'none',
},
{
headerMode: 'none', // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
swipeEnabled: false,
lazy: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
labelStyle: {
fontSize: 8,
margin: 0,
padding: 0,
fontFamily: 'NeutraText-Book'
},
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
style: {
backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
}
}
});
const AuthStack = TabNavigator({
selectadmin: { screen: SelectAdminScreen },
otp: { screen: OtpScreen },
password: { screen: PasswordScreen },
pin: { screen: PinScreen }
},
{
navigationOptions: {
tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
}
);
export default SwitchNavigator(
{
AuthLoading: AppLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
Now i want to import this navigator inside App.js
like
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<SwitchNavigator />
</View>
);
}
}
But i can't do this as i can't return JSX without React,
So is there any work around? I can declare all this inside my App.js but That is my last option as it will make my code messy.
return <Icon name="shopping-cart" size={20} color={tintColor}
It returns React must be in scope
Make sure to always import React in every file that contains jsx:
import React from 'react';
The error indicates that you forgot to do so in a file that contains jsx.
I'm facing an issue in which header component does not change. It's same on all the screen even if I have defined separately in Stacknavigator navigationOptions.
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
Even if I have added in each screen separately but it's showing home (first header component) as attached.
I have also override navigation options on each screen as well but same header issue.
static navigationOptions = ({ navigation, screenProps }) => ({
title: 'User List',
headerTitle:'User List',
headerTintColor :'#ffffff',
});
Below is my complete code
const AppNavigator = StackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
headerMode: 'none'
}
},
Home: {
screen: AppDrawerNavigation,
navigationOptions: ({
navigation
}) => ({
header: < Header
outerContainerStyles={{ backgroundColor: '#1999CE' }}
leftComponent = {
<Icon name='menu' color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
}
centerComponent = {
{
text: 'Home',
style: {
color: '#fff'
}
}
}
rightComponent = {
{
icon: 'home',
color: '#fff'
}
}
/>,
}),
},
WebViews: {
screen: AppDrawerNavigation,
navigationOptions: {
header: null,
headerMode: 'none'
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#1999CE',
},
}
},
UserList :{
screen:AppDrawerNavigation,
navigationOptions: ({
navigation
}) => ({
title: 'List User',
headerTitle:'List User',
header: < Header
outerContainerStyles={{ backgroundColor: '#1999CE' }}
leftComponent = {
<Icon name='menu' color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
}
centerComponent = {
{
text: 'List User',
style: {
color: '#fff'
}
}
}
rightComponent = {
{
icon: 'home',
color: '#fff'
}
}
/>,
}),
}
},
{ navigationOptions: {
headerMode: 'screen'
},
}
);
const AppDrawerNavigation = DrawerNavigator({
Home: {
screen: HomeScreen,
},
WebViews: {
screen: WebViewScreen,
},
UserList: {
screen: UserListScreen,
},
},
{
navigationOptions: {
headerMode: 'none'
},
drawerPosition: 'left',
drawerWidth: 200,
contentOptions: {
activeTintColor: '#000000',
activeTintColor :'#ffffff',
activeBackgroundColor :'#1999CE',
inactiveTintColor :'#1999CE',
inactiveBackgroundColor :'#ffffff',
}
}
);
Can you suggest a possible fix that would address this issue?
You can use withHeaders from this package react-navigation-utils to make custom headers for each screen.
Try this
Home: {
screen: HomeScreen,
navigationOptions: {
title:'Home',}
},
WebViews: {
screen: WebViewScreen,
navigationOptions: {
title:'Web Views',}
},
UserList: {
screen: UserListScreen,
navigationOptions: {
title:'User List',}
},
hope it'll hepls you....