- [ReactNative] Rename JSNavigationStack to ReactNavigator, rename scene config | Eric Vicenti

Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js

@@ -6,7 +6,7 @@
 'use strict';
 
 var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
-var JSNavigationStack = require('JSNavigationStack');
+var ReactNavigator = require('ReactNavigator');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
 var ScrollView = require('ScrollView');
@@ -16,8 +16,6 @@ var Text = require('Text');
 var TouchableBounce = require('TouchableBounce');
 var View = require('View');
 
-
-
 var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
 
 var _getRandomRoute = function() {
@@ -187,7 +185,7 @@ var BreadcrumbNavSample = React.createClass({
           onPress={this.onTabSelect.bind(this, 0)}
           icon={require('image!madman_tabnav_list')}
           title="One">
-          <JSNavigationStack
+          <ReactNavigator
             debugOverlay={false}
             style={[styles.appContainer]}
             initialRoute={initialRoute}
@@ -204,8 +202,8 @@ var BreadcrumbNavSample = React.createClass({
           onPress={this.onTabSelect.bind(this, 1)}
           icon={require('image!madman_tabnav_create')}
           title="Two">
-          <JSNavigationStack
+          <ReactNavigator
-            animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
+            configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom}
             debugOverlay={false}
             style={[styles.appContainer]}
             initialRoute={initialRoute}

Examples/UIExplorer/ReactNavigator/JumpingNavSample.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-var JSNavigationStack = require('JSNavigationStack');
+var ReactNavigator = require('ReactNavigator');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
 var ScrollView = require('ScrollView');
@@ -132,7 +132,7 @@ var JumpingNavSample = React.createClass({
 
   render: function() {
     return (
-      <JSNavigationStack
+      <ReactNavigator
         debugOverlay={false}
         style={[styles.appContainer]}
         initialRoute={INIT_ROUTE}

Examples/UIExplorer/ReactNavigator/NavigationBarSample.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-var JSNavigationStack = require('JSNavigationStack');
+var ReactNavigator = require('ReactNavigator');
 var NavigationBar = require('NavigationBar');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
@@ -70,7 +70,7 @@ var NavigationBarSample = React.createClass({
   render: function() {
     return (
       <View style={styles.appContainer}>
-        <JSNavigationStack
+        <ReactNavigator
           debugOverlay={false}
           style={styles.appContainer}
           initialRoute={newRandomRoute()}

Examples/UIExplorer/ReactNavigator/NestedBreadcrumbNavSample.js

@@ -6,7 +6,7 @@
 'use strict';
 
 var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
-var JSNavigationStack = require('JSNavigationStack');
+var ReactNavigator = require('ReactNavigator');
 var React = require('React');
 var ScrollView = require('ScrollView');
 var StyleSheet = require('StyleSheet');
@@ -90,7 +90,7 @@ var SecondDeepRouteMapper = (route, navigator) => (
         <Text style={styles.buttonText}>Push Horizontal</Text>
       </View>
     </TouchableBounce>
-    <JSNavigationStack
+    <ReactNavigator
       style={styles.thirdDeepNavigator}
       initialRoute={{title: '3x Nested Horizontal'}}
       renderScene={ThirdDeepRouteMapper}
@@ -111,7 +111,7 @@ var FirstDeepRouteMapper = (route, navigator) => (
         <Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
       </View>
     </TouchableBounce>
-    <JSNavigationStack
+    <ReactNavigator
       style={styles.secondDeepNavigator}
       initialRoute={{title: '2x Nested Horizontal Nav'}}
       renderScene={SecondDeepRouteMapper}
@@ -132,9 +132,9 @@ var NestedBreadcrumbNavSample = React.createClass({
     var initialRoute = {title: 'Vertical'};
     // No navigation bar.
     return (
-      <JSNavigationStack
+      <ReactNavigator
         style={[styles.appContainer]}
-        animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
+        configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom}
         initialRoute={initialRoute}
         renderScene={FirstDeepRouteMapper}
       />

Examples/UIExplorer/ReactNavigator/ReactNavigatorExample.js

@@ -4,7 +4,7 @@
 'use strict';
 
 var React = require('React');
-var JSNavigationStack = require('JSNavigationStack');
+var ReactNavigator = require('ReactNavigator');
 var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var ScrollView = require('ScrollView');
@@ -35,7 +35,7 @@ class NavMenu extends React.Component {
         <TouchableHighlight style={styles.button} onPress={() => {
           this.props.onExampleExit();
         }}>
-          <Text style={styles.buttonText}>Exit JSNavigationStack Example</Text>
+          <Text style={styles.buttonText}>Exit ReactNavigator Example</Text>
         </TouchableHighlight>
       </ScrollView>
     );
@@ -45,7 +45,7 @@ class NavMenu extends React.Component {
 var TabBarExample = React.createClass({
 
   statics: {
-    title: '<JSNavigationStack>',
+    title: '<ReactNavigator>',
     description: 'JS-implemented navigation',
   },
 
@@ -69,11 +69,11 @@ var TabBarExample = React.createClass({
 
   render: function() {
     return (
-      <JSNavigationStack
+      <ReactNavigator
         style={styles.container}
         initialRoute={{ id: 'menu', }}
         renderScene={this.renderScene}
-        animationConfigRouteMapper={(route) => JSNavigationStack.AnimationConfigs.FloatFromBottom}
+        configureScene={(route) => ReactNavigator.SceneConfigs.FloatFromBottom}
       />
     );
   },

Examples/UIExplorer/UIExplorerList.js

@@ -21,7 +21,7 @@ var {
   TouchableHighlight,
   View,
 } = React;
-var JSNavigationStackExample = require('./JSNavigationStack/JSNavigationStackExample');
+var ReactNavigatorExample = require('./ReactNavigator/ReactNavigatorExample');
 
 var createExamplePage = require('./createExamplePage');
 
@@ -33,7 +33,7 @@ var COMPONENTS = [
   require('./ListViewSimpleExample'),
   require('./MapViewExample'),
   require('./NavigatorIOSExample'),
-  JSNavigationStackExample,
+  ReactNavigatorExample,
   require('./PickerExample'),
   require('./ScrollViewExample'),
   require('./SliderIOSExample'),
@@ -146,9 +146,9 @@ class UIExplorerList extends React.Component {
   }
 
   _onPressRow(example) {
-    if (example === JSNavigationStackExample) {
+    if (example === ReactNavigatorExample) {
       this.props.onExternalExampleRequested(
-        JSNavigationStackExample
+        ReactNavigatorExample
       );
       return;
     }

Examples/UIExplorer/ViewExample.js

@@ -17,36 +17,42 @@ var {
   View,
 } = React;
 
-var UIExplorerBlock = require('./UIExplorerBlock');
+var styles = StyleSheet.create({
-var UIExplorerPage = require('./UIExplorerPage');
+  box: {
-
+    backgroundColor: '#527FE4',
-var ViewExample = React.createClass({
+    borderColor: '#000033',
-  statics: {
+    borderWidth: 1,
-    title: '<View>',
+  }
-    description: 'Basic building block of all UI.'
+});
-  },
-  getInitialState: function() {
-    return {
-      textBorderExampleHeight: 20,
-    };
-  },
 
+exports.title = '<View>';
+exports.description = 'Basic building block of all UI.';
+exports.displayName = 'ViewExample';
+exports.examples = [
+  {
+    title: 'Background Color',
     render: function() {
       return (
-      <UIExplorerPage title={this.props.navigator ? null : '<View>'}>
-        <UIExplorerBlock title="Background Color">
         <View style={{backgroundColor: '#527FE4', padding: 5}}>
           <Text style={{fontSize: 11}}>
             Blue background
           </Text>
         </View>
-        </UIExplorerBlock>
+      );
-        <UIExplorerBlock title="Border">
+    },
+  }, {
+    title: 'Border',
+    render: function() {
+      return (
         <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
           <Text style={{fontSize: 11}}>5px blue border</Text>
         </View>
-        </UIExplorerBlock>
+      );
-        <UIExplorerBlock title="Padding/Margin">
+    },
+  }, {
+    title: 'Padding/Margin',
+    render: function() {
+      return (
         <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
           <View style={[styles.box, {padding: 5}]}>
             <Text style={{fontSize: 11}}>5px padding</Text>
@@ -63,8 +69,12 @@ var ViewExample = React.createClass({
             </Text>
           </View>
         </View>
-        </UIExplorerBlock>
+      );
-        <UIExplorerBlock title="Border Radius">
+    },
+  }, {
+    title: 'Border Radius',
+    render: function() {
+      return (
         <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
           <Text style={{fontSize: 11}}>
             Too much use of `borderRadius` (especially large radii) on
@@ -72,11 +82,19 @@ var ViewExample = React.createClass({
             Use sparingly.
           </Text>
         </View>
-        </UIExplorerBlock>
+      );
-        <UIExplorerBlock title="Circle with Border Radius">
+    },
+  }, {
+    title: 'Circle with Border Radius',
+    render: function() {
+      return (
         <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
-        </UIExplorerBlock>
+      );
-        <UIExplorerBlock title="Overflow">
+    },
+  }, {
+    title: 'Overflow',
+    render: function() {
+      return (
         <View style={{flexDirection: 'row'}}>
           <View
             style={{
@@ -97,8 +115,13 @@ var ViewExample = React.createClass({
             </View>
           </View>
         </View>
-        </UIExplorerBlock>
+      );
-        <UIExplorerBlock title="Opacity">
+    },
+  }, {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View>
           <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
           <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
           <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
@@ -106,23 +129,8 @@ var ViewExample = React.createClass({
           <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
           <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
           <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
-        </UIExplorerBlock>
+        </View>
-      </UIExplorerPage>
       );
     },
-
-  updateHeight: function() {
-    var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
-    this.setState({textBorderExampleHeight: height});
   },
-});
+];
-
-var styles = StyleSheet.create({
-  box: {
-    backgroundColor: '#527FE4',
-    borderColor: '#000033',
-    borderWidth: 1,
-  }
-});
-
-module.exports = ViewExample;

Libraries/CustomComponents/ReactNavigator/ReactNavigator.js

@@ -1,7 +1,7 @@
 /**
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
- * @providesModule JSNavigationStack
+ * @providesModule ReactNavigator
  */
 
 "use strict"
@@ -10,7 +10,7 @@ var AnimationsDebugModule = require('NativeModules').AnimationsDebugModule;
 var Backstack = require('Backstack');
 var Dimensions = require('Dimensions');
 var InteractionMixin = require('InteractionMixin');
-var JSNavigationStackAnimationConfigs = require('JSNavigationStackAnimationConfigs');
+var ReactNavigatorSceneConfigs = require('ReactNavigatorSceneConfigs');
 var PanResponder = require('PanResponder');
 var React = require('React');
 var StaticContainer = require('StaticContainer.react');
@@ -72,10 +72,10 @@ var styles = StyleSheet.create({
   }
 });
 
-var JSNavigationStack = React.createClass({
+var ReactNavigator = React.createClass({
 
   propTypes: {
-    animationConfigRouteMapper: PropTypes.func,
+    configureScene: PropTypes.func,
     // Returns the rendered scene to display when invoked with (route, navigator)
     renderScene: PropTypes.func.isRequired,
     initialRoute: PropTypes.object,
@@ -90,7 +90,7 @@ var JSNavigationStack = React.createClass({
     onItemRef: PropTypes.func,
     // Define the component to use for the nav bar, which will get navState and navigator props
     navigationBar: PropTypes.node,
-    // The navigator object from a parent JSNavigationStack
+    // The navigator object from a parent ReactNavigator
     navigator: PropTypes.object,
 
     /**
@@ -102,14 +102,14 @@ var JSNavigationStack = React.createClass({
   },
 
   statics: {
-    AnimationConfigs: JSNavigationStackAnimationConfigs,
+    SceneConfigs: ReactNavigatorSceneConfigs,
   },
 
   mixins: [TimerMixin, InteractionMixin, Subscribable.Mixin],
 
   getDefaultProps: function() {
     return {
-      animationConfigRouteMapper: () => JSNavigationStackAnimationConfigs.PushFromRight,
+      configureScene: () => ReactNavigatorSceneConfigs.PushFromRight,
       sceneStyle: styles.defaultSceneStyle,
     };
   },
@@ -128,12 +128,12 @@ var JSNavigationStack = React.createClass({
     } else {
       invariant(
         routeStack.length >= 1,
-        'JSNavigationStack requires props.initialRoute or props.initialRouteStack.'
+        'ReactNavigator requires props.initialRoute or props.initialRouteStack.'
       );
     }
     return {
-      animationConfigStack: routeStack.map(
+      sceneConfigStack: routeStack.map(
-        (route) => this.props.animationConfigRouteMapper(route)
+        (route) => this.props.configureScene(route)
       ),
       idStack: routeStack.map(() => getuid()),
       routeStack,
@@ -203,7 +203,7 @@ var JSNavigationStack = React.createClass({
     this.springSystem = new rebound.SpringSystem();
     this.spring = this.springSystem.createSpring();
     this.spring.setRestSpeedThreshold(0.05);
-    var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
+    var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
     animationConfig && this._configureSpring(animationConfig);
     this.spring.addListener(this);
     this.onSpringUpdate();
@@ -246,8 +246,8 @@ var JSNavigationStack = React.createClass({
     this.setState({
       idStack: nextRouteStack.map(getuid),
       routeStack: nextRouteStack,
-      animationConfigStack: nextRouteStack.map(
+      sceneConfigStack: nextRouteStack.map(
-        this.props.animationConfigRouteMapper
+        this.props.configureScene
       ),
       updatingRangeStart: 0,
       updatingRangeLength: nextRouteStack.length,
@@ -273,7 +273,7 @@ var JSNavigationStack = React.createClass({
         AnimationsDebugModule.startRecordingFps();
       }
       this._transitionToToIndexWithVelocity(
-        this.state.animationConfigStack[this.state.fromIndex].defaultTransitionVelocity
+        this.state.sceneConfigStack[this.state.fromIndex].defaultTransitionVelocity
       );
     }
   },
@@ -322,7 +322,7 @@ var JSNavigationStack = React.createClass({
   _transitionToToIndexWithVelocity: function(v) {
     this._configureSpring(
       // For visual consistency, the from index is always used to configure the spring
-      this.state.animationConfigStack[this.state.fromIndex]
+      this.state.sceneConfigStack[this.state.fromIndex]
     );
     this.state.isAnimating = true;
     this.spring.setVelocity(v);
@@ -332,7 +332,7 @@ var JSNavigationStack = React.createClass({
 
   _transitionToFromIndexWithVelocity: function(v) {
     this._configureSpring(
-      this.state.animationConfigStack[this.state.fromIndex]
+      this.state.sceneConfigStack[this.state.fromIndex]
     );
     this.state.isAnimating = true;
     this.spring.setVelocity(v);
@@ -383,7 +383,7 @@ var JSNavigationStack = React.createClass({
 
   _handleMoveShouldSetPanResponder: function(e, gestureState) {
     var currentRoute = this.state.routeStack[this.state.presentedIndex];
-    var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
+    var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
     if (!animationConfig.enableGestures) {
       return false;
     }
@@ -417,7 +417,7 @@ var JSNavigationStack = React.createClass({
       this.state.isResponderOnlyToBlockTouches = false;
       return;
     }
-    var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
+    var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
     var velocity = animationConfig.isVertical ? gestureState.vy : gestureState.vx;
     // It's not the real location. There is no *real* location - that's the
     // point of the pan gesture.
@@ -451,7 +451,7 @@ var JSNavigationStack = React.createClass({
 
   _handlePanResponderMove: function(e, gestureState) {
     if (!this.state.isResponderOnlyToBlockTouches) {
-      var animationConfig = this.state.animationConfigStack[this.state.presentedIndex];
+      var animationConfig = this.state.sceneConfigStack[this.state.presentedIndex];
       var distance = animationConfig.isVertical ? gestureState.dy : gestureState.dx;
       var gestureDetectMovement = animationConfig.gestureDetectMovement;
       var nextProgress = (distance - gestureDetectMovement) /
@@ -467,7 +467,7 @@ var JSNavigationStack = React.createClass({
     }
     // Use toIndex animation when we move forwards. Use fromIndex when we move back
     var animationIndex = this.state.presentedIndex < toIndex ? toIndex : fromIndex;
-    var animationConfig = this.state.animationConfigStack[animationIndex];
+    var animationConfig = this.state.sceneConfigStack[animationIndex];
     var styleToUse = {};
     var useFn = index < fromIndex || index < toIndex ?
       animationConfig.interpolators.out :
@@ -602,11 +602,11 @@ var JSNavigationStack = React.createClass({
     var activeLength = this.state.presentedIndex + 1;
     var activeStack = this.state.routeStack.slice(0, activeLength);
     var activeIDStack = this.state.idStack.slice(0, activeLength);
-    var activeAnimationConfigStack = this.state.animationConfigStack.slice(0, activeLength);
+    var activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
     var nextStack = activeStack.concat([route]);
     var nextIDStack = activeIDStack.concat([getuid()]);
     var nextAnimationConfigStack = activeAnimationConfigStack.concat([
-      this.props.animationConfigRouteMapper(route),
+      this.props.configureScene(route),
     ]);
     var requestTransitionAndResetUpdatingRange = () => {
       this._requestTransitionTo(nextStack.length - 1);
@@ -624,7 +624,7 @@ var JSNavigationStack = React.createClass({
     this.setState({
       idStack: nextIDStack,
       routeStack: nextStack,
-      animationConfigStack: nextAnimationConfigStack,
+      sceneConfigStack: nextAnimationConfigStack,
       jumpToIndex: nextStack.length - 1,
       updatingRangeStart: nextStack.length - 1,
       updatingRangeLength: 1,
@@ -687,15 +687,15 @@ var JSNavigationStack = React.createClass({
     // navigation actually happening
     var nextIDStack = this.state.idStack.slice();
     var nextRouteStack = this.state.routeStack.slice();
-    var nextAnimationModeStack = this.state.animationConfigStack.slice();
+    var nextAnimationModeStack = this.state.sceneConfigStack.slice();
     nextIDStack[index] = getuid();
     nextRouteStack[index] = route;
-    nextAnimationModeStack[index] = this.props.animationConfigRouteMapper(route);
+    nextAnimationModeStack[index] = this.props.configureScene(route);
 
     this.setState({
       idStack: nextIDStack,
       routeStack: nextRouteStack,
-      animationConfigStack: nextAnimationModeStack,
+      sceneConfigStack: nextAnimationModeStack,
       updatingRangeStart: index,
       updatingRangeLength: 1,
     }, () => {
@@ -784,7 +784,7 @@ var JSNavigationStack = React.createClass({
       this.setState({
         updatingRangeStart: updatingRangeStart,
         updatingRangeLength: updatingRangeLength,
-        animationConfigStack: this.state.animationConfigStack.slice(0, newStackLength),
+        sceneConfigStack: this.state.sceneConfigStack.slice(0, newStackLength),
         idStack: this.state.idStack.slice(0, newStackLength),
         routeStack: this.state.routeStack.slice(0, newStackLength),
       }, this._resetUpdatingRange);
@@ -857,4 +857,4 @@ var JSNavigationStack = React.createClass({
   },
 });
 
-module.exports = JSNavigationStack;
+module.exports = ReactNavigator;

Libraries/CustomComponents/ReactNavigator/ReactNavigatorSceneConfigs.js

@@ -1,7 +1,7 @@
 /**
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
- * @providesModule JSNavigationStackAnimationConfigs
+ * @providesModule ReactNavigatorSceneConfigs
  */
 'use strict';
 
@@ -260,7 +260,7 @@ var BaseConfig = {
   interpolators: Interpolators.Horizontal,
 };
 
-var JSNavigationStackAnimationConfigs = {
+var ReactNavigatorSceneConfigs = {
   PushFromRight: merge(BaseConfig, {
     // We will want to customize this soon
   }),
@@ -276,4 +276,4 @@ var JSNavigationStackAnimationConfigs = {
   }),
 };
 
-module.exports = JSNavigationStackAnimationConfigs;
+module.exports = ReactNavigatorSceneConfigs;

Libraries/react-native/react-native.js

@@ -25,8 +25,8 @@ var ReactNative = Object.assign(Object.create(require('React')), {
   ListView: require('ListView'),
   MapView: require('MapView'),
   NavigatorIOS: require('NavigatorIOS'),
-  JSNavigationStack: require('JSNavigationStack'),
   PickerIOS: require('PickerIOS'),
+  ReactNavigator: require('ReactNavigator'),
   ScrollView: require('ScrollView'),
   SliderIOS: require('SliderIOS'),
   SwitchIOS: require('SwitchIOS'),