feat: initial commit

packages/bottom-tabs/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

packages/bottom-tabs/src/index.js

@@ -0,0 +1,14 @@
+/* @flow */
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+  get createBottomTabNavigator() {
+    return require('./navigators/createBottomTabNavigator').default;
+  },
+  get createMaterialTopTabNavigator() {
+    return require('./navigators/createMaterialTopTabNavigator').default;
+  },
+  get createMaterialBottomTabNavigator() {
+    return require('./navigators/createMaterialBottomTabNavigator').default;
+  },
+};

packages/bottom-tabs/src/navigators/createBottomTabNavigator.js

@@ -0,0 +1,129 @@
+/* @flow */
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import createTabNavigator, {
+  type InjectedProps,
+} from '../utils/createTabNavigator';
+import TabBarBottom, { type TabBarOptions } from '../views/TabBarBottom';
+
+type Props = InjectedProps & {
+  tabBarComponent?: React.ComponentType<*>,
+  tabBarOptions?: TabBarOptions,
+};
+
+type State = {
+  loaded: number[],
+};
+
+class TabNavigationView extends React.PureComponent<Props, State> {
+  state = {
+    loaded: [this.props.navigation.state.index],
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.navigation.state.index !== this.props.navigation.state.index
+    ) {
+      const { index } = nextProps.navigation.state;
+
+      this.setState(state => ({
+        loaded: state.loaded.includes(index)
+          ? state.loaded
+          : [...state.loaded, index],
+      }));
+    }
+  }
+
+  _getLabel = ({ route, focused, tintColor }) => {
+    const label = this.props.getLabelText({ route });
+
+    if (typeof label === 'function') {
+      return label({ focused, tintColor });
+    }
+
+    return label;
+  };
+
+  _renderTabBar = () => {
+    const {
+      tabBarComponent: TabBarComponent = TabBarBottom,
+      tabBarOptions,
+      navigation,
+      onIndexChange,
+      screenProps,
+      getLabelText,
+      renderIcon,
+      onTabPress,
+    } = this.props;
+
+    const { descriptors } = this.props;
+    const { state } = this.props.navigation;
+    const route = state.routes[state.index];
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarVisible === false) {
+      return null;
+    }
+
+    return (
+      <TabBarComponent
+        {...tabBarOptions}
+        navigation={navigation}
+        jumpToIndex={onIndexChange}
+        screenProps={screenProps}
+        onTabPress={onTabPress}
+        getLabelText={getLabelText}
+        renderIcon={renderIcon}
+      />
+    );
+  };
+
+  render() {
+    const { navigation, renderScene } = this.props;
+    const { routes } = navigation.state;
+    const { loaded } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.pages}>
+          {routes.map((route, index) => {
+            if (!loaded.includes(index)) {
+              // Don't render a screen if we've never navigated to it
+              return null;
+            }
+
+            const isFocused = navigation.state.index === index;
+
+            return (
+              <View
+                key={route.key}
+                pointerEvents={isFocused ? 'auto' : 'none'}
+                style={[
+                  StyleSheet.absoluteFill,
+                  { opacity: isFocused ? 1 : 0 },
+                ]}
+              >
+                {renderScene({ route })}
+              </View>
+            );
+          })}
+        </View>
+        {this._renderTabBar()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  pages: {
+    flex: 1,
+  },
+});
+
+export default createTabNavigator(TabNavigationView);

packages/bottom-tabs/src/navigators/createMaterialBottomTabNavigator.js

@@ -0,0 +1,40 @@
+/* @flow */
+
+import * as React from 'react';
+import { BottomNavigation } from 'react-native-paper';
+import createTabNavigator, {
+  type InjectedProps,
+} from '../utils/createTabNavigator';
+
+type Props = InjectedProps & {
+  activeTintColor?: string,
+};
+
+class BottomNavigationView extends React.Component<Props> {
+  _getColor = ({ route }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    return options.tabBarColor;
+  };
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const { activeTintColor, navigation, descriptors, ...rest } = this.props;
+
+    return (
+      <BottomNavigation
+        {...rest}
+        navigationState={navigation.state}
+        getColor={this._getColor}
+        theme={
+          /* $FlowFixMe */
+          activeTintColor ? { colors: { primary: activeTintColor } } : null
+        }
+      />
+    );
+  }
+}
+
+export default createTabNavigator(BottomNavigationView);

packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js

@@ -0,0 +1,169 @@
+/* @flow */
+
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
+import createTabNavigator, {
+  type InjectedProps,
+} from '../utils/createTabNavigator';
+import TabBarTop, { type TabBarOptions } from '../views/TabBarTop';
+
+type Props = InjectedProps & {
+  animationEnabled?: boolean,
+  swipeEnabled?: boolean,
+  tabBarPosition?: 'top' | 'bottom',
+  tabBarComponent?: React.ComponentType<*>,
+  tabBarOptions?: TabBarOptions,
+};
+
+class TabView extends React.PureComponent<Props> {
+  static defaultProps = {
+    // fix for https://github.com/react-native-community/react-native-tab-view/issues/312
+    initialLayout: Platform.select({
+      android: { width: 1, height: 0 },
+    }),
+  };
+
+  _getLabel = ({ route, tintColor, focused }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarLabel) {
+      return typeof options.tabBarLabel === 'function'
+        ? options.tabBarLabel({ tintColor, focused })
+        : options.tabBarLabel;
+    }
+
+    if (typeof options.title === 'string') {
+      return options.title;
+    }
+
+    return route.routeName;
+  };
+
+  _getOnPress = (previousScene, { route }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    return options.tabBarOnPress;
+  };
+
+  _getTestIDProps = ({ route, focused }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    return typeof options.tabBarTestIDProps === 'function'
+      ? options.tabBarTestIDProps({ focused })
+      : options.tabBarTestIDProps;
+  };
+
+  _renderIcon = ({ focused, route, tintColor }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarIcon) {
+      return typeof options.tabBarIcon === 'function'
+        ? options.tabBarIcon({ tintColor, focused })
+        : options.tabBarIcon;
+    }
+
+    return null;
+  };
+
+  _renderTabBar = props => {
+    const { state } = this.props.navigation;
+    const route = state.routes[state.index];
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    const tabBarVisible =
+      options.tabBarVisible == null ? true : options.tabBarVisible;
+
+    const {
+      tabBarComponent: TabBarComponent = TabBarTop,
+      tabBarPosition,
+      tabBarOptions,
+    } = this.props;
+
+    if (TabBarComponent === null || !tabBarVisible) {
+      return null;
+    }
+
+    return (
+      <TabBarComponent
+        {...tabBarOptions}
+        {...props}
+        tabBarPosition={tabBarPosition}
+        screenProps={this.props.screenProps}
+        navigation={this.props.navigation}
+        getLabelText={this.props.getLabelText}
+        getTestIDProps={this._getTestIDProps}
+        renderIcon={this._renderIcon}
+      />
+    );
+  };
+
+  _renderPanPager = props => <TabViewPagerPan {...props} />;
+
+  render() {
+    const {
+      navigation,
+      tabBarPosition,
+      animationEnabled,
+      renderScene,
+      ...rest
+    } = this.props;
+
+    let renderHeader;
+    let renderFooter;
+    let renderPager;
+
+    const { state } = this.props.navigation;
+    const route = state.routes[state.index];
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    let swipeEnabled =
+      options.swipeEnabled == null
+        ? this.props.swipeEnabled
+        : options.swipeEnabled;
+
+    if (typeof swipeEnabled === 'function') {
+      swipeEnabled = swipeEnabled(state);
+    }
+
+    if (tabBarPosition === 'bottom') {
+      renderFooter = this._renderTabBar;
+    } else {
+      renderHeader = this._renderTabBar;
+    }
+
+    if (animationEnabled === false && swipeEnabled === false) {
+      renderPager = this._renderPanPager;
+    }
+
+    return (
+      <TabViewAnimated
+        {...rest}
+        navigationState={navigation.state}
+        animationEnabled={animationEnabled}
+        swipeEnabled={swipeEnabled}
+        renderScene={
+          /* $FlowFixMe */
+          renderScene
+        }
+        renderPager={renderPager}
+        renderHeader={renderHeader}
+        renderFooter={renderFooter}
+      />
+    );
+  }
+}
+
+export default createTabNavigator(TabView);