Adopt NavigationExperimental in UIExplorer

Summary:Use the new Navigation library to make the UIExplorer navigation more flexible.

Deep linking examples are coming soon (hint: we just need to convert URIs to UIExplorerActions!)

Reviewed By: javache

Differential Revision: D2798050

fb-gh-sync-id: c7775393e2d7a30a161d0770192309567dcc8b0c
shipit-source-id: c7775393e2d7a30a161d0770192309567dcc8b0c

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -32,8 +32,8 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
   initialStates: [
     {key: 'First Route'}
   ],
-  matchAction: action => true,
-  actionStateMap: actionString => ({key: actionString}),
+  matchAction: action => action.type === 'push',
+  actionStateMap: action => ({key: action.key}),
 });
 
 class NavigationAnimatedExample extends React.Component {
@@ -45,7 +45,7 @@ class NavigationAnimatedExample extends React.Component {
       <NavigationRootContainer
         reducer={NavigationBasicReducer}
         ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        persistenceKey="NavigationAnimatedExampleState"
+        persistenceKey="NavigationAnimExampleState"
         renderNavigation={this._renderNavigated}
       />
     );
@@ -85,7 +85,7 @@ class NavigationAnimatedExample extends React.Component {
               <NavigationExampleRow
                 text="Push!"
                 onPress={() => {
-                  onNavigate('Route #' + navigationState.children.length);
+                  onNavigate({ type: 'push', key: 'Route #' + navigationState.children.length });
                 }}
               />
               <NavigationExampleRow

Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js

@@ -35,7 +35,7 @@ var EXAMPLES = {
   'Tic Tac Toe': require('./NavigationTicTacToeExample'),
 };
 
-var EXAMPLE_STORAGE_KEY = 'NavigationExampleExample';
+var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
 
 var NavigationExperimentalExample = React.createClass({
   statics: {

Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js

@@ -31,7 +31,7 @@ const {
 
 type GameGrid = Array<Array<?string>>;
 
-const evenOddPlayerMap = ['o', 'x'];
+const evenOddPlayerMap = ['O', 'X'];
 const rowLeterMap = ['a', 'b', 'c'];
 
 function parseGame(game: string): GameGrid {
@@ -99,20 +99,20 @@ function isGameOver(gameString: string): boolean {
 
 class Cell extends React.Component {
   cellStyle() {
-    switch (this.props.value) {
-      case 'x':
+    switch (this.props.player) {
+      case 'X':
         return styles.cellX;
-      case 'o':
+      case 'O':
         return styles.cellO;
       default:
         return null;
     }
   }
   textStyle() {
-    switch (this.props.value) {
-      case 'x':
+    switch (this.props.player) {
+      case 'X':
         return styles.cellTextX;
-      case 'o':
+      case 'O':
         return styles.cellTextO;
       default:
         return {};
@@ -171,6 +171,11 @@ function TicTacToeGame(props) {
   );
   return (
     <View style={styles.container}>
+      <Text
+        style={styles.closeButton}
+        onPress={props.onExampleExit}>
+        Close
+      </Text>
       <Text style={styles.title}>EXTREME T3</Text>
       <View style={styles.board}>
         {rows}
@@ -184,18 +189,18 @@ function TicTacToeGame(props) {
 TicTacToeGame = NavigationContainer.create(TicTacToeGame);
 
 const GameActions = {
-  Turn: (row, col) => ({gameAction: 'turn', row, col }),
-  Reset: (row, col) => ({gameAction: 'reset' }),
+  Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
+  Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
 };
 
 function GameReducer(lastGame: ?string, action: Object): string {
-  if (!lastGame || !action || !action.gameAction) {
-    return lastGame || '';
+  if (!lastGame) {
+    lastGame = '';
   }
-  if (action.gameAction === 'reset') {
+  if (action.type === 'TicTacToeResetAction') {
     return '';
   }
-  if (!isGameOver(lastGame) && action.gameAction === 'turn') {
+  if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
     return playTurn(lastGame, action.row, action.col);
   }
   return lastGame;
@@ -206,10 +211,11 @@ class NavigationTicTacToeExample extends React.Component {
     return (
       <NavigationRootContainer
         reducer={GameReducer}
-        persistenceKey="TicTacToeGame"
+        persistenceKey="TicTacToeGameState"
         renderNavigation={(game) => (
           <TicTacToeGame
             game={game}
+            onExampleExit={this.props.onExampleExit}
           />
         )}
       />
@@ -221,6 +227,12 @@ NavigationTicTacToeExample.GameReducer = GameReducer;
 NavigationTicTacToeExample.GameActions = GameActions;
 
 const styles = StyleSheet.create({
+  closeButton: {
+    position: 'absolute',
+    left: 10,
+    top: 30,
+    fontSize: 14,
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -257,7 +269,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#7ebd26',
   },
   cellText: {
-    borderRadius: 5,
     fontSize: 50,
     fontFamily: 'AvenirNext-Bold',
   },