Update screen tracking page with appContainer (react-navigation#379)

Fixes react-navigation#378
* Use appContainer for onNavigationStateChange
* Create versioned screen-tracking.md
* Remove redux content

Author: gzzo

docs/screen-tracking.md

@@ -8,9 +8,8 @@ This example shows how to do screen tracking and send to Google Analytics. The a
 
 ## Listening to State Changes
 
-Most users can use `onNavigationStateChange` to track the screen. If you manually control the top-level navigator (if you have integrated redux), this will not work for you.
-
 ```js
+import { createAppContainer, createStackNavigator } from 'react-navigation';
 import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
 
 const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
@@ -29,10 +28,11 @@ function getActiveRouteName(navigationState) {
 }
 
 const AppNavigator = createStackNavigator(AppRouteConfigs);
+const AppContainer = createAppContainer(AppNavigator);
 
 export default () => (
-  <AppNavigator
-    onNavigationStateChange={(prevState, currentState) => {
+  <AppContainer
+    onNavigationStateChange={(prevState, currentState, action) => {
       const currentScreen = getActiveRouteName(currentState);
       const prevScreen = getActiveRouteName(prevState);
 
@@ -45,53 +45,3 @@ export default () => (
   />
 );
 ```
-
-## Screen tracking with Redux
-
-When using Redux, we can write a Redux middleware to track the screen. For this purpose,
-we will reuse `getActiveRouteName` from the previous section.
-
-```js
-import { NavigationActions } from 'react-navigation';
-import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
-
-const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
-
-const screenTracking = ({ getState }) => next => (action) => {
-  if (
-    action.type !== NavigationActions.NAVIGATE
-    && action.type !== NavigationActions.BACK
-  ) {
-    return next(action);
-  }
-
-  const currentScreen = getActiveRouteName(getState().navigation);
-  const result = next(action);
-  const nextScreen = getActiveRouteName(getState().navigation);
-  if (nextScreen !== currentScreen) {
-    // the line below uses the Google Analytics tracker
-    // change the tracker here to use other Mobile analytics SDK.
-    tracker.trackScreenView(nextScreen);
-  }
-  return result;
-};
-
-export default screenTracking;
-```
-
-### Create Redux store and apply the above middleware
-
-The `screenTracking` middleware can be applied to the store during its creation. See [Redux Integration](redux-integration.html) for details.
-
-```js
-const store = createStore(
-  combineReducers({
-    navigation: navigationReducer,
-    ...
-  }),
-  applyMiddleware(
-    screenTracking,
-    ...
-    ),
-);
-```

website/versioned_docs/version-3.x/screen-tracking.md

@@ -0,0 +1,47 @@
+---
+id: screen-tracking
+title: Screen tracking
+sidebar_label: Screen tracking
+---
+
+This example shows how to do screen tracking and send to Google Analytics. The approach can be adapted to any other analytics SDK. 
+
+## Listening to State Changes
+
+```js
+import { createAppContainer, createStackNavigator } from 'react-navigation';
+import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
+
+const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
+
+// gets the current screen from navigation state
+function getActiveRouteName(navigationState) {
+  if (!navigationState) {
+    return null;
+  }
+  const route = navigationState.routes[navigationState.index];
+  // dive into nested navigators
+  if (route.routes) {
+    return getActiveRouteName(route);
+  }
+  return route.routeName;
+}
+
+const AppNavigator = createStackNavigator(AppRouteConfigs);
+const AppContainer = createAppContainer(AppNavigator);
+
+export default () => (
+  <AppContainer
+    onNavigationStateChange={(prevState, currentState, action) => {
+      const currentScreen = getActiveRouteName(currentState);
+      const prevScreen = getActiveRouteName(prevState);
+
+      if (prevScreen !== currentScreen) {
+        // the line below uses the Google Analytics tracker
+        // change the tracker here to use other Mobile analytics SDK.
+        tracker.trackScreenView(currentScreen);
+      }
+    }}
+  />
+);
+```