[React Native] Persist open UIExplorer example between refreshes

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -43,22 +43,23 @@ var UIExplorerApp = React.createClass({
         />
       );
     }
-      return (
-        <NavigatorIOS
-          style={styles.container}
-          initialRoute={{
-            title: 'UIExplorer',
-            component: UIExplorerList,
-            passProps: {
-              onExternalExampleRequested: (example) => {
-                this.setState({ openExternalExample: example, });
-              },
-            }
-          }}
-          itemWrapperStyle={styles.itemWrapper}
-          tintColor="#008888"
-        />
-      );
+
+    return (
+      <NavigatorIOS
+        style={styles.container}
+        initialRoute={{
+          title: 'UIExplorer',
+          component: UIExplorerList,
+          passProps: {
+            onExternalExampleRequested: (example) => {
+              this.setState({ openExternalExample: example, });
+            },
+          }
+        }}
+        itemWrapperStyle={styles.itemWrapper}
+        tintColor="#008888"
+      />
+    );
   }
 });
 

Examples/UIExplorer/UIExplorerList.js

@@ -32,6 +32,7 @@ var {
 var { TestModule } = React.addons;
 
 import type { ExampleModule } from 'ExampleTypes';
+import type { NavigationContext } from 'NavigationContext';
 
 var createExamplePage = require('./createExamplePage');
 
@@ -129,7 +130,10 @@ COMPONENTS.concat(APIS).forEach((Example) => {
 });
 
 type Props = {
-  navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
+  navigator: {
+    navigationContext: NavigationContext,
+    push: (route: {title: string, component: ReactClass<any,any,any>}) => void,
+  },
   onExternalExampleRequested: Function,
   onSelectExample: Function,
   isInDrawer: bool,
@@ -149,8 +153,25 @@ class UIExplorerList extends React.Component {
     };
   }
 
+  componentWillMount() {
+    this.props.navigator.navigationContext.addListener('didfocus', function(event) {
+      if (event.data.route.title === 'UIExplorer') {
+        Settings.set({visibleExample: null});
+      }
+    });
+  }
+
   componentDidMount() {
     this._search(this.state.searchText);
+
+    var visibleExampleTitle = Settings.get('visibleExample');
+    if (visibleExampleTitle) {
+      var predicate = (example) => example.title === visibleExampleTitle;
+      var foundExample = APIS.find(predicate) || COMPONENTS.find(predicate);
+      if (foundExample) {
+        setTimeout(() => this._openExample(foundExample), 100);
+      }
+    }
   }
 
   render() {
@@ -240,11 +261,12 @@ class UIExplorerList extends React.Component {
     Settings.set({searchText: text});
   }
 
-  _onPressRow(example: any) {
+  _openExample(example: any) {
     if (example.external) {
       this.props.onExternalExampleRequested(example);
       return;
     }
+
     var Component = makeRenderable(example);
     if (Platform.OS === 'ios') {
       this.props.navigator.push({
@@ -258,6 +280,11 @@ class UIExplorerList extends React.Component {
       });
     }
   }
+
+  _onPressRow(example: any) {
+    Settings.set({visibleExample: example.title});
+    this._openExample(example);
+  }
 }
 
 var styles = StyleSheet.create({