Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Commit 44852e5

Browse files
brentvatnebrentvatne
authored
Merge pull request #11 from react-navigation/@brent/default-params
WIP: Specify default params in the params key in route config
2 parents 89fb96d + 7d3307e commit 44852e5

11 files changed

Lines changed: 150 additions & 48 deletions

File tree

‎example/.eslintrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"extends": "../.eslintrc",
33

44
"settings": {
5-
"import/core-modules": [ "expo", "@react-navigation/core" ]
5+
"import/core-modules": [ "expo", "@react-navigation/core", "react-navigation-stack" ]
66
},
77

88
"rules": {

‎example/App.js‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,27 @@ import React from 'react';
22
import Expo from 'expo';
33
import { FlatList, I18nManager } from 'react-native';
44
import { createAppContainer } from '@react-navigation/native';
5+
56
import {
67
Assets as StackAssets,
78
createStackNavigator,
89
} from 'react-navigation-stack';
910
import { ListSection, Divider } from 'react-native-paper';
1011

1112
import SimpleStack from './src/SimpleStack';
13+
import SimpleTabs from './src/SimpleTabs';
1214

13-
// Comment the following two lines to stop using react-native-screens
14-
import { useScreens } from 'react-native-screens';
15+
// Comment/uncomment the following two lines to toggle react-native-screens
16+
// import { useScreens } from 'react-native-screens';
17+
// useScreens();
1518

1619
// Uncomment the following line to force RTL. Requires closing and re-opening
1720
// your app after you first load it with this option enabled.
1821
I18nManager.forceRTL(false);
19-
// useScreens();
2022

2123
const data = [
22-
{ component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
24+
{ component: SimpleStack, title: 'Simple Stack', routeName: 'SimpleStack' },
25+
{ component: SimpleTabs, title: 'Simple Tabs', routeName: 'SimpleTabs' },
2326
];
2427

2528
// Cache images
@@ -30,16 +33,6 @@ class Home extends React.Component {
3033
title: 'Examples',
3134
};
3235

33-
componentDidMount() {
34-
// this.props.navigation.addListener('refocus', payload => {
35-
// console.log({ payload });
36-
// })
37-
38-
// setTimeout(() => {
39-
// this.props.navigation.emit('refocus', {lol: true});
40-
// }, 1000)
41-
}
42-
4336
_renderItem = ({ item }) => (
4437
<ListSection.Item
4538
title={item.title}
@@ -86,4 +79,5 @@ const Root = createStackNavigator(
8679
);
8780

8881
const App = createAppContainer(Root);
82+
export default App;
8983
Expo.registerRootComponent(App);

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"react-native-paper": "2.0.0-alpha.4",
2020
"react-native-screens": "^1.0.0-alpha.9",
2121
"react-navigation-stack": "^1.0.0-alpha.23",
22-
"react-navigation-tabs": "^1.0.0-alpha.3"
22+
"react-navigation-tabs": "^1.0.0-alpha.4"
2323
},
2424
"devDependencies": {
2525
"babel-plugin-module-resolver": "^3.0.0",

‎example/src/SimpleStack.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
import React from 'react';
2-
import {
3-
Dimensions,
4-
Button,
5-
ScrollView,
6-
TouchableOpacity,
7-
View,
8-
Text,
9-
} from 'react-native';
2+
import { Button, ScrollView, TouchableOpacity, View, Text } from 'react-native';
103
import { MaterialIcons } from 'react-native-vector-icons';
11-
import { withNavigation } from '@react-navigation/core';
124
import { createStackNavigator } from 'react-navigation-stack';
135

146
const LOREM_PAGE_ONE = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lacus malesuada tellus bibendum fringilla. Integer suscipit suscipit erat, sed molestie eros. Nullam fermentum odio vel mauris pulvinar accumsan. Duis blandit id nulla ac euismod. Nunc nec convallis mauris. Proin sit amet malesuada orci. Aliquam blandit mattis nisi ut eleifend. Morbi blandit ante neque, eu tincidunt est interdum in. Mauris pellentesque euismod nulla. Mauris posuere egestas nulla, sit amet eleifend quam egestas at. Maecenas odio erat, auctor eu consectetur eu, vulputate nec arcu. Praesent in felis massa. Nunc fermentum, massa vitae ultricies dictum, est mi posuere eros, sit amet posuere mi ante ac nulla. Etiam odio libero, tempor sit amet sagittis sed, fermentum ac lorem. Donec dignissim fermentum velit, ac ultrices nulla tristique vel.
@@ -54,7 +46,7 @@ class LoremScreen extends React.Component {
5446
}}
5547
>
5648
{this.props.navigation
57-
.getParam('text', LOREM_PAGE_ONE)
49+
.getParam('text')
5850
.split('\n')
5951
.map((p, i) => (
6052
<Text

‎example/src/SimpleTabs.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { createBottomTabNavigator } from 'react-navigation-tabs';
3+
import { Button, Text, View } from 'react-native';
4+
import { Feather } from '@expo/vector-icons';
5+
6+
class Screen extends React.Component {
7+
static navigationOptions = ({ navigation }) => ({
8+
tabBarLabel: navigation.getParam('title'),
9+
tabBarIcon: ({ tintColor }) => (
10+
<Feather size={25} name={navigation.getParam('icon')} color={tintColor} />
11+
),
12+
});
13+
14+
render() {
15+
return (
16+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
17+
<Text>{JSON.stringify(this.props.navigation.state.params)}</Text>
18+
<Button
19+
title="Go back"
20+
onPress={() => this.props.navigation.goBack(null)}
21+
/>
22+
</View>
23+
);
24+
}
25+
}
26+
27+
export default createBottomTabNavigator(
28+
{
29+
A: {
30+
screen: Screen,
31+
params: { title: 'First One', icon: 'activity' },
32+
},
33+
B: {
34+
screen: Screen,
35+
params: { title: 'Second One', icon: 'aperture' },
36+
},
37+
},
38+
{
39+
tabBarOptions: {
40+
activeTintColor: '#000',
41+
inactiveTintColor: '#eee',
42+
},
43+
}
44+
);

‎example/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4444,10 +4444,10 @@ react-navigation-stack@^1.0.0-alpha.23:
44444444
resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.0.0-alpha.23.tgz#515e940b5e1f864a73a80be43cafae767f9ed3f5"
44454445
integrity sha512-EhM9SIlWYeCC1f1Ju53AUVfTyY6HLJwuGMVcb/VeVT513fPgOijD4HlmOcAngkKNVMNOfhPuFgvngg9TM4vYOA==
44464446

4447-
react-navigation-tabs@^1.0.0-alpha.3:
4448-
version "1.0.0-alpha.3"
4449-
resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-1.0.0-alpha.3.tgz#dae59e0a448cfa8e194fe3776b1659e117f3a39b"
4450-
integrity sha512-V1iMy4QFhiWuBaaUMgWOuuBe0xl+/LXwiSwl4ejRDGRiPP7JLiqxFfgIo77X0Ce9YN2FOqq4A8GB7d4ssJtQIw==
4447+
react-navigation-tabs@^1.0.0-alpha.4:
4448+
version "1.0.0-alpha.4"
4449+
resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-1.0.0-alpha.4.tgz#321c8cc19d14268d343a830689c741bb94c6ba80"
4450+
integrity sha512-ng8sCJmcQj1ciWaj0eJudQvYng/oL24konNPNudSrMyVKAfKr4+HcRPLY/rol+efLJ8UGjXGv2qdRNkBNeaLew==
44514451
dependencies:
44524452
hoist-non-react-statics "^2.5.0"
44534453
prop-types "^15.6.1"

‎src/getChildEventSubscriber.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,10 +169,12 @@ export default function getChildEventSubscriber(addListener, key) {
169169
},
170170
emit(eventName, payload) {
171171
if (eventName !== 'refocus') {
172-
console.error(`navigation.emit only supports the 'refocus' event currently.`);
172+
console.error(
173+
`navigation.emit only supports the 'refocus' event currently.`
174+
);
173175
return;
174176
}
175177
emit(eventName, payload);
176-
}
178+
},
177179
};
178180
}

‎src/getNavigation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function getNavigation(
3939
};
4040
},
4141
dangerouslyGetParent: () => null,
42-
_childrenNavigation: getChildrenNavigationCache(getCurrentNavigation())
42+
_childrenNavigation: getChildrenNavigationCache(getCurrentNavigation()),
4343
};
4444

4545
const actionCreators = {

‎src/routers/StackRouter.js‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,11 @@ export default (routeConfigs, stackConfig = {}) => {
8484
})
8585
);
8686
}
87-
const params = (route.params || action.params || initialRouteParams) && {
87+
const params = (routeConfigs[initialRouteName].params ||
88+
route.params ||
89+
action.params ||
90+
initialRouteParams) && {
91+
...(routeConfigs[initialRouteName].params || {}),
8892
...(route.params || {}),
8993
...(action.params || {}),
9094
...(initialRouteParams || {}),
@@ -104,6 +108,15 @@ export default (routeConfigs, stackConfig = {}) => {
104108
};
105109
}
106110

111+
function getParamsForRouteAndAction(routeName, action) {
112+
let routeConfig = routeConfigs[routeName];
113+
if (routeConfig && routeConfig.params) {
114+
return { ...routeConfig.params, ...action.params };
115+
} else {
116+
return action.params;
117+
}
118+
}
119+
107120
const {
108121
getPathAndParamsForRoute,
109122
getActionForPathAndParams,
@@ -244,11 +257,11 @@ export default (routeConfigs, stackConfig = {}) => {
244257
}
245258
}
246259

247-
// Handle explicit push navigation action. This must happen after the
248-
// focused child router has had a chance to handle the action.
260+
// Handle push and navigate actions. This must happen after the focused
261+
// child router has had a chance to handle the action.
249262
if (
250263
behavesLikePushAction(action) &&
251-
childRouters[action.routeName] !== undefined
264+
childRouters[action.routeName] !== undefined // undefined means it's not a childRouter or a screen
252265
) {
253266
const childRouter = childRouters[action.routeName];
254267
let route;
@@ -268,6 +281,7 @@ export default (routeConfigs, stackConfig = {}) => {
268281
}
269282
});
270283

284+
// An instance of this route exists already and we're dealing with a navigate action
271285
if (action.type !== StackActions.PUSH && lastRouteIndex !== -1) {
272286
// If index is unchanged and params are not being set, leave state identity intact
273287
if (state.index === lastRouteIndex && !action.params) {
@@ -301,18 +315,25 @@ export default (routeConfigs, stackConfig = {}) => {
301315
}
302316

303317
if (childRouter) {
318+
// Delegate to the child router with the given action, or init it
304319
const childAction =
305-
action.action || NavigationActions.init({ params: action.params });
320+
action.action ||
321+
NavigationActions.init({
322+
params: getParamsForRouteAndAction(action.routeName, action),
323+
});
306324
route = {
307-
params: action.params,
308-
// merge the child state in this order to allow params override
325+
params: getParamsForRouteAndAction(action.routeName, action),
326+
// note(brentvatne): does it make sense to wipe out the params
327+
// here? or even to add params at all? need more info about what
328+
// this solves
309329
...childRouter.getStateForAction(childAction),
310330
routeName: action.routeName,
311331
key: action.key || generateKey(),
312332
};
313333
} else {
334+
// Create the route from scratch
314335
route = {
315-
params: action.params,
336+
params: getParamsForRouteAndAction(action.routeName, action),
316337
routeName: action.routeName,
317338
key: action.key || generateKey(),
318339
};
@@ -407,12 +428,14 @@ export default (routeConfigs, stackConfig = {}) => {
407428
if (childRouter) {
408429
const childAction =
409430
action.action ||
410-
NavigationActions.init({ params: action.params });
431+
NavigationActions.init({
432+
params: getParamsForRouteAndAction(action.routeName, action),
433+
});
411434
childState = childRouter.getStateForAction(childAction);
412435
}
413436
const routes = [...state.routes];
414437
routes[routeIndex] = {
415-
params: action.params,
438+
params: getParamsForRouteAndAction(action.routeName, action),
416439
// merge the child state in this order to allow params override
417440
...childState,
418441
routeName: action.routeName,
@@ -473,13 +496,21 @@ export default (routeConfigs, stackConfig = {}) => {
473496
if (router) {
474497
const childAction =
475498
newStackAction.action ||
476-
NavigationActions.init({ params: newStackAction.params });
499+
NavigationActions.init({
500+
params: getParamsForRouteAndAction(
501+
newStackAction.routeName,
502+
newStackAction
503+
),
504+
});
477505

478506
childState = router.getStateForAction(childAction);
479507
}
480508

481509
return {
482-
params: newStackAction.params,
510+
params: getParamsForRouteAndAction(
511+
newStackAction.routeName,
512+
newStackAction
513+
),
483514
...childState,
484515
routeName: newStackAction.routeName,
485516
key: newStackAction.key || generateKey(),

‎src/routers/SwitchRouter.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,15 @@ export default (routeConfigs, config = {}) => {
4343
}
4444
});
4545

46+
function getParamsForRoute(routeName, params) {
47+
let routeConfig = routeConfigs[routeName];
48+
if (routeConfig && routeConfig.params) {
49+
return { ...routeConfig.params, ...params };
50+
} else {
51+
return params;
52+
}
53+
}
54+
4655
const {
4756
getPathAndParamsForRoute,
4857
getActionForPathAndParams,
@@ -56,8 +65,12 @@ export default (routeConfigs, config = {}) => {
5665
}
5766

5867
function resetChildRoute(routeName) {
59-
const params =
68+
let initialParams =
6069
routeName === initialRouteName ? initialRouteParams : undefined;
70+
// note(brentvatne): merging initialRouteParams *on top* of default params
71+
// on the route seems incorrect but it's consistent with existing behavior
72+
// in stackrouter
73+
let params = getParamsForRoute(routeName, initialParams);
6174
const childRouter = childRouters[routeName];
6275
if (childRouter) {
6376
const childAction = NavigationActions.init();

0 commit comments

Comments
 (0)