Navigation Event Subscriptions

examples/NavigationPlayground/js/SimpleStack.js

@@ -7,38 +7,101 @@ import { Button, ScrollView, StatusBar } from 'react-native';
 import { StackNavigator, SafeAreaView } from 'react-navigation';
 import SampleText from './SampleText';
 
-const MyNavScreen = ({ navigation, banner }) => (
-  <SafeAreaView>
-    <SampleText>{banner}</SampleText>
-    <Button
-      onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
-      title="Go to a profile screen"
-    />
-    <Button
-      onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
-      title="Go to a photos screen"
-    />
-    <Button onPress={() => navigation.goBack(null)} title="Go back" />
-    <StatusBar barStyle="default" />
-  </SafeAreaView>
-);
+class MyNavScreen extends React.Component {
+  render() {
+    const { navigation, banner } = this.props;
+    return (
+      <SafeAreaView>
+        <SampleText>{banner}</SampleText>
+        <Button
+          onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
+          title="Go to a profile screen"
+        />
+        <Button
+          onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
+          title="Go to a photos screen"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
 
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
-);
-MyHomeScreen.navigationOptions = {
-  title: 'Welcome',
-};
+class MyHomeScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+  componentDidMount() {
+    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_willFocus HomeScreen', a);
+  };
+  _onDF = a => {
+    console.log('_didFocus HomeScreen', a);
+  };
+  _onWB = a => {
+    console.log('_willBlur HomeScreen', a);
+  };
+  _onDB = a => {
+    console.log('_didBlur HomeScreen', a);
+  };
 
-const MyPhotosScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner={`${navigation.state.params.name}'s Photos`}
-    navigation={navigation}
-  />
-);
-MyPhotosScreen.navigationOptions = {
-  title: 'Photos',
-};
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="Home Screen" navigation={navigation} />;
+  }
+}
+
+class MyPhotosScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Photos',
+  };
+  componentDidMount() {
+    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_willFocus PhotosScreen', a);
+  };
+  _onDF = a => {
+    console.log('_didFocus PhotosScreen', a);
+  };
+  _onWB = a => {
+    console.log('_willBlur PhotosScreen', a);
+  };
+  _onDB = a => {
+    console.log('_didBlur PhotosScreen', a);
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <MyNavScreen
+        banner={`${navigation.state.params.name}'s Photos`}
+        navigation={navigation}
+      />
+    );
+  }
+}
 
 const MyProfileScreen = ({ navigation }) => (
   <MyNavScreen

examples/NavigationPlayground/js/SimpleTabs.js

@@ -114,4 +114,35 @@ const SimpleTabs = TabNavigator(
   }
 );
 
-export default SimpleTabs;
+class SimpleTabsContainer extends React.Component {
+  static router = SimpleTabs.router;
+  componentDidMount() {
+    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_onWillFocus tabsExample ', a);
+  };
+  _onDF = a => {
+    console.log('_onDidFocus tabsExample ', a);
+  };
+  _onWB = a => {
+    console.log('_onWillBlur tabsExample ', a);
+  };
+  _onDB = a => {
+    console.log('_onDidBlur tabsExample ', a);
+  };
+  render() {
+    return <SimpleTabs navigation={this.props.navigation} />;
+  }
+}
+
+export default SimpleTabsContainer;

examples/NavigationPlayground/yarn.lock

@@ -2399,7 +2399,7 @@ glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global@^4.3.0:
+global@^4.3.0, global@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
   dependencies:
@@ -4690,15 +4690,8 @@ react-native@^0.51.0:
     yargs "^9.0.0"
 
 "react-navigation@link:../..":
-  version "1.0.0-beta.27"
-  dependencies:
-    babel-plugin-transform-define "^1.3.0"
-    clamp "^1.0.1"
-    hoist-non-react-statics "^2.2.0"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.5.10"
-    react-native-drawer-layout-polyfill "^1.3.2"
-    react-native-tab-view "^0.0.74"
+  version "0.0.0"
+  uid ""
 
 react-proxy@^1.1.7:
   version "1.1.8"

package.json

@@ -16,6 +16,7 @@
     "test": "npm run lint && npm run jest",
     "codecov": "codecov",
     "jest": "jest",
+    "test-update-snapshot": "jest --updateSnapshot",
     "lint": "eslint .",
     "format": "eslint --fix .",
     "precommit": "lint-staged"
@@ -56,7 +57,7 @@
     "eslint-plugin-prettier": "^2.1.2",
     "eslint-plugin-react": "^7.1.0",
     "husky": "^0.14.3",
-    "jest": "^20.0.4",
+    "jest": "^22.1.3",
     "lint-staged": "^4.2.1",
     "prettier": "^1.5.3",
     "prettier-eslint": "^6.4.2",

prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  trailingComma: 'es5',
+  singleQuote: true,
+};

src/NavigationActions.js

@@ -4,6 +4,7 @@ const NAVIGATE = 'Navigation/NAVIGATE';
 const RESET = 'Navigation/RESET';
 const SET_PARAMS = 'Navigation/SET_PARAMS';
 const URI = 'Navigation/URI';
+const COMPLETE_TRANSITION = 'Navigation/COMPLETE_TRANSITION';
 
 const createAction = (type, fn) => {
   fn.toString = () => type;
@@ -57,6 +58,10 @@ const uri = createAction(URI, payload => ({
   uri: payload.uri,
 }));
 
+const completeTransition = createAction(COMPLETE_TRANSITION, payload => ({
+  type: COMPLETE_TRANSITION,
+}));
+
 const mapDeprecatedNavigateAction = action => {
   if (action.type === 'Navigate') {
     const payload = {
@@ -118,6 +123,7 @@ export default {
   RESET,
   SET_PARAMS,
   URI,
+  COMPLETE_TRANSITION,
 
   // Action creators
   back,
@@ -126,6 +132,7 @@ export default {
   reset,
   setParams,
   uri,
+  completeTransition,
 
   // TODO: Remove once old actions are deprecated
   mapDeprecatedActionAndWarn,