fix: fix scrollable tabs before layout if no tab width was provided

If a `width` wasn't provided for tabs and `scrollEnabled` was set to `true`, we needed to wait for layout to render them. This commit makes sure we render the tabs properly before layout fires. Closes #805
satya164 · Jul 5, 2019 · afbd348 · afbd348
1 parent 97649c6
commit afbd348
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -474,6 +474,8 @@ Opacity for pressed tab (iOS and Android < 5.0 only).
 
 Boolean indicating whether to enable scrollable tabs.
 
+If you set `scrollEnabled` to `true`, you should also specify a `width` in `tabStyle` to improve the initial render.
+
 ##### `bounces`
 
 Boolean indicating whether the tab bar bounces when scrolling.

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -93,7 +93,7 @@ export default class ExampleList extends React.Component<any, State> {
 
       if (
         Number.isFinite(savedIndex) &&
-        savedIndex > 0 &&
+        savedIndex >= 0 &&
         savedIndex < EXAMPLE_COMPONENTS.length
       ) {
         this.setState({

diff --git a/src/TabBar.tsx b/src/TabBar.tsx
@@ -245,9 +245,8 @@ export default class TabBar<T extends Route> extends React.Component<
           pointerEvents="none"
           style={[
             styles.indicatorContainer,
-            scrollEnabled
-              ? { width: tabBarWidth, transform: [{ translateX }] as any }
-              : null,
+            scrollEnabled ? { transform: [{ translateX }] as any } : null,
+            tabBarWidth ? { width: tabBarWidth } : null,
           ]}
         >
           {this.props.renderIndicator({
@@ -272,7 +271,9 @@ export default class TabBar<T extends Route> extends React.Component<
             overScrollMode="never"
             contentContainerStyle={[
               styles.tabContent,
-              scrollEnabled ? null : styles.container,
+              scrollEnabled
+                ? { width: tabBarWidth || `${routes.length * 40}%` }
+                : styles.container,
               contentContainerStyle,
             ]}
             scrollEventThrottle={16}
@@ -296,9 +297,7 @@ export default class TabBar<T extends Route> extends React.Component<
                 key={route.key}
                 position={position}
                 route={route}
-                tabWidth={tabWidth}
                 navigationState={navigationState}
-                scrollEnabled={scrollEnabled}
                 getAccessibilityLabel={getAccessibilityLabel}
                 getAccessible={getAccessible}
                 getLabelText={getLabelText}

diff --git a/src/TabBarIndicator.tsx b/src/TabBarIndicator.tsx
@@ -25,7 +25,7 @@ export default class TabBarIndicator<T extends Route> extends React.Component<
   );
 
   render() {
-    const { width, position, navigationState, style } = this.props;
+    const { layout, width, position, navigationState, style } = this.props;
     const { routes } = navigationState;
 
     const translateX = this.getTranslateX(position, routes, width);
@@ -37,7 +37,7 @@ export default class TabBarIndicator<T extends Route> extends React.Component<
           { width: `${100 / routes.length}%` },
           // If layout is not available, use `left` property for positioning the indicator
           // This avoids rendering delay until we are able to calculate translateX
-          width
+          layout.width
             ? { transform: [{ translateX }] as any }
             : { left: `${(100 / routes.length) * navigationState.index}%` },
           style,

diff --git a/src/TabBarItem.tsx b/src/TabBarItem.tsx
@@ -15,7 +15,6 @@ type Props<T extends Route> = {
   position: Animated.Node<number>;
   route: T;
   navigationState: NavigationState<T>;
-  scrollEnabled?: boolean;
   activeColor?: string;
   inactiveColor?: string;
   pressColor?: string;
@@ -37,7 +36,6 @@ type Props<T extends Route> = {
   renderBadge?: (scene: Scene<T>) => React.ReactNode;
   onPress: () => void;
   onLongPress: () => void;
-  tabWidth: number;
   labelStyle?: StyleProp<TextStyle>;
   style: StyleProp<ViewStyle>;
 };
@@ -81,7 +79,6 @@ export default class TabBarItem<T extends Route> extends React.Component<
       route,
       position,
       navigationState,
-      scrollEnabled,
       renderLabel: renderLabelPassed,
       renderIcon,
       renderBadge,
@@ -95,7 +92,6 @@ export default class TabBarItem<T extends Route> extends React.Component<
       pressOpacity,
       labelStyle,
       style,
-      tabWidth,
       onPress,
       onLongPress,
     } = this.props;
@@ -197,18 +193,8 @@ export default class TabBarItem<T extends Route> extends React.Component<
     }
 
     const tabStyle = StyleSheet.flatten(style);
-    const isWidthSet =
-      (tabStyle && typeof tabStyle.width !== 'undefined') ||
-      scrollEnabled === true;
-
-    const tabContainerStyle: ViewStyle = {};
-    const itemStyle = isWidthSet ? { width: tabWidth } : null;
-
-    if (tabStyle && typeof tabStyle.flex === 'number') {
-      tabContainerStyle.flex = tabStyle.flex;
-    } else if (!isWidthSet) {
-      tabContainerStyle.flex = 1;
-    }
+    const isWidthSet = tabStyle && tabStyle.width !== undefined;
+    const tabContainerStyle: ViewStyle | null = isWidthSet ? null : { flex: 1 };
 
     const scene = { route };
 
@@ -238,7 +224,7 @@ export default class TabBarItem<T extends Route> extends React.Component<
         onLongPress={onLongPress}
         style={tabContainerStyle}
       >
-        <View pointerEvents="none" style={[styles.item, itemStyle, tabStyle]}>
+        <View pointerEvents="none" style={[styles.item, tabStyle]}>
           {icon}
           {label}
           {badge != null ? <View style={styles.badge}>{badge}</View> : null}