Default params on stack router

Author: brentvatne

example/App.js

@@ -9,6 +9,7 @@ import {
 import { ListSection, Divider } from 'react-native-paper';
 
 import SimpleStack from './src/SimpleStack';
+import SimpleTabs from './src/SimpleTabs';
 
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
@@ -19,7 +20,8 @@ I18nManager.forceRTL(false);
 // useScreens();
 
 const data = [
-  { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
+  { component: SimpleStack, title: 'Simple Stack', routeName: 'SimpleStack' },
+  { component: SimpleTabs, title: 'Simple Tabs', routeName: 'SimpleTabs' },
 ];
 
 // Cache images

example/package.json

@@ -19,7 +19,7 @@
     "react-native-paper": "2.0.0-alpha.4",
     "react-native-screens": "^1.0.0-alpha.9",
     "react-navigation-stack": "^1.0.0-alpha.23",
-    "react-navigation-tabs": "^1.0.0-alpha.3"
+    "react-navigation-tabs": "^1.0.0-alpha.4"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.0.0",

example/src/SimpleTabs.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import { Button, Text, View } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+
+class Screen extends React.Component {
+  static navigationOptions = ({ navigation }) => ({
+    tabBarLabel: navigation.getParam('title'),
+    tabBarIcon: ({ focused, tintColor }) => (
+      <Feather size={25} name={navigation.getParam('icon')} color={tintColor} />
+    ),
+  });
+
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>{JSON.stringify(this.props.navigation.state.params)}</Text>
+        <Button
+          title="Go back"
+          onPress={() => this.props.navigation.goBack(null)}
+        />
+      </View>
+    );
+  }
+}
+
+export default createBottomTabNavigator(
+  {
+    A: {
+      screen: Screen,
+      params: { title: 'First One', icon: 'activity' },
+    },
+    B: {
+      screen: Screen,
+      params: { title: 'Second One', icon: 'aperture' },
+    },
+  },
+  {
+    tabBarOptions: {
+      activeTintColor: '#000',
+      inactiveTintColor: '#eee',
+    },
+  }
+);

example/yarn.lock

@@ -4444,10 +4444,10 @@ react-navigation-stack@^1.0.0-alpha.23:
   resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.0.0-alpha.23.tgz#515e940b5e1f864a73a80be43cafae767f9ed3f5"
   integrity sha512-EhM9SIlWYeCC1f1Ju53AUVfTyY6HLJwuGMVcb/VeVT513fPgOijD4HlmOcAngkKNVMNOfhPuFgvngg9TM4vYOA==
 
-react-navigation-tabs@^1.0.0-alpha.3:
-  version "1.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-1.0.0-alpha.3.tgz#dae59e0a448cfa8e194fe3776b1659e117f3a39b"
-  integrity sha512-V1iMy4QFhiWuBaaUMgWOuuBe0xl+/LXwiSwl4ejRDGRiPP7JLiqxFfgIo77X0Ce9YN2FOqq4A8GB7d4ssJtQIw==
+react-navigation-tabs@^1.0.0-alpha.4:
+  version "1.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-1.0.0-alpha.4.tgz#321c8cc19d14268d343a830689c741bb94c6ba80"
+  integrity sha512-ng8sCJmcQj1ciWaj0eJudQvYng/oL24konNPNudSrMyVKAfKr4+HcRPLY/rol+efLJ8UGjXGv2qdRNkBNeaLew==
   dependencies:
     hoist-non-react-statics "^2.5.0"
     prop-types "^15.6.1"

src/routers/SwitchRouter.js

@@ -43,6 +43,15 @@ export default (routeConfigs, config = {}) => {
     }
   });
 
+  function getParamsForRoute(routeName, params) {
+    let routeConfig = routeConfigs[routeName];
+    if (routeConfig && routeConfig.params) {
+      return { ...routeConfig.params, ...params };
+    } else {
+      return params;
+    }
+  }
+
   const {
     getPathAndParamsForRoute,
     getActionForPathAndParams,
@@ -56,8 +65,12 @@ export default (routeConfigs, config = {}) => {
   }
 
   function resetChildRoute(routeName) {
-    const params =
+    let initialParams =
       routeName === initialRouteName ? initialRouteParams : undefined;
+    // note(brentvatne): merging initialRouteParams *on top* of default params
+    // on the route seems incorrect but it's consistent with existing behavior
+    // in stackrouter
+    let params = getParamsForRoute(routeName, initialParams);
     const childRouter = childRouters[routeName];
     if (childRouter) {
       const childAction = NavigationActions.init();