NavigationExperimental

Summary:
A new API to unify internal navigation. Also addresses a highly-rated community 'pain': https://productpains.com/post/react-native/better-navigator-api-and-docs/

Offers the following improvements:

- Redux-style navigation logic is easy to reason about
- Navigation state can be easily saved and restored through refreshes
- Declarative navigation views can be implemented in native or JS
- Animations and gestures are isolated and now use the Animated library

public

Reviewed By: hedgerwang

Differential Revision: D2798048

fb-gh-sync-id: 88027ef9ead8a80afa38354252bc377455cc6dbb

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -0,0 +1,149 @@
+/**
+ * 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 NavigationHeader
+ * @flow
+ */
+'use strict';
+
+const Animated = require('Animated');
+const Image = require('Image');
+const NavigationContainer = require('NavigationContainer');
+const NavigationReducer = require('NavigationReducer');
+const React = require('react-native');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableOpacity = require('TouchableOpacity');
+const View = require('View');
+
+import type {
+  NavigationState,
+  NavigationParentState
+} from 'NavigationState';
+
+type Props = {
+  navigationState: NavigationParentState,
+  onNavigate: Function,
+  position: Animated.Value,
+  getTitle: (navState: NavigationState) => string,
+};
+
+class NavigationHeader extends React.Component {
+  _handleBackPress: Function;
+  props: Props;
+  componentWillMount() {
+    this._handleBackPress = this._handleBackPress.bind(this);
+  }
+  render() {
+    var state = this.props.navigationState;
+    return (
+      <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(NavigationReducer.StackReducer.PopAction());
+  }
+}
+
+NavigationHeader = NavigationContainer.create(NavigationHeader);
+
+const styles = StyleSheet.create({
+  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,
+    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;