Ported TabBarIOS to OSS and unified implementation

Libraries/Components/TabBarIOS/TabBarIOS.android.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TabBarIOS
+ */
+
+'use strict';
+
+var React = require('React');
+var View = require('View');
+var StyleSheet = require('StyleSheet');
+
+var DummyTabBarIOS = React.createClass({
+  render: function() {
+    return (
+      <View style={[this.props.style, styles.tabGroup]}>
+        {this.props.children}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  tabGroup: {
+    flex: 1,
+  }
+});
+
+module.exports = DummyTabBarIOS;

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TabBarIOS
+ */
+'use strict';
+
+var React = require('React');
+var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
+var StyleSheet = require('StyleSheet');
+
+var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
+
+var TabBarIOS = React.createClass({
+  render: function() {
+    return (
+      <RKTabBar style={[styles.tabGroup, this.props.style]}>
+        {this.props.children}
+      </RKTabBar>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  tabGroup: {
+    flex: 1,
+  }
+});
+
+var config = {
+  validAttributes: ReactIOSViewAttributes.UIView,
+  uiViewClassName: 'RCTTabBar',
+};
+var RKTabBar = createReactIOSNativeComponentClass(config);
+
+module.exports = TabBarIOS;

Libraries/Components/TabBarIOS/TabBarItemIOS.android.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TabBarItemIOS
+ */
+
+'use strict';
+
+var Dimensions = require('Dimensions');
+var React = require('React');
+var View = require('View');
+var StyleSheet = require('StyleSheet');
+
+var DummyTab = React.createClass({
+  render: function() {
+    if (!this.props.selected) {
+      return <View />;
+    }
+    return (
+      <View style={[this.props.style, styles.tab]}>
+        {this.props.children}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  tab: {
+    // TODO(5405356): Implement overflow: visible so position: absolute isn't useless
+    // position: 'absolute',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    borderColor: 'red',
+    borderWidth: 1,
+  }
+});
+
+module.exports = DummyTab;

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TabBarItemIOS
+ */
+'use strict';
+
+var Image = require('Image');
+var React = require('React');
+var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
+var Dimensions = require('Dimensions');
+var StaticContainer = require('StaticContainer.react');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
+var merge = require('merge');
+
+var TabBarItemIOS = React.createClass({
+  propTypes: {
+    icon: Image.sourcePropType.isRequired,
+    onPress: React.PropTypes.func.isRequired,
+    selected: React.PropTypes.bool.isRequired,
+    badgeValue: React.PropTypes.string,
+    title: React.PropTypes.string,
+    style: View.stylePropType,
+  },
+
+  getInitialState: function() {
+    return {
+      hasBeenSelected: false,
+    };
+  },
+
+  componentWillMount: function() {
+    if (this.props.selected) {
+      this.setState({hasBeenSelected: true});
+    }
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    if (this.state.hasBeenSelected || nextProps.selected) {
+      this.setState({hasBeenSelected: true});
+    }
+  },
+
+  render: function() {
+    var tabContents = null;
+    // if the tab has already been shown once, always continue to show it so we
+    // preserve state between tab transitions
+    if (this.state.hasBeenSelected) {
+      tabContents =
+        <StaticContainer shouldUpdate={this.props.selected}>
+          {this.props.children}
+        </StaticContainer>;
+    } else {
+      tabContents = <View />;
+    }
+
+    return (
+      <RKTabBarItem
+        icon={this.props.icon.uri}
+        selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
+        onPress={this.props.onPress}
+        selected={this.props.selected}
+        badgeValue={this.props.badgeValue}
+        title={this.props.title}
+        style={[styles.tab, this.props.style]}>
+        {tabContents}
+      </RKTabBarItem>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  tab: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+  }
+});
+
+var RKTabBarItem = createReactIOSNativeComponentClass({
+  validAttributes: merge(ReactIOSViewAttributes.UIView, {
+    title: true,
+    icon: true,
+    selectedIcon: true,
+    selected: true,
+    badgeValue: true,
+  }),
+  uiViewClassName: 'RCTTabBarItem',
+});
+
+module.exports = TabBarItemIOS;