From 7842e218cbcee384e8e8a2cfab11132ba4f7edf3 Mon Sep 17 00:00:00 2001 From: "Davis Z. Cabral" Date: Sat, 25 Aug 2018 14:23:12 -0300 Subject: [PATCH 1/2] Add support for deprecated Tabs component --- docs/API.md | 23 +++++++++++++ src/LegacyTabs.js | 9 ++++++ src/navigationStore.js | 73 +++++++++++++++++++++++------------------- 3 files changed, 72 insertions(+), 33 deletions(-) create mode 100644 src/LegacyTabs.js diff --git a/docs/API.md b/docs/API.md index dbb0e1ead..2ca6e22f6 100644 --- 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 (`` or ``) Can use all `props` listed above in `` as `` is syntatic sugar for ``. +| 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 (`` or ``) +Can use all `props` listed above in `` as `` is syntatic sugar for ``. + | 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 new file mode 100644 index 000000000..cac8b838d --- /dev/null +++ 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 index fcf0b0991..1f1d39851 100644 --- 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, { From 42c51f940b2504dcd1388fb74f24ebec8751792e Mon Sep 17 00:00:00 2001 From: "Davis Z. Cabral" Date: Mon, 3 Sep 2018 07:36:54 -0300 Subject: [PATCH 2/2] Lint --- src/navigationStore.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/navigationStore.js b/src/navigationStore.js index c6054b98c..e99ccad99 100644 --- a/src/navigationStore.js +++ b/src/navigationStore.js @@ -588,8 +588,12 @@ class NavigationStore { } const res = {}; const order = []; - const { navigator, renderer, contentComponent, drawerWidth, drawerLockMode, tabBarComponent, tabBarPosition, lazy, duration, ...parentProps } = scene.props; - let { legacy, tabs, modal, lightbox, overlay, drawer, transitionConfig } = parentProps; + const { + navigator, renderer, contentComponent, drawerWidth, drawerLockMode, tabBarComponent, tabBarPosition, lazy, duration, ...parentProps + } = scene.props; + let { + legacy, tabs, modal, lightbox, overlay, drawer, transitionConfig, + } = parentProps; if (scene.type === Modal) { modal = true; } else if (scene.type === Drawer) {