Avoid one frame delay using TabNavigator (react-navigation#2385)

TheTekton · kelset · commit 817e360a53e2 · 2017-10-28T16:21:55.000+01:00
* Added optional initialLayout func prop to TabNavigatorConfig.

* Fix default initialLayout prop type.

* Fix default initialLayout prop type.

* Fix lint error.

* Normalized capitalization and punctuation for TabNavigator.md.

* Added react-native-tab-view link to initialLayout prop documentation in TabNavigator.md.

* Update TabView.js
diff --git a/docs/api/navigators/TabNavigator.md b/docs/api/navigators/TabNavigator.md
@@ -81,33 +81,34 @@ The route configs object is a mapping from route name to a route config, which t
 
 ### TabNavigatorConfig
 
-- `tabBarComponent` - component to use as the tab bar, e.g. `TabBarBottom`
+- `tabBarComponent` - Component to use as the tab bar, e.g. `TabBarBottom`
 (this is the default on iOS), `TabBarTop`
-(this is the default on Android)
-- `tabBarPosition` - position of the tab bar, can be `'top'` or `'bottom'`
-- `swipeEnabled` - whether to allow swiping between tabs
-- `animationEnabled` - whether to animate when changing tabs
-- `lazy` - whether to lazily render tabs as needed as opposed to rendering them upfront
-- `tabBarOptions` - configure the tab bar, see below.
+(this is the default on Android).
+- `tabBarPosition` - Position of the tab bar, can be `'top'` or `'bottom'`.
+- `swipeEnabled` - Whether to allow swiping between tabs.
+- `animationEnabled` - Whether to animate when changing tabs.
+- `lazy` - Whether to lazily render tabs as needed as opposed to rendering them upfront.
+- `initialLayout` - Optional object containing the initial `height` and `width`, can be passed to prevent the one frame delay in [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view#avoid-one-frame-delay) rendering.
+- `tabBarOptions` - Configure the tab bar, see below.
 
 Several options get passed to the underlying router to modify navigation logic:
 
-- `initialRouteName` - The routeName for the initial tab route when first loading
-- `order` - Array of routeNames which defines the order of the tabs
+- `initialRouteName` - The routeName for the initial tab route when first loading.
+- `order` - Array of routeNames which defines the order of the tabs.
 - `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
 - `backBehavior` - Should the back button cause a tab switch to the initial tab? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
 
 ### `tabBarOptions` for `TabBarBottom` (default tab bar on iOS)
 
-- `activeTintColor` - label and icon color of the active tab
-- `activeBackgroundColor` - background color of the active tab
-- `inactiveTintColor` - label and icon color of the inactive tab
-- `inactiveBackgroundColor` - background color of the inactive tab
-- `showLabel` - whether to show label for tab, default is true
-- `style` - style object for the tab bar
-- `labelStyle` - style object for the tab label
-- `tabStyle` - style object for the tab
-- `allowFontScaling` - whether label font should scale to respect Text Size accessibility settings, default is true
+- `activeTintColor` - Label and icon color of the active tab.
+- `activeBackgroundColor` - Background color of the active tab.
+- `inactiveTintColor` - Label and icon color of the inactive tab.
+- `inactiveBackgroundColor` - Background color of the inactive tab.
+- `showLabel` - Whether to show label for tab, default is true.
+- `style` - Style object for the tab bar.
+- `labelStyle` - Style object for the tab label.
+- `tabStyle` - Style object for the tab.
+- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
 
 Example:
 
@@ -125,20 +126,20 @@ tabBarOptions: {
 
 ### `tabBarOptions` for `TabBarTop` (default tab bar on Android)
 
-- `activeTintColor` - label and icon color of the active tab
-- `inactiveTintColor` - label and icon color of the inactive tab
-- `showIcon` - whether to show icon for tab, default is false
-- `showLabel` - whether to show label for tab, default is true
-- `upperCaseLabel` - whether to make label uppercase, default is true
-- `pressColor` - color for material ripple (Android >= 5.0 only)
-- `pressOpacity` - opacity for pressed tab (iOS and Android < 5.0 only)
-- `scrollEnabled` - whether to enable scrollable tabs
-- `tabStyle` - style object for the tab
-- `indicatorStyle` - style object for the tab indicator (line at the bottom of the tab)
-- `labelStyle` - style object for the tab label
-- `iconStyle` - style object for the tab icon
-- `style` - style object for the tab bar
-- `allowFontScaling` - whether label font should scale to respect Text Size accessibility settings, default is true
+- `activeTintColor` - Label and icon color of the active tab.
+- `inactiveTintColor` - Label and icon color of the inactive tab.
+- `showIcon` - Whether to show icon for tab, default is false.
+- `showLabel` - Whether to show label for tab, default is true.
+- `upperCaseLabel` - Whether to make label uppercase, default is true.
+- `pressColor` - Color for material ripple (Android >= 5.0 only).
+- `pressOpacity` - Opacity for pressed tab (iOS and Android < 5.0 only).
+- `scrollEnabled` - Whether to enable scrollable tabs.
+- `tabStyle` - Style object for the tab.
+- `indicatorStyle` - Style object for the tab indicator (line at the bottom of the tab).
+- `labelStyle` - Style object for the tab label.
+- `iconStyle` - Style object for the tab icon.
+- `style` - Style object for the tab bar.
+- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
 
 Example:
 
@@ -160,15 +161,15 @@ tabBarOptions: {
 
 #### `title`
 
-Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`
+Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.
 
 #### `tabBarVisible`
 
-True or false to show or hide the tab bar, if not set then defaults to true
+True or false to show or hide the tab bar, if not set then defaults to true.
 
 #### `tabBarIcon`
 
-React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Element, to display in tab bar
+React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Element, to display in tab bar.
 
 #### `tabBarLabel`
 
diff --git a/src/navigators/TabNavigator.js b/src/navigators/TabNavigator.js
@@ -37,6 +37,7 @@ const TabNavigator = (
     swipeEnabled,
     animationEnabled,
     lazy,
+    initialLayout,
     ...tabsConfig
   } = mergedConfig;
 
@@ -56,6 +57,7 @@ const TabNavigator = (
       swipeEnabled={swipeEnabled}
       animationEnabled={animationEnabled}
       lazy={lazy}
+      initialLayout={initialLayout}
     />
   ));
 
@@ -69,13 +71,15 @@ const Presets = {
     swipeEnabled: false,
     animationEnabled: false,
     lazy: false,
+    initialLayout: undefined,
   },
   AndroidTopTabs: {
     tabBarComponent: TabBarTop,
     tabBarPosition: 'top',
     swipeEnabled: true,
     animationEnabled: true,
     lazy: false,
+    initialLayout: undefined,
   },
 };
 
diff --git a/src/views/TabView/TabView.js b/src/views/TabView/TabView.js
@@ -3,6 +3,7 @@
 import React, { PureComponent } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
+import type { Layout } from 'react-native-tab-view/src/TabViewTypeDefinitions';
 import SceneView from '../SceneView';
 import withCachedChildNavigation from '../../withCachedChildNavigation';
 
@@ -22,6 +23,7 @@ export type TabViewConfig = {
   swipeEnabled?: boolean,
   animationEnabled?: boolean,
   lazy?: boolean,
+  initialLayout?: Layout,
 };
 
 export type TabScene = {
@@ -38,6 +40,7 @@ type Props = {
   swipeEnabled?: boolean,
   animationEnabled?: boolean,
   lazy?: boolean,
+  initialLayout?: Layout,
 
   screenProps?: {},
   navigation: NavigationScreenProp<NavigationState, NavigationAction>,
@@ -160,6 +163,7 @@ class TabView extends PureComponent<void, Props, void> {
       animationEnabled,
       swipeEnabled,
       lazy,
+      initialLayout,
       screenProps,
     } = this.props;
 
@@ -190,6 +194,7 @@ class TabView extends PureComponent<void, Props, void> {
 
     const props = {
       lazy,
+      initialLayout,
       animationEnabled,
       swipeEnabled,
       renderPager,
