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

Examples/UIExplorer/NavigationExperimental/NavigationExampleTabBar.js

@@ -0,0 +1,81 @@
+/**
+ * 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.
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = React;
+const {
+  Container: NavigationContainer,
+  Reducer: NavigationReducer,
+} = NavigationExperimental;
+const {
+  JumpToAction,
+} = NavigationReducer.TabsReducer;
+
+var NavigationExampleTabBar = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.tabBar}>
+        {this.props.tabs.map(this._renderTab)}
+      </View>
+    );
+  },
+  _renderTab: function(tab, index) {
+    var textStyle = [styles.tabButtonText];
+    if (this.props.index === index) {
+      textStyle.push(styles.selectedTabButtonText);
+    }
+    return (
+      <TouchableOpacity
+        style={styles.tabButton}
+        key={tab.key}
+        onPress={() => {
+          this.props.onNavigate(JumpToAction(index));
+        }}>
+        <Text style={textStyle}>
+          {tab.key}
+        </Text>
+      </TouchableOpacity>
+    );
+  },
+});
+
+NavigationExampleTabBar = NavigationContainer.create(NavigationExampleTabBar);
+
+const styles = StyleSheet.create({
+  tabBar: {
+    height: 50,
+    flexDirection: 'row',
+  },
+  tabButton: {
+    flex: 1,
+  },
+  tabButtonText: {
+    paddingTop: 20,
+    textAlign: 'center',
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  selectedTabButtonText: {
+    color: 'blue',
+  },
+});
+
+module.exports = NavigationExampleTabBar;