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);
Related
I am using react navigation v3 in my app, I use stack navigator inside drawer navigator ,On the click of logout I navigate to login screen with clearing storage of user, But whenever I login again , Main component dose not call componentWillMount or componentDidMount method , and displays Previously loaded data on it. here is my code >
const screens = {
login: { screen: Login },
dashboard: { screen: Dashboard },
patientList:{screen:StackNav},
headerComponent:HeaderComponent
}
const MyDrawerNavigator = createDrawerNavigator(
screens,
{
initialRouteName: 'login',
contentComponent: Sidebar
}
);
App = createAppContainer(MyDrawerNavigator);
export default App;
StackNav ==
export default createStackNavigator({
PatientList,
PatientDetails
});
Logout Function ==
localStorageService.removeAllKeys().then((res) => {
this.props.navigation.navigate(route, { isLogin: 'N' })
});
In React Navigation 5.x
use unmountOnBlur
<Drawer.Screen
name={...}
component={...}
unmountOnBlur={true}
options={{unmountOnBlur: true}}
/>
put this in navigationOptions of drawer navigator
unmountInactiveRoutes: true
As Daniyal's awnser complementation: I've introduced the configuration inside createDrawerNavigator() configs as above:
const AppNavigator = createDrawerNavigator(
{
Home:{
screen: Home
},
Login:{
screen: Login,
navigationOptions: {
drawerLabel: () => null
}
}
},
{
unmountInactiveRoutes: true
});
And now all pages are working withouth any "cache".
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');
I have two components (List and Detail):
List.js:
export default class List extends React.Component {
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<Text style={styles.headerText}>List of Contents</Text>
<Button onPress={()=> navigate('Detail')} title="Go to details"/>
</View>
)
}
}
Detail.js:
export default class Detail extends React.Component {
render() {
return (
<View>
<Text style={styles.headerText}>Details of the content</Text>
</View>
)
}
}
I would like to have two screens (NowList and SoonList) which are basically the same type of list, so I am using the same List component for both the screen. And from each of these screens I want to navigate to the Details of the item, also which in this case has the same type of layout so I am using Detail component for both the list items.
Finally, when the App starts I want the NowList screen to show. And using the drawer I would like to navigate to SoonList screen.
I am not sure how to configure this route. But, this is how I have configured the routes for now:
const NowStack = StackNavigator({
NowList: {
screen: List,
navigationOptions: {
title: 'Now',
}
},
Detail: {
screen: Detail,
navigationOptions: {
title: 'Detail',
}
}
});
const SoonStack = StackNavigator({
SoonList: {
screen: List,
navigationOptions: {
title: 'Soon',
}
}
});
export const Drawer = DrawerNavigator({
Now: {
screen: NowStack,
},
Soon: {
screen: SoonStack,
}
});
When I navigate from NowList route to Detail route. There's a back button in the Detail route which on press navigates back to the NowList.
However, when I go to Soon route, and navigate to Detail route, I go to Detail screen. But, when I press the back button on Detail navigation header, instead of navigating back to the SoonList screen, I am navigated to the NowList screen.
I think I am missing something here, or my route layout is not how its suppose to be. Could you help me how to configure the routes so that I can use DrawerNavigator to navigate to different screens, and from those screens navigate to another screen and again back to the screen navigated from?
You can make a stack navigator that contain your drawer navigator and detail, this way you can access both now list and soon list from drawer and able to navigate to detail screen from both list.
const App = StackNavigator({
Drawer: {
screen: Drawer,
},
Detail: {
screen: Detail,
navigationOptions: {
title: 'Detail',
},
},
});
const Drawer = DrawerNavigator({
NowList: {
screen: List,
},
SoonList: {
screen: List,
},
});
Your route layout doesn't specify a Detail screen in the SoonStack navigator. When you navigate to Detail, react-navigation navigates to the only screen that is named that way. Since it is in the NowStack, going back returns to the first screen in the stack.
To solve this, you can add another Detail screen to the SoonStack navigator, however you'd want to either name it differently, or navigate to each Detail screen using its key.
In order to be able to navigate to the right Detail screen, you can add a parameter to each stack navigator.
For example:
const SoonStack = StackNavigator({
SoonList: {
screen: List,
navigationOptions: {
title: 'Soon',
}
},
SoonDetail: {
screen: Detail,
navigationOptions: {
title: 'Detail',
}
}
},{
initialRouteParams: {
detailScreen: 'SoonDetail'
}
});
You can then use the parameter to navigate to the correct screen.
Also, it's possible to only use a single StackNavigator with the three distinct screens in it, and reset the stack to the correct screen when switching with the drawer.
You can read more about reset here.
how to use reset
If you have a single stack navigator:
const TheStack = StackNavigator({
NowList: { screen: List, ... },
SoonList: { screen: List, ... },
Detail: {screen: Details, ... }
});
Then the drawer can reset the stack state to be whatever you want. For example, if the first screen was NowList and SoonList is clicked in the drawer, you can call:
const action = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'SoonList'});
]
});
this.props.navigation.dispatch(resetAction);
This would cause the stack to reset and have the SoonList as the first screen. If Details is opened, then it is the second in the stack, and back will always go back to the correct screen.
Using the React Navigation tab navigator https://reactnavigation.org/docs/navigators/tab how do I make one of the tab buttons push the screen up as a full screen modal? I see the stack navigator has a mode=modal option. how do I get that mode to be used when clicking on the TakePhoto tab button? Clicking on it currently still shows the tab bar on the bottom.
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
TakePhoto: {
screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
},
});
Actually, there is no support in react-navigation to change the way of presentation on the fly from default to modal (see the discussion about this here). I ran into the same issue and solved it by using a very top StackNavigator with headerMode set to none and mode set to modal:
const MainTabNavigator = TabNavigator(
{
Tab1Home: { screen: Tab1Screen },
Tab2Home: { screen: Tab2Screen }
}
);
const LoginRegisterStackNavigator = StackNavigator({
Login: { screen: LoginScreen }
});
const ModalStackNavigator = StackNavigator({
MainTabNavigator: { screen: MainTabNavigator },
LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
headerMode: 'none',
mode: 'modal'
});
This allows me to do the following (using redux) in Tab1Screen and Tab2Screen to bring up the modal view from wherever I want:
this.props.navigation.navigate('LoginScreenStackNavigator');
Not sure if this is still relevant for you, but i've managed to find away to achieve this.
So i've managed to get it working by using the tabBarComponent inside the tabNavigatorConifg, you can stop the tab navigation from navigating depending on the index.
tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
<TabBarBottom
{...props}
jumpToIndex={index => {
if (index === 2) {
navigation.navigate('camera')
}
else {
jumpToIndex(index)
}
}}
/>
)
Once you've done this, my method of showing the view modally on top of the tab views was to put the tabnavigator inside of a stacknavigatior and then just navigate to a new screen inside of the stacknavigator.
react-navigation's bottomTabNavigator has a tabBarOnPress navigation option you can use to override tab presses:
https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress
const AppContainer = createStackNavigator(
{
default: createBottomTabNavigator(
{
TAB_0: Stack0,
TAB_1: Stack1,
TAB_2: Stack2,
TAB_3: View // plain rn-view, or any old unused screen
},
{
defaultNavigationOptions: {
// other tab navigation options...
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.key === 'TAB_3') {
navigation.navigate('tabToOpenAsModal');
} else {
defaultHandler();
}
}
}
}
),
tabToOpenAsModal: {
screen: TabToOpenAsModalScreen
}
},
{
mode: 'modal',
headerMode: 'none'
}
);
If you nest your tab navigator within a stack navigator with a modal, you can open this when the tab bar button is pressed. Since the modal was opened and not the tab, when the modal is closed the app returns to the screen that was visible before the modal tab was pressed.
One way to make the tab bar go away is to hide the tabBar with visible: false:
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
TakePhoto: {
screen: PhotoPickerScreen,
navigationOptions: {
tabBar: {
visible: false,
},
},
},
});
However, that does not seem to trigger any transition to fullscreen, which I guess is desired?
Another option could be to wrap PhotoPickerScreen inside a new StackNavigator and set that navigator to mode='modal'.
You might have to trigger the navigation to that modal from onPress on the tabItem somehow (eg. navigation.navigate('TakePhoto').)
Note, I'm trying to wrap my head around how best to structure navigation myself, so …
Third option, implementing a StackNavigator as parent, then adding the MyApp TabNavigator as the first route inside of it, could be the most flexible solution. Then the TakePhoto screen would be on the same level as the TabNavigator, allowing you to route to it from wherever.
Interested to hear what you come up with!
I suggest two solution
First one is about hide it
For seconde one please read that: https://reactnavigation.org/docs/hiding-tabbar-in-screens
<Tab.Screen
name={Routes.CREATE_ANNOUNCEMENT_SCREEN}
// name={Routes.TEST_SCREEN}
options={{
.
.
.
tabBarVisible: false, <----- solution 1
tabBarButton: (props) => ( <----- or solution 2
<TouchableOpacity
{...props}
onPress={() => {
navigation.navigate(Routes.DETAILS_SCREEN);
}}
/>
),
}}
component={CreateAnnouncementScreen}
/>
Docs are patchy in some areas, but here it is:
export default class HomeScene extends Component {
static navigationOptions = {
title: 'foo',
header:{
visible: true
}
}
....
}