Nav bar save props (#2211)

This commit saves navBar component props in propsRegistry and restores the saved props
when the component is mounted, allowing us to pass unserializable props to custom navBar component.

docs/styling-the-navigator.md

@@ -53,7 +53,7 @@ this.props.navigator.setStyle({
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
   navBarCustomView: 'example.CustomTopBar', // registered component name
   navBarComponentAlignment: 'center', // center/fill
-  navBarCustomViewInitialProps: {}, // Serializable JSON passed as props
+  navBarCustomViewInitialProps: {}, // navBar custom component props
   navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
 
   navBarHidden: false, // make the nav bar hidden

src/deprecated/platformSpecificDeprecated.ios.js

@@ -31,7 +31,8 @@ function startTabBasedApp(params) {
       navigatorButtons,
       navigatorEventID
     } = _mergeScreenSpecificSettings(tab.screen, screenInstanceID, tab);
-    _processNavigatorButtons(navigatorButtons);
+    _saveNavigatorButtonsProps(navigatorButtons);
+    _saveNavBarComponentProps(navigatorStyle);
     tab.navigationParams = {
       screenInstanceID,
       navigatorStyle,
@@ -139,7 +140,8 @@ function startSingleScreenApp(params) {
     navigatorButtons,
     navigatorEventID
   } = _mergeScreenSpecificSettings(screen.screen, screenInstanceID, screen);
-  _processNavigatorButtons(navigatorButtons);
+  _saveNavigatorButtonsProps(navigatorButtons);
+  _saveNavBarComponentProps(navigatorStyle);
   params.navigationParams = {
     screenInstanceID,
     navigatorStyle,
@@ -238,7 +240,8 @@ function navigatorPush(navigator, params) {
     navigatorButtons,
     navigatorEventID
   } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
-  _processNavigatorButtons(navigatorButtons);
+  _saveNavigatorButtonsProps(navigatorButtons);
+  _saveNavBarComponentProps(navigatorStyle);
   const passProps = Object.assign({}, params.passProps);
   passProps.navigatorID = navigator.navigatorID;
   passProps.screenInstanceID = screenInstanceID;
@@ -297,7 +300,8 @@ function navigatorResetTo(navigator, params) {
     navigatorButtons,
     navigatorEventID
   } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
-  _processNavigatorButtons(navigatorButtons);
+  _saveNavigatorButtonsProps(navigatorButtons);
+  _saveNavBarComponentProps(navigatorStyle);
   const passProps = Object.assign({}, params.passProps);
   passProps.navigatorID = navigator.navigatorID;
   passProps.screenInstanceID = screenInstanceID;
@@ -366,6 +370,7 @@ function navigatorToggleNavBar(navigator, params) {
 }
 
 function navigatorSetStyle(navigator, params) {
+  _saveNavBarComponentProps(params);
   Controllers.NavigationControllerIOS(navigator.navigatorID).setStyle(params)
 }
 
@@ -447,7 +452,7 @@ function navigatorSwitchToTab(navigator, params) {
 }
 
 function navigatorSetButtons(navigator, navigatorEventID, params) {
-  _processNavigatorButtons(params);
+  _saveNavigatorButtonsProps(params);
   if (params.leftButtons) {
     const buttons = params.leftButtons.slice(); // clone
     for (let i = 0; i < buttons.length; i++) {
@@ -477,7 +482,8 @@ function showModal(params) {
     navigatorButtons,
     navigatorEventID
   } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
-  _processNavigatorButtons(navigatorButtons);
+  _saveNavigatorButtonsProps(navigatorButtons);
+  _saveNavBarComponentProps(navigatorStyle);
   const passProps = Object.assign({}, params.passProps);
   passProps.navigatorID = navigatorID;
   passProps.screenInstanceID = screenInstanceID;
@@ -646,7 +652,15 @@ async function getCurrentlyVisibleScreenId() {
   return await ScreenUtils.getCurrentlyVisibleScreenId();
 }
 
-function _processNavigatorButtons({rightButtons, leftButtons}) {
+function _saveNavBarComponentProps(navigatorStyle) {
+  if (navigatorStyle.navBarCustomViewInitialProps) {
+    const passPropsKey = _.uniqueId('navBarComponent');
+    PropRegistry.save(passPropsKey, navigatorStyle.navBarCustomViewInitialProps);
+    navigatorStyle.navBarCustomViewInitialProps = {passPropsKey};
+  }
+}
+
+function _saveNavigatorButtonsProps({rightButtons, leftButtons}) {
   _saveNavigatorButtonsPassProps(rightButtons);
   _saveNavigatorButtonsPassProps(leftButtons);
 }