Rework the NavigationHeader

Reviewed By: dmmiller, ericvicenti

Differential Revision: D3000972

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

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

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

Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js

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

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

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

Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js

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

Examples/UIExplorer/UIExplorerList.android.js

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

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -27,123 +27,227 @@
  */
 'use strict';
 
-const Animated = require('Animated');
-const Image = require('Image');
-const NavigationContainer = require('NavigationContainer');
-const NavigationRootContainer = require('NavigationRootContainer');
 const React = require('react-native');
-const StyleSheet = require('StyleSheet');
+const NavigationContainer = require('NavigationContainer');
-const Text = require('Text');
+const NavigationHeaderTitle = require('NavigationHeaderTitle');
-const TouchableOpacity = require('TouchableOpacity');
+const NavigationHeaderBackButton = require('NavigationHeaderBackButton');
-const View = require('View');
+
+const {
+  Animated,
+  Platform,
+  StyleSheet,
+  View,
+} = React;
+
+const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 
 import type {
-  NavigationState,
+  NavigationScene,
-  NavigationParentState
 } from 'NavigationStateUtils';
 
-type Props = {
+type Renderer = (scene: NavigationScene) => ReactElement;
-  navigationState: NavigationParentState,
+
-  onNavigate: Function,
+type DefaultProps = {
-  position: Animated.Value,
+  renderTitleComponent: Renderer;
-  getTitle: (navState: NavigationState) => string,
+  renderLeftComponent: Renderer;
 };
 
-class NavigationHeader extends React.Component {
+type Props = {
-  _handleBackPress: Function;
+  position: Animated.Value,
-  props: Props;
+  scenes: Array<NavigationScene>;
-  componentWillMount() {
+  index: number;
-    this._handleBackPress = this._handleBackPress.bind(this);
+  renderTitleComponent: Renderer;
-  }
+  renderLeftComponent: Renderer;
-  render() {
+  renderRightComponent: Renderer;
-    var state = this.props.navigationState;
+  style: any,
-    return (
+};
-      <Animated.View
+
-        style={[
+class NavigationHeader extends React.Component<DefaultProps, Props, void> {
-          styles.header,
+  _renderLeftComponent(scene) {
-        ]}>
+    const {
-        {state.children.map(this._renderTitle, this)}
+      renderLeftComponent,
-        {this._renderBackButton()}
+      position,
-      </Animated.View>
+    } = this.props;
-    );
+
-  }
+    if (renderLeftComponent) {
-  _renderBackButton() {
+      const {
-    if (this.props.navigationState.index === 0) {
+        index,
-      return null;
+        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 (
+
-      <TouchableOpacity style={styles.backButton} onPress={this._handleBackPress}>
+    return null;
-        <Image source={require('./back_chevron.png')} style={styles.backButtonImage} />
-      </TouchableOpacity>
-    );
   }
-  _renderTitle(childState, index) {
+
-    return (
+  _renderRightComponent(scene) {
-      <Animated.Text
+    const {
-        key={childState.key}
+      renderRightComponent,
-        style={[
+      position,
-          styles.title,
+    } = this.props;
-          {
+
-            opacity: this.props.position.interpolate({
+    if (renderRightComponent) {
-              inputRange: [index - 1, index, index + 1],
+      const {
-              outputRange: [0, 1, 0],
+        index,
-            }),
+        state,
-            left: this.props.position.interpolate({
+      } = scene;
-              inputRange: [index - 1, index + 1],
+
-              outputRange: [200, -200],
+      return (
-            }),
+        <Animated.View
-            right: this.props.position.interpolate({
+          pointerEvents={this.props.index === index ? 'auto' : 'none'}
-              inputRange: [index - 1, index + 1],
+          key={state.key}
-              outputRange: [-200, 200],
+          style={[
-            }),
+            styles.right,
-          },
+            {
-        ]}>
+              opacity: position.interpolate({
-        {this.props.getTitle(childState)}
+                inputRange: [ index - 1, index, index + 1 ],
-      </Animated.Text>
+                outputRange: [ 0, 1, 0 ],
-    );
+              })
+            }
+          ]}
+        >
+          {renderRightComponent(state, index)}
+        </Animated.View>
+      );
+    }
+
+    return null;
   }
-  _handleBackPress() {
+
-    this.props.onNavigate(NavigationRootContainer.getBackAction());
+  _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;
+
+    return (
+      <View style={[ styles.appbar, this.props.style ]}>
+        {scenes.map(this._renderLeftComponent, this)}
+        {scenes.map(this._renderTitleComponent, this)}
+        {scenes.map(this._renderRightComponent, this)}
+      </View>
+    );
   }
 }
 
-NavigationHeader = NavigationContainer.create(NavigationHeader);
+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;
 
 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: 20,
-    left: 0,
-    right: 0,
-  },
-  header: {
-    backgroundColor: '#EFEFF2',
-    paddingTop: 20,
     top: 0,
-    height: 64,
+    bottom: 0,
-    right: 0,
+    left: APPBAR_HEIGHT,
+    right: APPBAR_HEIGHT,
+    marginTop: STATUSBAR_HEIGHT,
+  },
+
+  left: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
     left: 0,
-    borderBottomWidth: 0.5,
+    marginTop: STATUSBAR_HEIGHT,
-    borderBottomColor: '#828287',
+  },
+
+  right: {
     position: 'absolute',
-  },
+    top: 0,
-  backButton: {
+    bottom: 0,
-    width: 29,
+    right: 0,
-    height: 37,
+    marginTop: STATUSBAR_HEIGHT,
-    position: 'absolute',
+  }
-    bottom: 4,
-    left: 2,
-    padding: 8,
-  },
-  backButtonImage: {
-    width: 13,
-    height: 21,
-  },
 });
 
-module.exports = NavigationHeader;
+module.exports = NavigationContainer.create(NavigationHeader);

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js

@@ -0,0 +1,59 @@
+/**
+ * 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

@@ -0,0 +1,74 @@
+/**
+ * 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,14 +21,9 @@ 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").
  */
@@ -70,6 +65,13 @@ type Layout = {
   height: Animated.Value;
 };
 
+type OverlayRenderer = (
+  scenes: Array<NavigationScene>,
+  index: number,
+  position: Animated.Value,
+  layout: Layout
+) => ReactElement;
+
 type Position = Animated.Value;
 
 /**
@@ -251,6 +253,11 @@ 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,6 +16,8 @@ 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');
@@ -39,6 +41,8 @@ const NavigationExperimental = {
   Card: NavigationCard,
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
+  HeaderTitle: NavigationHeaderTitle,
+  HeaderBackButton: NavigationHeaderBackButton,
   LegacyNavigator: NavigationLegacyNavigator,
 };
 

Libraries/NavigationExperimental/NavigationStateUtils.js

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