Back out of D3000972

Reviewed By: dmmiller

Differential Revision: D3003211

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

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -27,7 +27,6 @@ var {
   RootContainer: NavigationRootContainer,
   Reducer: NavigationReducer,
   Header: NavigationHeader,
-  HeaderTitle: NavigationHeaderTitle,
 } = NavigationExperimental;
 
 const NavigationBasicReducer = NavigationReducer.StackReducer({
@@ -61,6 +60,12 @@ class NavigationAnimatedExample extends React.Component {
       />
     );
   }
+  handleBackAction() {
+    return (
+      this.navRootContainer &&
+      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
+    );
+  }
   _renderNavigated(navigationState, onNavigate) {
     if (!navigationState) {
       return null;
@@ -69,13 +74,11 @@ class NavigationAnimatedExample extends React.Component {
       <NavigationAnimatedView
         navigationState={navigationState}
         style={styles.animatedView}
-        renderOverlay={(scenes, index, position, layout) => (
+        renderOverlay={(props) => (
           <NavigationHeader
-            scenes={scenes}
-            index={index}
-            position={position}
-            layout={layout}
-            renderTitleComponent={pageState => <NavigationHeaderTitle>{pageState.key}</NavigationHeaderTitle>}
+            navigationState={props.navigationParentState}
+            position={props.position}
+            getTitle={state => state.key}
           />
         )}
         setTiming={(pos, navState) => {
@@ -118,7 +121,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: NavigationHeader.APPBAR_HEIGHT + NavigationHeader.STATUSBAR_HEIGHT,
+    marginTop: 64
   },
 });
 

Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js

@@ -23,7 +23,6 @@ const NavigationExampleRow = require('./NavigationExampleRow');
 const {
   RootContainer: NavigationRootContainer,
   Reducer: NavigationReducer,
-  Header: NavigationHeader,
 } = NavigationExperimental;
 const StackReducer = NavigationReducer.StackReducer;
 
@@ -94,7 +93,7 @@ const styles = StyleSheet.create({
   topView: {
     backgroundColor: '#E9E9EF',
     flex: 1,
-    paddingTop: NavigationHeader.STATUSBAR_HEIGHT,
+    paddingTop: 30,
   },
 });
 

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -28,7 +28,6 @@ const {
   Container: NavigationContainer,
   RootContainer: NavigationRootContainer,
   Header: NavigationHeader,
-  HeaderTitle: NavigationHeaderTitle,
   Reducer: NavigationReducer,
   View: NavigationView,
 } = NavigationExperimental;
@@ -155,15 +154,13 @@ class ExampleTabScreen extends React.Component {
       />
     );
   }
-
-  _renderHeader(scenes, index, position, layout) {
+  _renderHeader(props) {
     return (
       <NavigationHeader
-        scenes={scenes}
-        index={index}
-        position={position}
-        layout={layout}
-        renderTitleComponent={pageState => <NavigationHeaderTitle>{stateTypeTitleMap(pageState)}</NavigationHeaderTitle>}
+        navigationState={props.navigationParentState}
+        position={props.position}
+        layout={props.layout}
+        getTitle={state => stateTypeTitleMap(state)}
       />
     );
   }
@@ -273,7 +270,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: NavigationHeader.APPBAR_HEIGHT + NavigationHeader.STATUSBAR_HEIGHT,
+    marginTop: 64
   },
   tabContent: {
     flex: 1,

Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js

@@ -16,6 +16,7 @@
 var React = require('react-native');
 var {
   Text,
+  PixelRatio,
   StyleSheet,
   View,
   TouchableHighlight,
@@ -49,7 +50,7 @@ const styles = StyleSheet.create({
   row: {
     padding: 15,
     backgroundColor: 'white',
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
     borderBottomColor: '#CDCDCD',
   },
   rowText: {

Examples/UIExplorer/UIExplorerList.android.js

@@ -15,8 +15,6 @@
  */
 'use strict';
 
-const React = require('react');
-
 export type UIExplorerExample = {
   key: string;
   module: React.Component;

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -27,227 +27,123 @@
  */
 'use strict';
 
-const React = require('react-native');
+const Animated = require('Animated');
+const Image = require('Image');
 const NavigationContainer = require('NavigationContainer');
-const NavigationHeaderTitle = require('NavigationHeaderTitle');
-const NavigationHeaderBackButton = require('NavigationHeaderBackButton');
-
-const {
-  Animated,
-  Platform,
-  StyleSheet,
-  View,
-} = React;
-
-const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
-const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
+const NavigationRootContainer = require('NavigationRootContainer');
+const React = require('react-native');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableOpacity = require('TouchableOpacity');
+const View = require('View');
 
 import type {
-  NavigationScene,
+  NavigationState,
+  NavigationParentState
 } from 'NavigationStateUtils';
 
-type Renderer = (scene: NavigationScene) => ReactElement;
-
-type DefaultProps = {
-  renderTitleComponent: Renderer;
-  renderLeftComponent: Renderer;
-};
-
 type Props = {
+  navigationState: NavigationParentState,
+  onNavigate: Function,
   position: Animated.Value,
-  scenes: Array<NavigationScene>;
-  index: number;
-  renderTitleComponent: Renderer;
-  renderLeftComponent: Renderer;
-  renderRightComponent: Renderer;
-  style: any,
+  getTitle: (navState: NavigationState) => string,
 };
 
-class NavigationHeader extends React.Component<DefaultProps, Props, void> {
-  _renderLeftComponent(scene) {
-    const {
-      renderLeftComponent,
-      position,
-    } = this.props;
-
-    if (renderLeftComponent) {
-      const {
-        index,
-        state,
-      } = scene;
-
-      return (
-        <Animated.View
-          pointerEvents={this.props.index === index ? 'auto' : 'none'}
-          key={state.key}
-          style={[
-            styles.left,
-            {
-              opacity: position.interpolate({
-                inputRange: [ index - 1, index, index + 1 ],
-                outputRange: [ 0, 1, 0 ],
-              })
-            }
-          ]}
-        >
-          {renderLeftComponent(state, index)}
-        </Animated.View>
-      );
-    }
-
-    return null;
+class NavigationHeader extends React.Component {
+  _handleBackPress: Function;
+  props: Props;
+  componentWillMount() {
+    this._handleBackPress = this._handleBackPress.bind(this);
   }
-
-  _renderRightComponent(scene) {
-    const {
-      renderRightComponent,
-      position,
-    } = this.props;
-
-    if (renderRightComponent) {
-      const {
-        index,
-        state,
-      } = scene;
-
-      return (
-        <Animated.View
-          pointerEvents={this.props.index === index ? 'auto' : 'none'}
-          key={state.key}
-          style={[
-            styles.right,
-            {
-              opacity: position.interpolate({
-                inputRange: [ index - 1, index, index + 1 ],
-                outputRange: [ 0, 1, 0 ],
-              })
-            }
-          ]}
-        >
-          {renderRightComponent(state, index)}
-        </Animated.View>
-      );
-    }
-
-    return null;
-  }
-
-  _renderTitleComponent(scene) {
-    const {
-      renderTitleComponent,
-      position,
-    } = this.props;
-
-    if (renderTitleComponent) {
-      const {
-        index,
-        state,
-      } = scene;
-
-      return (
-        <Animated.View
-          pointerEvents={this.props.index === index ? 'auto' : 'none'}
-          key={state.key}
-          style={[
-            styles.title,
-            {
-              opacity: position.interpolate({
-                inputRange: [ index - 1, index, index + 1 ],
-                outputRange: [ 0, 1, 0 ],
-              }),
-              transform: [
-                {
-                  translateX: position.interpolate({
-                    inputRange: [ index - 1, index + 1 ],
-                    outputRange: [ 200, -200 ],
-                  }),
-                }
-              ],
-            }
-          ]}
-        >
-          {renderTitleComponent(state, index)}
-        </Animated.View>
-      );
-    }
-
-    return null;
-  }
-
   render() {
-    const { scenes } = this.props;
-
+    var state = this.props.navigationState;
     return (
-      <View style={[ styles.appbar, this.props.style ]}>
-        {scenes.map(this._renderLeftComponent, this)}
-        {scenes.map(this._renderTitleComponent, this)}
-        {scenes.map(this._renderRightComponent, this)}
-      </View>
+      <Animated.View
+        style={[
+          styles.header,
+        ]}>
+        {state.children.map(this._renderTitle, this)}
+        {this._renderBackButton()}
+      </Animated.View>
     );
   }
+  _renderBackButton() {
+    if (this.props.navigationState.index === 0) {
+      return null;
+    }
+    return (
+      <TouchableOpacity style={styles.backButton} onPress={this._handleBackPress}>
+        <Image source={require('./back_chevron.png')} style={styles.backButtonImage} />
+      </TouchableOpacity>
+    );
+  }
+  _renderTitle(childState, index) {
+    return (
+      <Animated.Text
+        key={childState.key}
+        style={[
+          styles.title,
+          {
+            opacity: this.props.position.interpolate({
+              inputRange: [index - 1, index, index + 1],
+              outputRange: [0, 1, 0],
+            }),
+            left: this.props.position.interpolate({
+              inputRange: [index - 1, index + 1],
+              outputRange: [200, -200],
+            }),
+            right: this.props.position.interpolate({
+              inputRange: [index - 1, index + 1],
+              outputRange: [-200, 200],
+            }),
+          },
+        ]}>
+        {this.props.getTitle(childState)}
+      </Animated.Text>
+    );
+  }
+  _handleBackPress() {
+    this.props.onNavigate(NavigationRootContainer.getBackAction());
+  }
 }
 
-const renderTitleComponent = pageState => <NavigationHeaderTitle>{pageState.title}</NavigationHeaderTitle>;
-const renderLeftComponent = (pageState, index) => index !== 0 ? <NavigationHeaderBackButton /> : null;
-
-NavigationHeader.defaultProps = {
-  renderTitleComponent,
-  renderLeftComponent,
-};
-
-NavigationHeader.propTypes = {
-  position: React.PropTypes.object.isRequired,
-  scenes: React.PropTypes.arrayOf(React.PropTypes.shape({
-    index: React.PropTypes.number,
-    state: React.PropTypes.any,
-  })).isRequired,
-  index: React.PropTypes.number.isRequired,
-  renderTitleComponent: React.PropTypes.func,
-  renderLeftComponent: React.PropTypes.func,
-  renderRightComponent: React.PropTypes.func,
-  style: View.propTypes.style,
-};
-
-NavigationHeader.APPBAR_HEIGHT = APPBAR_HEIGHT;
-NavigationHeader.STATUSBAR_HEIGHT = STATUSBAR_HEIGHT;
+NavigationHeader = NavigationContainer.create(NavigationHeader);
 
 const styles = StyleSheet.create({
-  appbar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    backgroundColor: Platform.OS === 'ios' ? 'rgba(255, 255, 255, .9)' : 'rgba(255, 255, 255, 1)',
-    borderBottomWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0,
-    borderBottomColor: 'rgba(0, 0, 0, .15)',
-    height: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
-    marginBottom: 16, // This is needed for elevation shadow
-    elevation: 2,
-  },
-
   title: {
+    textAlign: 'center',
+    marginTop: 10,
+    fontSize: 18,
+    fontWeight: '500',
+    color: '#0A0A0A',
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: APPBAR_HEIGHT,
-    right: APPBAR_HEIGHT,
-    marginTop: STATUSBAR_HEIGHT,
-  },
-
-  left: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
+    top: 20,
     left: 0,
-    marginTop: STATUSBAR_HEIGHT,
-  },
-
-  right: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
     right: 0,
-    marginTop: STATUSBAR_HEIGHT,
-  }
+  },
+  header: {
+    backgroundColor: '#EFEFF2',
+    paddingTop: 20,
+    top: 0,
+    height: 64,
+    right: 0,
+    left: 0,
+    borderBottomWidth: 0.5,
+    borderBottomColor: '#828287',
+    position: 'absolute',
+  },
+  backButton: {
+    width: 29,
+    height: 37,
+    position: 'absolute',
+    bottom: 4,
+    left: 2,
+    padding: 8,
+  },
+  backButtonImage: {
+    width: 13,
+    height: 21,
+  },
 });
 
-module.exports = NavigationContainer.create(NavigationHeader);
+module.exports = NavigationHeader;

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js

@@ -1,59 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule NavigationHeaderBackButton
- * @flow
-*/
-'use strict';
-
-const React = require('react-native');
-const NavigationContainer = require('NavigationContainer');
-const NavigationRootContainer = require('NavigationRootContainer');
-
-const {
-  Image,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-} = React;
-
-type Props = {
-  onNavigate: Function
-}
-
-const NavigationHeaderBackButton = (props: Props) => (
-  <TouchableOpacity style={styles.buttonContainer} onPress={() => props.onNavigate(NavigationRootContainer.getBackAction())}>
-    <Image style={styles.button} source={require('./assets/back-icon.png')} />
-  </TouchableOpacity>
-);
-
-NavigationHeaderBackButton.propTypes = {
-  onNavigate: React.PropTypes.func.isRequired
-};
-
-const styles = StyleSheet.create({
-  buttonContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  button: {
-    height: 24,
-    width: 24,
-    margin: Platform.OS === 'ios' ? 10 : 16,
-    resizeMode: 'contain'
-  }
-});
-
-module.exports = NavigationContainer.create(NavigationHeaderBackButton);

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js

@@ -1,74 +0,0 @@
-/**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
- *
- * Facebook, Inc. ("Facebook") owns all right, title and interest, including
- * all intellectual property and other proprietary rights, in and to the React
- * Native CustomComponents software (the "Software").  Subject to your
- * compliance with these terms, you are hereby granted a non-exclusive,
- * worldwide, royalty-free copyright license to (1) use and copy the Software;
- * and (2) reproduce and distribute the Software as part of your own software
- * ("Your Software").  Facebook reserves all rights not expressly granted to
- * you in this license agreement.
- *
- * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
- * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
- * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
- * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
- * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
- * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
- * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
- * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
- * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *
- * @providesModule NavigationHeaderTitle
- * @flow
- */
-'use strict';
-
-const React = require('react-native');
-
-const {
-  Platform,
-  StyleSheet,
-  View,
-  Text,
-} = React;
-
-type Props = {
-  children: ReactElement;
-  style: any;
-  textStyle: any;
-}
-
-const NavigationHeaderTitle = ({ children, style, textStyle }: Props) => (
-  <View style={[ styles.title, style ]}>
-    <Text style={[ styles.titleText, textStyle ]}>{children}</Text>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  title: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: 16
-  },
-
-  titleText: {
-    flex: 1,
-    fontSize: 18,
-    fontWeight: '500',
-    color: 'rgba(0, 0, 0, .9)',
-    textAlign: Platform.OS === 'ios' ? 'center' : 'left'
-  }
-});
-
-NavigationHeaderTitle.propTypes = {
-  children: React.PropTypes.string.isRequired,
-  style: View.propTypes.style,
-  textStyle: Text.propTypes.style
-};
-
-module.exports = NavigationHeaderTitle;

Libraries/NavigationExperimental/NavigationAnimatedView.js

@@ -21,9 +21,14 @@ var View = require('View');
 import type {
   NavigationState,
   NavigationParentState,
-  NavigationScene,
 } from 'NavigationStateUtils';
 
+type NavigationScene = {
+  index: number,
+  state: NavigationState,
+  isStale: boolean,
+};
+
 /**
  * Helper function to compare route keys (e.g. "9", "11").
  */
@@ -65,13 +70,6 @@ type Layout = {
   height: Animated.Value;
 };
 
-type OverlayRenderer = (
-  scenes: Array<NavigationScene>,
-  index: number,
-  position: Animated.Value,
-  layout: Layout
-) => ReactElement;
-
 type Position = Animated.Value;
 
 /**
@@ -253,11 +251,6 @@ class NavigationAnimatedView extends React.Component {
   }
 }
 
-NavigationAnimatedView.propTypes = {
-  navigationState: React.PropTypes.instanceOf(NavigationStateUtils),
-  style: View.propTypes.style,
-};
-
 function setDefaultTiming(position, navigationState) {
   Animated.spring(
     position,

Libraries/NavigationExperimental/NavigationExperimental.js

@@ -16,8 +16,6 @@ const NavigationCard = require('NavigationCard');
 const NavigationCardStack = require('NavigationCardStack');
 const NavigationContainer = require('NavigationContainer');
 const NavigationHeader = require('NavigationHeader');
-const NavigationHeaderTitle = require('NavigationHeaderTitle');
-const NavigationHeaderBackButton = require('NavigationHeaderBackButton');
 const NavigationLegacyNavigator = require('NavigationLegacyNavigator');
 const NavigationReducer = require('NavigationReducer');
 const NavigationRootContainer = require('NavigationRootContainer');
@@ -41,8 +39,6 @@ const NavigationExperimental = {
   Card: NavigationCard,
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
-  HeaderTitle: NavigationHeaderTitle,
-  HeaderBackButton: NavigationHeaderBackButton,
   LegacyNavigator: NavigationLegacyNavigator,
 };
 

Libraries/NavigationExperimental/NavigationStateUtils.js

@@ -23,12 +23,6 @@ export type NavigationParentState = {
   children: Array<NavigationState>;
 };
 
-export type NavigationScene = {
-  index: number;
-  state: NavigationState;
-  isStale: boolean;
-};
-
 export type NavigationAction = {
   type: string;
 };