I saw other answers regarding this issue but I can't find solution.
I want to show drawer always above app screen and above header. Instead drawer is always bellow header.
What am I doing wrong here:
const AppNavigation = createStackNavigator(
{
Main: { screen: Main, navigationOptions: {
title: "Main"
} },
Home: { screen: Home, navigationOptions: {
title: "Home"
} }
},
{
initialRouteName: "Main"
}
);
const DrawerNavigation = createDrawerNavigator(
{
Home: Home,
Main: Main
},
{
initialRouteName: "Main"
}
);
App = createStackNavigator({
drawer: {
screen: DrawerNavigation,
},
app: {
screen: AppNavigation
}
}, {
initialRouteName: 'drawer',
navigationOptions: ({navigation}) => ({
headerStyle: {backgroundColor: '#a9a9a9'},
title: 'Welcome!',
headerTintColor: 'white',
headerLeft: <Text onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())}>Menu</Text>
})
});
export default () => (
<View style={{ flex: 1 }}>
<App />
</View>
Our app is similar to this. You can make the drawer be over the header with react-navigation if it is the <Root /> component of your app (the one you import into index.js). For example:
export const Root = DrawerNavigator({
Tabs: {
screen: Tabs,
title: 'Tabs'
},
STACK1: {
screen: STACK1,
title: 'STACK1',
},
STACK2: {
screen: STACK2,
title: 'STACK2',
},
});
That will give you something like this:
Related
How can i use AppContainer in my main file App.js? And navigate between pages of these two stacks AuthenticationNavigator and MainNavigator
I'm trying to acess my stacks from routes.js in the App.js, but i cant. Can someone tell me what's wrong in the code?
routes.js
const AuthenticationNavigator = createStackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login',
headerShown: false, //desabilita a barra do topo
},
},
Register: {
screen: RegisterScreen,
navigationOptions: {
title: 'Cadastro',
},
},
}, {
initialRouteName: 'Login',
defaultNavigationOptions: {
headerTitleAlign: 'center',
headerTintColor: '#FFF',
headerStyle: {
backgroundColor: '#121212',
},
}
})
const MainNavigator = createStackNavigator({
Main: {
screen: MainScreen,
navigationOptions: {
title: 'Main',
headerShown: false,
},
},
}, {
initialRouteName: 'Main',
defaultNavigationOptions: {
headerTitleAlign: 'center',
headerTintColor: '#FFF',
headerStyle: {
backgroundColor: '#121212',
},
}
})
const AppNavigator = createSwitchNavigator({
/*
* Rather than being rendered by a screen component, the
* AuthenticationNavigator is a screen component
*/
Auth: AuthenticationNavigator,
Home: MainNavigator,
}, {
initialRouteName: 'Auth'}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer
The way it's imported in App.js
import AppContainer from "./src/routes"
Where and how i try to acess the stacks(App.js):
render() {
if (!this.state.isAuthenticationReady) {
return (
{}
);
} else {
return (
<>
<StatusBar barStyle="light-content" backgroundColor="#121212" />
{this.state.isAuthenticated ? <AppContainer /> : <AppContainer />}
</>
);
}
}
Make sure you are exporting your all routes like
export {InitialStack, MainStack, Loading}
because you want to use it as
import {InitialStack, MainStack, Loading} from "./src/routes"
And you need to add state in your this line
{this.isAuthenticated ? <MainStack /> : <InitialStack />} // change this to
{this.state.isAuthenticated ? <MainStack /> : <InitialStack />}
Once Logged in, a TabNav is present, from 1st tab i navigate to second tab and then i navigate to a screen defined in StackNav now i want to navigate to 3rd Tab in TabNav. How to achieve this? I want to "fetch" data from the server which is not happening coz the "componentDidMount" is not getting called.
I had the same issue when i had to navigate from TabNav to StackNav but i solved it by defining TabNav inside StackNav.
This is my App.js
export class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
</View>
);
}
}
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
},
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
},
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
},
});
const TabNavigator = createMaterialTopTabNavigator(
{
Upcoming: { screen: UpcomingScreen },
Accepted: { screen: AcceptedScreen },
Ongoing: { screen: OngoingScreen },
Completed: { screen: CompletedScreen },
},
);
const tabs = createStackNavigator({
Root: {
screen: TabNavigator,
navigationOptions: () => ({
title: `Welcome, John Doe`,
}),
},
});
const AppNavigator = createStackNavigator(
{
login:
{
screen: Login,
navigationOptions: ({ navigation }) => ({
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: '#fff',
}),
},
login: Login,
tab: tabs,
acceptedTrip: AcceptedTrip,
startTrip: StartTrip,
upload: Upload,
geoLoc: GeoLoc,
ongoingScreen: OngoingScreen
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
)
const DrawerNavigatorExample = createDrawerNavigator(
{
Screen1: {
screen: AppNavigator,
navigationOptions: {
drawerLabel: 'Login',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
Screen4: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
},
{
initialRouteName: "Screen1"
}
);
const MyApp = createAppContainer(DrawerNavigatorExample);
class App extends React.Component{
render(){
return <MyApp/>
}
}
export default App
the componentDidMount is not getting called.
Am trying to develop an simple app, which has auth , drawer , and other stacks ! I am unable to nest each of these.
This is the flow :
--AuthStack
--SplashScreen
--Login
--FogotPassword
--DrawerStack
--DrawerStack
--MainAppStack
--Training
--etc
--MainAppStack
--Home
--screen2
--screen3
etc, For example After auth flow, my main screen would be drawer screen which is Home Screen from mainAppStack. Now, how can i navigate from home to screen2 and screen3 etc ?
I am not getting header, and i couldnt set header title. And while using hardware back its going to Home screen.
Please Guide !
And my navigator setup !
const AppStackNavigator = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
header: null
}
},
StoreList: {
screen: StoreList,
navigationOptions: {
header: null
}
},
EditSurvey: {
screen: EditSurvey,
navigationOptions: {
header: null
}
},
StoreSurvey: {
screen: StoreSurvey,
navigationOptions: {
header: null
}
},
Competition: {
screen: Competition,
navigationOptions: {
header: null
},
},
Display: {
screen: Display,
navigationOptions: {
header: null
},
},
SurveyCheckList: {
screen: SurveyCheckList,
navigationOptions: {
headerTransparent: true
}
},
});
const DrawerNavigator = createDrawerNavigator({
Dashboard: {
screen: AppStackNavigator,
navigationOptions: {
drawerLabel: "Home",
}
},
Training: {
screen: TrainingList,
navigationOptions: {
drawerLabel: "Training"
}
},
RoutePlan: {
screen: RouteCalendar,
navigationOptions: {
drawerLabel: "Route Plan"
}
}
},
{
contentOptions: {
activeTintColor: '#127CC1',
},
contentComponent: props => <DrawerComponent {...props}/>,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
navigationOptions : ({navigation}) => {
const { routeName } = navigation.state.routes[navigation.state.index];
const headerTitle = routeName;
return {
headerTitle,
headerLeft: (
<Icon name="md-menu" style={{ marginLeft: 10 }}
onPress={() => navigation.toggleDrawer()}
/>
)
}
}
}
);
const AuthStackNavigator = createStackNavigator(
{
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
headerTransparent: true
}
},
LoginScreen: {
screen: Login,
navigationOptions: {
headerTransparent: true
}
},
Drawer: DrawerNavigator,
});
I'm a beginner to react native development. At the moment I'm trying to set my navigation for the login logout process. This is my app flow right now Home -> SignIn -> Dashboard. Now when the user clicks the logout button in the dashboard it should go back to Home screen. This works well for the first time, but the problem is, if a user is already logged in, it skips the Home and SignIn and goes straight to Dashboard and if I try to log out from there it actually pushes to new Home view while keeping Dashboard in the stack and when I SignIn it does a pop transition to Dashboard showing the old state data. I did some digging and its said that react doesn't have provision to pop up out to specific view and we may have to use a hack to replace the screen but I'm not sure how to proceed on that. Below is my current code for the stack navigator and logout process.
const Navigator = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null
}
},
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
header: null
})
},
SignIn: {
screen: SignIn,
navigationOptions: {
header: null
}
},
Dashboard: {
screen: Dashboard,
navigationOptions: {
header: null
}
}
});
const Drawer = DrawerNavigator(
{ Navigator: { screen: Navigator } },
{ contentComponent: NavigationDrawer }
);
//In Dashboard
logoutUser = () => {
//Perform API call to logout user
this.props.navigation.navigate("Home");
}
You can use the SwitchNavigator,
const DrawerNavigatorExample = createDrawerNavigator({
//Drawer Optons and indexing
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
drawerIcon: <Image
source={require('../assets/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
},
},
Screen2: {
//Title
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
drawerIcon: <Image
source={require('../assets/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
},
},
},
{
contentComponent: DrawerContent
});
const onboardingStackNavigator = createStackNavigator( {
Home: {
screen: Login,
navigationOptions: ({ navigation }) => ({
title: "Login",
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: {
backgroundColor: headerBackgroundColor,
},
headerTintColor: headerTintColor,
})
},
Signup: {
screen: Signup,
navigationOptions: ({ navigation }) => ({
title: "SignUp",
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: {
backgroundColor: headerBackgroundColor,
},
})
},},
{
initialRouteName: 'Home',
}
)
const AppNavigator = createAnimatedSwitchNavigator(
{
onboarding:onboardingStackNavigator,
Drawer: {
screen: DrawerNavigatorExample
}
},
{
initialRouteName: 'onboarding',
transition: (
<Transition.In type='fade'></Transition.In>
)
},
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
I have one file with my whole navigation stack. In my navigation header I have a menu and I want to open a Drawer. Now In this example I get the error: Cannot read property 'navigation' of undefined
My AppNavigation file:
import React from 'react';
import { Text } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import Login from '../components/Login';
import Dashboard from '../components/Dashboard';
import NewNotification from '../components/NewNotification';
const GuestStack = createStackNavigator(
{
loginScreen: { screen: Login },
}, {
headerMode: 'float',
headerLayoutPreset: 'center',
navigationOptions: {
headerStyle: { backgroundColor: '#61b1cd' },
title: 'Welcome',
headerTintColor: 'black',
},
},
);
const LoggedinStack = createDrawerNavigator({
dashboard: { screen: Dashboard },
newNotifciation: { screen: NewNotification },
});
const LoggedinNavigation = createStackNavigator(
{
LoggedinStack: { screen: LoggedinStack },
}, {
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#61b1cd' },
title: 'Welkom!',
headerTintColor: 'black',
headerLeft: <Text onPress = { () =>
this.props.navigation.openDrawer('dashboard')
// navigation.openDrawer('dashboard')
}>Menu</Text>,
},
},
);
const VveNavigator = createStackNavigator(
{
guestStack: {
screen: GuestStack,
},
loggedinStack: {
screen: LoggedinNavigation,
},
}, {
headerMode: 'none',
initialRouteName: 'guestStack',
},
);
export default AppNavigator;
The problem seems to be over here:
headerLeft: <Text onPress = { () =>
this.props.navigation.openDrawer('dashboard')
// navigation.openDrawer('dashboard')
}>Menu</Text>,
And then in my App.js I have
export default class App extends React.Component {
render() {
return (
<APPNavigator />
);
}
}
Version of react navigation is 2.18.1
Thanks
headerLeft doesn't receive navigation prop (check the source code). So if you'd like to use a navigation prop on press, you should consider to refactor your stack navigator config:
const LoggedinNavigation = createStackNavigator(
{
LoggedinStack: { screen: LoggedinStack },
}, {
headerMode: 'float',
navigationOptions: ({ navigation }) => ({ // here you get the navigation
headerStyle: { backgroundColor: '#61b1cd' },
title: 'Welkom!',
headerTintColor: 'black',
headerLeft: (
<Text
onPress={() => {
navigation.openDrawer()
}}
>
Menu
</Text>
),
}),
},
);
Check this issue for more options.