Add an ability to disable built-in logger (#1115)

* Fix logger * Update Navigators.md * Update Navigators.md
react-navigation · Apr 24, 2017 · 0f6b328 · 0f6b328
1 parent c8062d0
commit 0f6b328
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/docs/api/navigators/Navigators.md b/docs/api/navigators/Navigators.md
@@ -48,9 +48,11 @@ When rendering one of the included navigators, the navigation prop is optional.
 
 For the purpose of convenience, the built-in navigators have this ability because behind the scenes they use `createNavigationContainer`. Usually, navigators require a navigation prop in order to function.
 
-### `onNavigationStateChange(prevState, newState)`
+Top-level navigators accept the following props:  
 
-Sometimes it is useful to know when navigation state managed by the top-level navigator changes. For this purpose, this function gets called every time with the previous state and the new state of the navigation.
+### `onNavigationStateChange(prevState, newState, action)`
+
+Function that gets called every time navigation state managed by the navigator changes. It receives the previous state, the new state of the navigation and the action that issued state change. By default it prints state changes to the console.
 
 ### `uriPrefix`
 

diff --git a/src/createNavigationContainer.js b/src/createNavigationContainer.js
@@ -19,7 +19,7 @@ import type {
 
 type NavigationContainerProps = {
   uriPrefix?: string,
-  onNavigationStateChange?: (NavigationState, NavigationState) => void,
+  onNavigationStateChange?: (NavigationState, NavigationState, NavigationAction) => void,
 };
 
 type Props<T> = NavigationContainerProps & NavigationNavigatorProps<T>;
@@ -75,7 +75,7 @@ export default function createNavigationContainer<T: *>(
       }
 
       const {
-        navigation, screenProps, navigationOptions, onNavigationStateChange,
+        navigation, screenProps, navigationOptions,
         ...containerProps
       } = props;
 
@@ -114,6 +114,34 @@ export default function createNavigationContainer<T: *>(
       }
     };
 
+    _onNavigationStateChange(
+      prevNav: NavigationState,
+      nav: NavigationState,
+      action: NavigationAction,
+    ) {
+      if (
+        typeof this.props.onNavigationStateChange === 'undefined'
+        && this._isStateful()
+      ) {
+        /* eslint-disable no-console */
+        if (console.group) {
+          console.group('Navigation Dispatch: ');
+          console.log('Action: ', action);
+          console.log('New State: ', nav);
+          console.log('Last State: ', prevNav);
+          console.groupEnd();
+        } else {
+          console.log('Navigation Dispatch: ', { action, newState: nav, lastState: prevNav });
+        }
+        /* eslint-enable no-console */
+        return;
+      }
+
+      if (typeof this.props.onNavigationStateChange === 'function') {
+        this.props.onNavigationStateChange(prevNav, nav, action);
+      }
+    }
+
     componentWillReceiveProps(nextProps: *) {
       this._validateProps(nextProps);
     }
@@ -135,19 +163,6 @@ export default function createNavigationContainer<T: *>(
       Linking.getInitialURL().then((url: string) => url && this._handleOpenURL(url));
     }
 
-    componentDidUpdate(prevProps: Props<T>, prevState: State) {
-      const [prevNavigationState, navigationState] = this._isStateful()
-        ? [prevState.nav, this.state.nav]
-        : [prevProps.navigation.state, this.props.navigation.state];
-
-      if (
-        prevNavigationState !== navigationState
-        && typeof this.props.onNavigationStateChange === 'function'
-      ) {
-        this.props.onNavigationStateChange(prevNavigationState, navigationState);
-      }
-    }
-
     componentWillUnmount() {
       Linking.removeEventListener('url', this._handleOpenURL);
       this.subs && this.subs.remove();
@@ -160,16 +175,7 @@ export default function createNavigationContainer<T: *>(
       }
       const nav = Component.router.getStateForAction(action, state.nav);
       if (nav && nav !== state.nav) {
-        if (console.group) {
-          console.group('Navigation Dispatch: ');
-          console.log('Action: ', action);
-          console.log('New State: ', nav);
-          console.log('Last State: ', state.nav);
-          console.groupEnd();
-        } else {
-          console.log('Navigation Dispatch: ', { action, newState: nav, lastState: state.nav });
-        }
-        this.setState({ nav });
+        this.setState({ nav }, () => this._onNavigationStateChange(state.nav, nav, action));
         return true;
       }
       return false;