Rework the NavigationHeader

Summary:Add ability to specify custom left, right components, and title component. Style the `NavigationBar` according to the Platform.

Refer https://github.com/ericvicenti/navigation-rfc/pull/21

cc ericvicenti
Closes https://github.com/facebook/react-native/pull/5971

Differential Revision: D3080601

Pulled By: ericvicenti

fb-gh-sync-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd
shipit-source-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -99,8 +99,10 @@ class NavigationAnimatedExample extends React.Component {
   _renderHeader(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationHeader
-        {...props}
+        navigationProps={props}
-        getTitle={state => state.key}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{scene.navigationState.key}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -144,7 +146,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT,
   },
 });
 

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -27,7 +27,6 @@ const {
 } = React;
 
 const {
-  AnimatedView: NavigationAnimatedView,
   CardStack: NavigationCardStack,
   Container: NavigationContainer,
   Header: NavigationHeader,
@@ -178,8 +177,10 @@ class ExampleTabScreen extends React.Component {
   _renderHeader(props: NavigationSceneRendererProps) {
     return (
       <NavigationHeader
-        {...props}
+        navigationProps={props}
-        getTitle={state => stateTypeTitleMap(state)}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{stateTypeTitleMap(scene.navigationState)}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -284,7 +285,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT
   },
   tabContent: {
     flex: 1,

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -25,25 +25,19 @@ const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
 
 const {
   Alert,
-  Animated,
   AppRegistry,
   NavigationExperimental,
   SnapshotViewIOS,
   StyleSheet,
-  Text,
-  TouchableHighlight,
   View,
 } = React;
 
 const {
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
-  Reducer: NavigationReducer,
   RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
-import type { Value } from 'Animated';
-
 import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
 import type { UIExplorerNavigationState } from './UIExplorerNavigationReducer';
@@ -127,9 +121,11 @@ class UIExplorerApp extends React.Component {
   _renderOverlay(props: NavigationSceneRendererProps): ReactElement {
     return (
       <NavigationHeader
-        {...props}
         key={'header_' + props.scene.navigationState.key}
-        getTitle={UIExplorerStateTitleMap}
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{UIExplorerStateTitleMap(scene.navigationState)}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -165,7 +161,7 @@ const styles = StyleSheet.create({
   },
   exampleContainer: {
     flex: 1,
-    paddingTop: 60,
+    paddingTop: NavigationHeader.HEIGHT,
   },
 });
 

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -27,136 +27,230 @@
  */
 'use strict';
 
-const Animated = require('Animated');
-const Image = require('Image');
-const NavigationContainer = require('NavigationContainer');
-const NavigationPropTypes = require('NavigationPropTypes');
-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 NavigationPropTypes = require('NavigationPropTypes');
+
+const {
+  Animated,
+  Platform,
+  StyleSheet,
+  View,
+} = React;
 
 import type  {
-  NavigationState,
   NavigationSceneRendererProps,
+  NavigationScene,
 } from 'NavigationTypeDefinition';
 
-type Props = NavigationSceneRendererProps & {
+type Renderer = (props: NavigationSceneRendererProps, scene: NavigationScene) => ?ReactElement;
-  getTitle: (navState: NavigationState) => string,
+
+type DefaultProps = {
+  renderTitleComponent: Renderer;
+  renderLeftComponent: Renderer;
 };
 
-const {PropTypes} = React;
+type Props = {
+  navigationProps: NavigationSceneRendererProps;
+  renderTitleComponent: Renderer;
+  renderLeftComponent: Renderer;
+  renderRightComponent: Renderer;
+  style?: any;
+}
 
-const NavigationHeaderPropTypes = {
+const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
-  ...NavigationPropTypes.SceneRenderer,
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
-  getTitle: PropTypes.func.isRequired,
-};
 
-class NavigationHeader extends React.Component {
+class NavigationHeader extends React.Component<DefaultProps, Props, void> {
-  _handleBackPress: Function;
+  static defaultProps = {
+    renderTitleComponent: (props, scene) => {
+      const pageState = scene.navigationState;
 
-  props: Props;
+      return <NavigationHeaderTitle>{pageState.title ? pageState.title : ''}</NavigationHeaderTitle>;
+    },
+    renderLeftComponent: (props, scene) => scene.index !== 0 ? <NavigationHeaderBackButton /> : null
+  };
 
-  componentWillMount(): void {
+  static propTypes = {
-    this._handleBackPress = this._handleBackPress.bind(this);
+    navigationProps: React.PropTypes.shape(NavigationPropTypes.SceneRenderer).isRequired,
-  }
+    renderTitleComponent: React.PropTypes.func,
+    renderLeftComponent: React.PropTypes.func,
+    renderRightComponent: React.PropTypes.func,
+    style: View.propTypes.style,
+  };
 
-  render(): ReactElement {
+  _renderLeftComponent(scene: NavigationScene) {
-    var state = this.props.navigationState;
+    const {
-    return (
+      renderLeftComponent,
-      <Animated.View
+      navigationProps,
-        style={[
+    } = this.props;
-          styles.header,
-        ]}>
-        {state.children.map(this._renderTitle, this)}
-        {this._renderBackButton()}
-      </Animated.View>
-    );
-  }
 
-  _renderBackButton(): ?ReactElement {
+    if (renderLeftComponent) {
-    if (this.props.navigationState.index === 0) {
+      const {
-      return null;
+        index,
+        navigationState,
+      } = scene;
+
+      return (
+        <Animated.View
+          pointerEvents={navigationProps.navigationState.index === index ? 'auto' : 'none'}
+          key={navigationState.key}
+          style={[
+            styles.left,
+            {
+              opacity: navigationProps.position.interpolate({
+                inputRange: [ index - 1, index, index + 1 ],
+                outputRange: [ 0, 1, 0 ],
+              })
+            }
+          ]}
+        >
+          {renderLeftComponent(navigationProps, scene)}
+        </Animated.View>
+      );
     }
-    return (
+
-      <TouchableOpacity style={styles.backButton} onPress={this._handleBackPress}>
+    return null;
-        <Image source={require('./back_chevron.png')} style={styles.backButtonImage} />
-      </TouchableOpacity>
-    );
   }
 
-  _renderTitle(childState: NavigationState, index:number): ?ReactElement {
+  _renderRightComponent(scene: NavigationScene) {
-    return (
+    const {
-      <Animated.Text
+      renderRightComponent,
-        key={childState.key}
+      navigationProps,
-        style={[
+    } = this.props;
-          styles.title,
+
-          {
+    if (renderRightComponent) {
-            opacity: this.props.position.interpolate({
+      const {
-              inputRange: [index - 1, index, index + 1],
+        index,
-              outputRange: [0, 1, 0],
+        navigationState,
-            }),
+      } = scene;
-            left: this.props.position.interpolate({
+
-              inputRange: [index - 1, index + 1],
+      return (
-              outputRange: [200, -200],
+        <Animated.View
-            }),
+          pointerEvents={navigationProps.navigationState.index === index ? 'auto' : 'none'}
-            right: this.props.position.interpolate({
+          key={navigationState.key}
-              inputRange: [index - 1, index + 1],
+          style={[
-              outputRange: [-200, 200],
+            styles.right,
-            }),
+            {
-          },
+              opacity: navigationProps.position.interpolate({
-        ]}>
+                inputRange: [ index - 1, index, index + 1 ],
-        {this.props.getTitle(childState)}
+                outputRange: [ 0, 1, 0 ],
-      </Animated.Text>
+              })
-    );
+            }
+          ]}
+        >
+          {renderRightComponent(navigationProps, scene)}
+        </Animated.View>
+      );
+    }
+
+    return null;
   }
 
-  _handleBackPress(): void {
+  _renderTitleComponent(scene: NavigationScene) {
-    this.props.onNavigate(NavigationRootContainer.getBackAction());
+    const {
+      renderTitleComponent,
+      navigationProps,
+    } = this.props;
+
+    if (renderTitleComponent) {
+      const {
+        index,
+        navigationState,
+      } = scene;
+
+      return (
+        <Animated.View
+          pointerEvents={navigationProps.navigationState.index === index ? 'auto' : 'none'}
+          key={navigationState.key}
+          style={[
+            styles.title,
+            {
+              opacity: navigationProps.position.interpolate({
+                inputRange: [ index - 1, index, index + 1 ],
+                outputRange: [ 0, 1, 0 ],
+              }),
+              transform: [
+                {
+                  translateX: navigationProps.position.interpolate({
+                    inputRange: [ index - 1, index + 1 ],
+                    outputRange: [ 200, -200 ],
+                  }),
+                }
+              ],
+            }
+          ]}
+        >
+          {renderTitleComponent(navigationProps, scene)}
+        </Animated.View>
+      );
+    }
+
+    return null;
+  }
+
+  render() {
+    const { scenes } = this.props.navigationProps;
+
+    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.propTypes = NavigationHeaderPropTypes;
+const styles = StyleSheet.create({
+  appbar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: Platform.OS === 'ios' ? '#EFEFF2' : '#FFF',
+    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: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: APPBAR_HEIGHT,
+    right: APPBAR_HEIGHT,
+    marginTop: STATUSBAR_HEIGHT,
+  },
+
+  left: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    marginTop: STATUSBAR_HEIGHT,
+  },
+
+  right: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginTop: STATUSBAR_HEIGHT,
+  }
+});
 
 NavigationHeader = NavigationContainer.create(NavigationHeader);
 
-const styles = StyleSheet.create({
+NavigationHeader.HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
-  title: {
+NavigationHeader.Title = NavigationHeaderTitle;
-    textAlign: 'center',
+NavigationHeader.BackButton = NavigationHeaderBackButton;
-    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,
-    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 = 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;