Add an example of the Facebook Android navigation bar

Author: brentvatne

examples/.DS_Store

@@ -0,0 +1,36 @@
+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ignore react-tools where there are overlaps, but don't ignore anything that
+# react-native relies on
+.*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js
+.*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/browser/ui/React.js
+.*/node_modules/react-tools/src/core/ReactInstanceHandles.js
+.*/node_modules/react-tools/src/event/EventPropagators.js
+
+# Ignore commoner tests
+.*/node_modules/react-tools/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/react-native/node_modules/jest-cli/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+[version]
+0.11.0

examples/FacebookTabsExample/.flowconfig

@@ -0,0 +1,28 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# node.js
+#
+node_modules/
+npm-debug.log

examples/FacebookTabsExample/.gitignore

@@ -0,0 +1,27 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# node.js
+#
+node_modules/
+npm-debug.log

examples/FacebookTabsExample/.npmignore

@@ -0,0 +1,82 @@
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} = React;
+
+var Icon = require('FAKIconImage');
+var deviceWidth = require('Dimensions').get('window').width;
+
+var styles = StyleSheet.create({
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 10,
+  },
+
+  tabs: {
+    height: 40,
+    flexDirection: 'row',
+    paddingTop: 5,
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomColor: 'rgba(0,0,0,0.05)',
+  },
+});
+
+var FacebookTabBar = React.createClass({
+  selectedTabIcons: [],
+  unselectedTabIcons: [],
+
+  propTypes: {
+    goToPage: React.PropTypes.func,
+    activeTab: React.PropTypes.number,
+    tabs: React.PropTypes.array
+  },
+
+  renderTabOption(name, page) {
+    var isTabActive = this.props.activeTab === page;
+    console.log(name);
+
+    return (
+      <TouchableOpacity key={name} onPress={() => this.props.goToPage(page)}>
+        <View style={[styles.tab]}>
+          <Icon name={name} size={30} color='#3B5998' style={{width: 30, height: 30, position: 'absolute', top: 0, left: 20}}
+                ref={(icon) => { this.selectedTabIcons[page] = icon }}/>
+          <Icon name={name} size={30} color='#ccc' style={{width: 30, height: 30, position: 'absolute', top: 0, left: 20}}
+                ref={(icon) => { this.unselectedTabIcons[page] = icon }}/>
+        </View>
+      </TouchableOpacity>
+    );
+  },
+
+  setAnimationValue(value) {
+    var currentPage = this.props.activeTab;
+
+    this.unselectedTabIcons.forEach((icon, i) => {
+      if (value - i >= 0 && value - i <= 1) {
+        icon.setNativeProps({opacity: value - i});
+      }
+      if (i - value >= 0 &&  i - value <= 1) {
+        icon.setNativeProps({opacity: i - value});
+      }
+    });
+  },
+
+  render() {
+    return (
+      <View style={styles.tabs}>
+        {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
+      </View>
+    );
+  },
+});
+
+module.exports = FacebookTabBar;