Ported TabBarIOS to OSS and unified implementation

Examples/UIExplorer/TabBarExample.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TabBarExample
+ */
+'use strict';
+
+var React = require('React');
+var TabBarIOS = require('TabBarIOS');
+var TabBarItemIOS = require('TabBarItemIOS');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+
+var ix = require('ix');
+
+var TabBarExample = React.createClass({
+
+  statics: {
+    title: '<TabBarIOS>',
+    description: 'Tab-based navigation.'
+  },
+
+  getInitialState: function() {
+    return {
+      selectedTab: 'redTab',
+      notifCount: 0,
+      presses: 0,
+    };
+  },
+
+  _renderContent: function(color, pageText) {
+    return (
+      <View style={[styles.tabContent, {backgroundColor: color}]}>
+        <Text style={styles.tabText}>{pageText}</Text>
+        <Text style={styles.tabText}>{this.state.presses} re-renders of this tab</Text>
+      </View>
+    );
+  },
+
+  render: function() {
+    return (
+      <TabBarIOS
+        selectedTab={this.state.selectedTab}>
+        <TabBarItemIOS
+          name="blueTab"
+          icon={ix('favorites')}
+          accessibilityLabel="Blue Tab"
+          selected={this.state.selectedTab === 'blueTab'}
+          onPress={() => {
+            this.setState({
+              selectedTab: 'blueTab',
+            });
+          }}>
+          {this._renderContent('#414A8C', 'Blue Tab')}
+        </TabBarItemIOS>
+        <TabBarItemIOS
+          accessibilityLabel="Red Tab"
+          name="redTab"
+          icon={ix('history')}
+          badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
+          selected={this.state.selectedTab === 'redTab'}
+          onPress={() => {
+            this.setState({
+              selectedTab: 'redTab',
+              notifCount: this.state.notifCount + 1,
+            });
+          }}>
+          {this._renderContent('#783E33', 'Red Tab')}
+        </TabBarItemIOS>
+        <TabBarItemIOS
+          name="greenTab"
+          icon={ix('more')}
+          accessibilityLabel="Green Tab"
+          selected={this.state.selectedTab === 'greenTab'}
+          onPress={() => {
+            this.setState({
+              selectedTab: 'greenTab',
+              presses: this.state.presses + 1
+            });
+          }}>
+          {this._renderContent('#21551C', 'Green Tab')}
+        </TabBarItemIOS>
+      </TabBarIOS>
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  tabContent: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  tabText: {
+    color: 'white',
+    margin: 50,
+  },
+});
+
+module.exports = TabBarExample;