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.
Related
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
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} />
},
},
)
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"
}
);
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
Hi friends I am scratching my head with react-navigation from last 2 days, I tried many things(documentation doesn't seems that clear for a beginner), so right now I am facing few problem that seems little complex to me and hence I seek advice and help to proceed further.following are the cases/problem/scenario I seek help for -
react-navigation does not cover the header and statusbar, I wanted to achieve something like gmail but I ended up with like this
I used following code blocks to reach to this point
import React, {Component} from 'react';
import { AppRegistry, View, BackAndroid, StatusBar,} from 'react-native';
import {
NavigationActions,
addNavigationHelpers,
StackNavigator,
DrawerNavigator
} from 'react-navigation';
import LandingScreen from 'src/screens/landingScreen';
import Login from 'src/screens/login'
import SignUp from 'src/screens/signUp'
import ForgotPassword from 'src/screens/forgotPassword'
import Dashboard from 'src/screens/dashboard'
import UserProfile from 'src/screens/userProfile'
export const Drawer = DrawerNavigator({
Dashboard:{
path:'/',
screen:Dashboard,
},
UserProfile:{
path:'/'
screen:UserProfile
},
}, {
initialRouteName: 'Dashboard',
contentOptions: {
activeTintColor: '#e91e63',
},
headerMode: 'screen',
});
const routesConfig = {
Landing:{screen:LandingScreen},
Login: { screen: Login },
SignUp: { screen: SignUp },
ForgotPassword: { screen: ForgotPassword },
Drawer:{screen:Drawer}
};
export const AppNavigator = StackNavigator(routesConfig, {
initialRouteName: 'Drawer'
});
AppRegistry.registerComponent('Riduk', () => AppNavigator);
Other problem is how should I add 2 drawers in my app at the same screen
Here is a simplified example:
const FooStackNavigator = StackNavigator({
Foo: {
screen: FooScreen,
navigationOptions: {
title: 'Foo',
}
},
});
const BarStackNavigator = StackNavigator({...});
const MyDrawerNavigator = DrawerNavigator({
FooStack: {
screen: FooStackNavigator,
navigationOptions: {
drawer: () => ({
label: 'Foo',
})
},
},
BarStack: {
screen: BarStackNavigator,
navigationOptions: {
drawer: () => ({
label: 'Bar',
})
},
}
});
const AppNavigator = StackNavigator({
Drawer: { screen: MyDrawerNavigator },
}, {
headerMode: 'none',
});
There is an issue for Header in DrawerNavigator.
But you can fix by using StackNavigator inside DrawerNavigator
export const Drawer = DrawerNavigator({
Dashboard:{
path:'/',
screen: StackNavigator( { Screen1: {
screen: Dashboard
}})
},
UserProfile:{
path:'/',
screen: StackNavigator( { Screen1: {
screen: UserProfile
}})
},
}});
Then set headerMode: 'none' to root StackNavigator
export const AppNavigator = StackNavigator(routesConfig, {
headerMode: 'none'
});
Here, AppNavigator is root StackNavigator and routesConfig has above DrawerNavigator and other screens.
Is this the issue you're trying to resolve?
https://blog.callstack.io/android-drawer-statusbar-done-right-for-react-native-7e85f01fc099
As per my knowledge, you have to do 2 things:
1. Put drawer control at the top of navigation stack.
2. Set translucent propery of StatusBar
<StatusBar
translucent
backgroundColor="rgba(0, 0, 0, 0.24)"
animated
/>
{ Platform.OS === 'android' && Platform.Version >= 20 ?
<View
style={{
height: 24,
backgroundColor: "#512DA8",
}}
/>
: null }
Kindly let me know if it does work.
DrawerNavigator must over on StackNavigator, this is my way to fix this:
const navStack = StackNavigator({
Home: { screen: Main, },
Example01: { screen: Example01, },
Example02: { screen: Example02, },
});
const navDrawer = DrawerNavigator({
Home: {
screen: navStack, // Drawer over on StackNavigator
navigationOptions: {
drawerLabel: 'Home',
header: null,
}
},
Example03: {
screen: Example03,
navigationOptions: {
drawerLabel: 'Example03',
}
},
},
{
headerMode: 'none',
headerVisible: false,
navigationOptions: {
header: null
}
});
Hope this helps.