Add support for deprecated Tabs component

aksonov · Aug 25, 2018 · 7842e21 · 7842e21
1 parent f6d9d51
commit 7842e21
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 33 deletions.
diff --git a/docs/API.md b/docs/API.md
@@ -85,6 +85,29 @@ All properties of type `React.Component` will receive the same properties availa
 ## Tabs (`<Tabs>` or `<Scene tabs>`)
 Can use all `props` listed above in `<Scene>` as `<Tabs>` is syntatic sugar for `<Scene tabs={true}>`.
 
+| Property | Type | Default | Description |
+|-----------------|----------|----------|--------------------------------------------|
+| `wrap`     | `boolean` | `true` | Wrap each scene with own navbar automatically (if it is not another container). |
+| `activeBackgroundColor` | `string` |  | Specifies the active background color for the tab in focus |
+| `activeTintColor`     | `string` |  | Specifies the active tint color for tabbar icons |
+| `inactiveBackgroundColor` | `string` |  | Specifies the inactive background color for the tabs not in focus |
+| `inactiveTintColor`     | `string` |  | Specifies the inactive tint color for tabbar icons |
+| `labelStyle` | `object` | | Overrides the styles for the tab label |
+| `lazy`     | `boolean` | `false` | Won't render/mount the tab scene until the tab is active |
+| `tabBarComponent`     | `React.Component` |  | React component to render custom tab bar |
+| `tabBarPosition`     | `string` |  | Specifies tabbar position. Defaults to `bottom` on iOS and `top` on Android. |
+| `tabBarStyle` | `object` | | Override the tabbar styles |
+| `tabStyle` | `object` | | Override the style for an individual tab of the tabbar |
+| `showLabel`     | `boolean` | `true`  | Boolean to show or not the tabbar icons labels |
+| `tabBarOnPress`     | `function` | | Custom tab bar icon press. |
+| `backToInitial`     | `boolean` | `false` | Back to initial screen on focused tab if tab icon was tapped. |
+| `upperCaseLabel`     | `boolean` | `true` | Whether to make label uppercase, default is true. |
+| `indicatorStyle`     | `object` |  | Override the style for active tab indicator. |
+
+
+## LegacyTabs (`<LegacyTabs>` or `<Scene tabs={true} legacy={true}>`)
+Can use all `props` listed above in `<Scene>` as `<LegacyTabs>` is syntatic sugar for `<Scene tabs={true} legacy={true}>`.
+
 | Property | Type | Default | Description |
 |-----------------|----------|----------|--------------------------------------------|
 | `wrap`     | `boolean` | `true` | Wrap each scene with own navbar automatically (if it is not another container). |

diff --git a/src/LegacyTabs.js b/src/LegacyTabs.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2015-present, Pavel Aksonov
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default () => null;
diff --git a/src/navigationStore.js b/src/navigationStore.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Image, Animated, Easing } from 'react-native';
 import {
+  createTabNavigator as DEPRECATED_createTabNavigator,
   createBottomTabNavigator,
   createMaterialTopTabNavigator,
   createDrawerNavigator,
@@ -22,6 +23,7 @@ import Modal from './Modal';
 import Lightbox from './Lightbox';
 import Drawer from './Drawer';
 import Tabs from './Tabs';
+import LegacyTabs from './LegacyTabs';
 import Overlay from './Overlay';
 import OverlayRenderer from './OverlayRenderer';
 import createStackNavigatorHOC from './createStackNavigatorHOC';
@@ -45,60 +47,60 @@ export const actionMap = {
 };
 
 const reservedKeys = [
-  'children',
-  'refs',
   'addRef',
-  'removeRef',
+  'back',
+  'children',
   'create',
-  'execute',
-  'popTo',
-  'navigate',
-  'replace',
-  'refresh',
   'dispatch',
-  'push',
-  'setParams',
-  'run',
-  'onEnter',
-  'onRight',
-  'onLeft',
+  'drawerClose',
+  'drawerOpen',
+  'execute',
   'left',
-  'back',
-  'right',
-  'rightButton',
   'leftButton',
+  'navBar',
+  'navigate',
   'on',
+  'onEnter',
   'onExit',
+  'onLeft',
+  'onRight',
   'pop',
+  'popTo',
+  'push',
+  'refresh',
+  'refs',
+  'removeRef',
   'renderLeftButton',
   'renderRightButton',
   'renderTitle',
-  'navBar',
+  'replace',
+  'right',
+  'rightButton',
+  'run',
+  'setParams',
   'title',
-  'drawerOpen',
-  'drawerClose',
 ];
 
 const dontInheritKeys = [
+  'backToInitial',
+  'children',
   'component',
   'contentComponent',
-  'tabBarComponent',
-  'modal',
   'drawer',
+  'hideNavBar',
+  'hideTabBar',
+  'key',
   'lightbox',
-  'overlay',
-  'tabs',
+  'modal',
   'navigator',
-  'children',
-  'key',
+  'navTransparent',
+  'overlay',
   'ref',
   'style',
+  'tabBarComponent',
+  'tabs',
   'title',
-  'navTransparent',
   'type',
-  'hideNavBar',
-  'hideTabBar',
-  'backToInitial',
 ];
 
 function getValue(value, params) {
@@ -586,7 +588,7 @@ class NavigationStore {
     const res = {};
     const order = [];
     const { navigator, renderer, contentComponent, drawerWidth, drawerLockMode, tabBarComponent, tabBarPosition, lazy, duration, ...parentProps } = scene.props;
-    let { tabs, modal, lightbox, overlay, drawer, transitionConfig } = parentProps;
+    let { legacy, tabs, modal, lightbox, overlay, drawer, transitionConfig } = parentProps;
     if (scene.type === Modal) {
       modal = true;
     } else if (scene.type === Drawer) {
@@ -595,6 +597,9 @@ class NavigationStore {
       lightbox = true;
     } else if (scene.type === Tabs) {
       tabs = true;
+    } else if (scene.type === LegacyTabs) {
+      tabs = true;
+      legacy = true;
     } else if (scene.type === Overlay) {
       overlay = true;
     }
@@ -673,7 +678,7 @@ class NavigationStore {
       if (path) {
         this.states[key].path = path;
       }
-      // console.log(`KEY ${key} PATH ${path} DRAWER ${drawer} TABS ${tabs} WRAP ${wrap}`, JSON.stringify(commonProps));
+      // console.log(`KEY ${key} LEGACY {legacy} PATH ${path} DRAWER ${drawer} TABS ${tabs} WRAP ${wrap}`, JSON.stringify(commonProps));
       const screen = {
         screen: createWrapper(component, wrapBy, this) || this.processScene(child, commonProps, clones) || (lightbox && (() => null)),
         navigationOptions: createNavigationOptions({
@@ -773,7 +778,9 @@ class NavigationStore {
 
     if (tabs) {
       let createTabNavigator = createMaterialTopTabNavigator;
-      if (tabBarPosition !== 'top') {
+      if (legacy) {
+        createTabNavigator = DEPRECATED_createTabNavigator;
+      } else if (tabBarPosition !== 'top') {
         createTabNavigator = createBottomTabNavigator;
       }
       return createTabNavigator(res, {