First of, sorry about the title. I did't know how else to explain what I am going for. I have a Drawer Navigation with a Stack Navigation inside of it. The reason why I did this is because I wanted a SinglePage and CommentPage which will be unmounted when left. And my main Navigation is the Drawer Navigation. The problem for me is that If I go in to one of the screens inside of the drawer navigation and from there, go in to the SinglePage (by tapping on an article), and now if I go back, it goes all the way back to home and not the previous page which is the other drawer navigation page.
I have already tried changing the order of my Routes but that did not help. Here is the Code I am working with:
//This is my Routes file which is located in my project root folder
//Here is the Stack Navigator
const SinglePageNavigator = createStackNavigator({
Home: { screen: Home },
SinglePage: { screen: SinglePage },
CommentPage: { screen: Comments },
},
{
initialRouteName: 'Home',
mode: "card",
headerMode: "none",
}
);
const styles = StyleSheet.create({
drawerLabelStyle: {
fontFamily: 'MV_Waheed',
fontWeight: '200',
fontSize: 16,
flex: 1,
alignItems: 'flex-end'
}
});
//And here is my Drawer Navigation. I have removed some screens
const TopLevelNavigator = createDrawerNavigator({
Home: {screen: SinglePageNavigator, navigationOptions: {
title: 'Home',
}},
Catpage: {screen: CatPage, navigationOptions: {title: 'News'}, params: {catID:1000, thisRouteName: 'News'}},
Catpage: {screen: CatPage, navigationOptions: {title: 'Entertainment'}, params: {catID:1000, thisRouteName: 'Entertainment'}},
},
{
hideStatusBar: false,
initialRouteName: 'Home',
drawerPosition: 'right',
drawerBackgroundColor: '#2a292d',
overlayColor: '#2a292d',
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor:'#fff' ,
activeBackgroundColor: '#ff4136',
labelStyle: styles.drawerLabelStyle,
},
},
);
const AppContainer = createAppContainer(TopLevelNavigator);
So as shown, my Drawer navigation except for Home page takes in one page called CatsPage which then takes in a param and depending on that, it makes an API call and fetches data. Now Inside that, I have a button which goes to single page viewing the data of that article. Every time I go back, the singlepage gets unmounted. It works as intended. But the problem here is that if I am in page Entertainment and open an article from inside of there and go back, it goes back to home and not Entertainment. I can not wrap my head around of why that is. I did remove the initialRouteName: Home from Stack navigator thinking that might have been the issue but that did not help either. Any help is appreciated. Thanks!
Using the same page at the same time is not a good idea. It may not work as intended. And the same thing about routename is not good either.
You can try with 'createStackNavigator'
const MainNavigator = createStackNavigator({
Drawers: { screen: TopLevelNavigator }
});
const AppContainer = createAppContainer(MainNavigator);
Related
I am using navigation drawer in react native & on dashboard initial route i have javascript graph & when i navigate to other pages & come back i want to optional refresh it. It depends from which page user is coming from for example if user navigates to detail page & come back graph should not refresh & incase user navigates to come other screen like help screen & come back it should not refresh.
I found a way to not the refresh routes were to put unmountInactiveroutes in drawer options, but then all routes where not refresh which was hard to maintain.
Another option i tried using memo to remember dashboard component state but it is not working.
Any clue will be appreciated.
const Drawer = createDrawerNavigator({
Home: {
screen: Home
},
.....
SearchResultPage :{
screen: SearchResultPage
}
}, {
initialRouteName: AppConstants.NAV_HOME,
//unmountInactiveRoutes: true,
navigationOptions: {
headerVisible: false
},
headerMode: AppConstants.NONE,
contentComponent: props => <Sidebar {...props}/>
})
const AppNavigator = createStackNavigator({
Drawer: {
screen: Drawer,
navigationOptions: {
header: null
}
}
}, {
initialRouteName: AppConstants.NAV_DRAWER,
//unmountInactiveRoutes: true,
headerMode: AppConstants.NONE
})
let AppContainer = createAppContainer(AppNavigator);
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'm developing an app in react-native, using react-navigation. I really love this library and the flexibility of it, but for the love of me i cannot seem to nest the navigators according to the schema i have.
The schema is actually not that complicated, so i'll try to explain it with words as well with a little schema.
My app will have a splash screen during which i'll do some logic (initialize the store, etc. etc.). The next screen is based on this logic, and can lead to a tutorial screen or the home itself.
Once the user has completed the tutorial it will be navigated to the home screen.
The user shouldn't be able to back to the tutorial from the home screen, should he come from there.
In the home screen i want a drawer navigator, that can lead to N screens . Each of this screen should just have a title and the back button, that brings back to the home.
One of this screen is the tutorial itself, which should have the same behaviour as the first time.
So to sum up:
Splash;
Tutorial (optional)
Home
Screen1;
Screen2;
....
Tutorial.
This is the code of my navigator:
import { createStackNavigator, createAppContainer, createDrawerNavigator, createSwitchNavigator } from 'react-navigation';
import HomeScreen from './home';
import Details from './details';
import SplashScreen from './splash';
import Tutorial from './tutorial';
const TutorialStack = createStackNavigator(
{ Tutorial },
{
mode: 'modal',
headerMode: 'none'
}
);
const DrawerNavigator = createDrawerNavigator(
{
Tutorial,
SplashScreen,
Home: HomeScreen,
Details
},
{
defaultNavigationOptions: {
drawerLockMode: 'locked-closed'
},
drawerBackgroundColor: 'rgba(255,255,255,.5)',
overlayColor: '#6b52ae',
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#6b52ae'
}
}
);
const RootStack = createStackNavigator(
{
Home: HomeScreen,
DrawerNavigator
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}
},
);
const AppNavigator = createSwitchNavigator({
SplashScreen,
TutorialStack,
RootStack
}, {
mode: 'modal',
headerMode: 'none'
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
I get the transitions almost correctly, but:
If i try to go back to the tutorial, i can (and i also inherit the header from the next navigator)
I can go back from a screen (e.g. Details) to home, and when i get there i get another 'back' arrow - this way i can go back and forth from home to details indefinetly.
I know i'm doing something wrong with the nesting, but i cannot seem to get it right.
Thanks to anyone who will help me!
I always use react-native-router-flux for navigation, but on this project I need to use react-navigation and I got some troubles with it. I need to implement drawer and tabBar inside stack navigator.
Problems:
I use header component from native-base library but i can't open
drawer.
How to use my own customized component for drawer and tabBar?
Maybe I need to chage structure. I will consider any recommendations how to improve structure.
I used version 3 of react-navigation.
My code:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration },
}),
navigationOptions: {
header: null
}
},
mainFlow: {
screen: createStackNavigator({
MyDrawer: createDrawerNavigator({
Dashboard: {
screen: Home,
},
first: {
screen: first,
},
second: {
screen: second
},
third: {
screen: third
},
last: {
screen: last
}
}),
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
firsrTab: { screen: Screen1 },
secondTab: { screen: Screen2 },
thirdTab: { screen: Screen3 },
nextTab: { screen: Screen4 }
}),
navigationOptions: {
header: null
},
}
}),
navigationOptions: {
header: null
}
}
});
const AppContainer = createAppContainer(AppStackNavigator);
import React from 'react';
import { Header, Left, Icon, Right } from 'native-base';
const CustomHeader = (props) => {
return(
<Header>
<Left>
<Icon
name='menu'
onPress={() => {this.props.navigation.openDrawer()}}
/>
</Left>
</Header>
)
}
export { CustomHeader }
You might wanna consider the SwitchNavigator for the authentication flow instead of a Stack at the top as it replaces the routes so that you can never navigate back to the login/signup/splash once you get into the application and for accessing Tabs and Drawer inside stack/switch, you can wrap the Drawer inside your top level navigator and tab inside the drawer.
So you root navigation would look like this.
export default RootNavigation = createSwitchNavigator({
LoginScreen: {screen: LoginContainer},
Application: {screen: AppDrawer},
});
Your drawer navigator should be like the following:
const AppDrawer = createDrawerNavigator({
ApplicationTab: {screen: TabBar},
... other screen that you might want to use in drawer navigation.
}, {
contentComponent : (props) => <MyCustomDrawer {...props} />
});
and, Tab Navigator would be,
const TabBar = createBottomTabNavigator({
TabScreen1: {screen: Tab1},
... other tabs...
}, {
tabBarComponent : (props) => <MyTabBar {...props} />
});
If you put each of those navigators in single file then please do declare Tab before Drawer and Drawer before the Switch, else it would give errors.
In my experience, customising drawer navigator is very simple and fruitful but customising tab is not, there aren't proper API doc for the same and community answers are also somewhat misleading.
BUT, with normal use cases and for most of the vivid ones too, you can do your job without needing to override the default one as it is already highly operable and customisable in terms of icons, materialism and each tab exposes its on onPress that can also be easily overriden.
and as you as the drawer is not getting operated from/via the header, then can you please ensure that the navigation prop you are using to operate the drawer open close or toggle action is the one given by drawer ?
While working through the React Navigation tutorial on nesting navigators, I find that the tab navigator, MainScreenNavigator, overwrites the stack navigator, SimpleApp. The result is that the tabbed screens called in that object are the only ones that are displayed. The expected behavior that does not occur is that the button which links to the nested navigator never displays, so I cannot access the ChatScreen object.
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
I've spent hours trying to understand what I might have missed. This is my first attempt at learning this package, so I don't know if the tutorial is wrong, or that I missed a detail that breaks the process. The entire App.js file is located here.
Your help is much appreciated.
First, you need to pass StackNavigator's navigation to screens of Tabs. Because they are only screens you can deal with now since it's a initial screen.
const MainScreenNavigator = TabNavigator({
Recent: { screen: ({screenProps}) => <RecentChatsScreen screenProps={screenProps}/>,
All: { screen: ({screenProps}) => <AllContactsScreen screenProps={screenProps}/> },
});
//I added the export keyword.
export const SimpleApp = StackNavigator({
Home: {
screen: ({navigation}) => <MainScreenNavigator screenProps={{myStackNavigation:navigation}}/>,
navigationOptions: {
title: 'My Chats',
},
},
Chat: { screen: ChatScreen },
})
Now, you can call below code in RecentChatsScreen or AllContactsScreen.
this.props.navigation.screenProps.myStackNavigation.navigate('Chat');