feat: export tab bars

packages/bottom-tabs/src/index.js

@@ -2,6 +2,9 @@
 /* eslint-disable import/no-commonjs */
 
 module.exports = {
+  /**
+   * Navigators
+   */
   get createBottomTabNavigator() {
     return require('./navigators/createBottomTabNavigator').default;
   },
@@ -11,4 +14,14 @@ module.exports = {
   get createMaterialBottomTabNavigator() {
     return require('./navigators/createMaterialBottomTabNavigator').default;
   },
+
+  /**
+   * Views
+   */
+  get MaterialTopTabBar() {
+    return require('./views/MaterialTopTabBar').default;
+  },
+  get BottomTabBar() {
+    return require('./views/BottomTabBar').default;
+  },
 };

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

@@ -5,7 +5,7 @@ import { View, StyleSheet } from 'react-native';
 import createTabNavigator, {
   type InjectedProps,
 } from '../utils/createTabNavigator';
-import TabBarBottom, { type TabBarOptions } from '../views/TabBarBottom';
+import BottomTabBar, { type TabBarOptions } from '../views/BottomTabBar';
 
 type Props = InjectedProps & {
   tabBarComponent?: React.ComponentType<*>,
@@ -47,10 +47,9 @@ class TabNavigationView extends React.PureComponent<Props, State> {
 
   _renderTabBar = () => {
     const {
-      tabBarComponent: TabBarComponent = TabBarBottom,
+      tabBarComponent: TabBarComponent = BottomTabBar,
       tabBarOptions,
       navigation,
-      onIndexChange,
       screenProps,
       getLabelText,
       renderIcon,

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

@@ -6,7 +6,9 @@ import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
 import createTabNavigator, {
   type InjectedProps,
 } from '../utils/createTabNavigator';
-import TabBarTop, { type TabBarOptions } from '../views/TabBarTop';
+import MaterialTopTabBar, {
+  type TabBarOptions,
+} from '../views/MaterialTopTabBar';
 
 type Props = InjectedProps & {
   animationEnabled?: boolean,
@@ -85,7 +87,7 @@ class TabView extends React.PureComponent<Props> {
       options.tabBarVisible == null ? true : options.tabBarVisible;
 
     const {
-      tabBarComponent: TabBarComponent = TabBarTop,
+      tabBarComponent: TabBarComponent = MaterialTopTabBar,
       tabBarPosition,
       tabBarOptions,
     } = this.props;

packages/bottom-tabs/src/views/TabBarBottom.js → packages/bottom-tabs/src/views/BottomTabBar.js

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import SafeAreaView from 'react-native-safe-area-view';
 
-import TabBarIcon from './TabBarIcon';
+import CrossFadeIcon from './CrossFadeIcon';
 import withDimensions from '../utils/withDimensions';
 
 export type TabBarOptions = {
@@ -119,7 +119,7 @@ class TabBarBottom extends React.Component<Props> {
     const inactiveOpacity = focused ? 0 : 1;
 
     return (
-      <TabBarIcon
+      <CrossFadeIcon
         route={route}
         navigation={navigation}
         activeOpacity={activeOpacity}

packages/bottom-tabs/src/views/TabBarTop.js → packages/bottom-tabs/src/views/MaterialTopTabBar.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { TabBar } from 'react-native-tab-view';
-import TabBarIcon from './TabBarIcon';
+import CrossFadeIcon from './CrossFadeIcon';
 
 export type TabBarOptions = {
   activeTintColor?: string,
@@ -116,7 +116,7 @@ export default class TabBarTop extends React.PureComponent<Props> {
     });
 
     return (
-      <TabBarIcon
+      <CrossFadeIcon
         route={route}
         navigation={navigation}
         activeOpacity={activeOpacity}