@amazon-devices/react-navigation__react-native-tab-view 7.0.9000000000 → 8.0.9000000000-rn-83

package/src/TabBar.tsx

@@ -1,33 +1,37 @@
 import * as React from 'react';
 import {
   Animated,
-  DimensionValue,
+  type DimensionValue,
   FlatList,
   I18nManager,
-  LayoutChangeEvent,
-  ListRenderItemInfo,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
   Platform,
-  PressableAndroidRippleConfig,
-  StyleProp,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
   View,
-  ViewStyle,
-  ViewToken,
+  type ViewStyle,
+  type ViewToken,
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
-import TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';
-import TabBarItem, { Props as TabBarItemProps } from './TabBarItem';
+import {
+  type Props as IndicatorProps,
+  TabBarIndicator,
+} from './TabBarIndicator';
+import { type Props as TabBarItemProps, TabBarItem } from './TabBarItem';
 import type {
   Event,
   Layout,
+  LocaleDirection,
   NavigationState,
   Route,
   Scene,
   SceneRendererProps,
+  TabDescriptor,
 } from './types';
-import useAnimatedValue from './useAnimatedValue';
+import { useAnimatedValue } from './useAnimatedValue';
 
 export type Props<T extends Route> = SceneRendererProps & {
   navigationState: NavigationState<T>;
@@ -37,23 +41,7 @@ export type Props<T extends Route> = SceneRendererProps & {
   inactiveColor?: string;
   pressColor?: string;
   pressOpacity?: number;
-  getLabelText?: (scene: Scene<T>) => string | undefined;
-  getAccessible?: (scene: Scene<T>) => boolean | undefined;
-  getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
-  getTestID?: (scene: Scene<T>) => string | undefined;
-  renderLabel?: (
-    scene: Scene<T> & {
-      focused: boolean;
-      color: string;
-    }
-  ) => React.ReactNode;
-  renderIcon?: (
-    scene: Scene<T> & {
-      focused: boolean;
-      color: string;
-    }
-  ) => React.ReactNode;
-  renderBadge?: (scene: Scene<T>) => React.ReactNode;
+  options?: Record<string, TabDescriptor<T>>;
   renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
   renderTabBarItem?: (
     props: TabBarItemProps<T> & { key: string }
@@ -63,15 +51,15 @@ export type Props<T extends Route> = SceneRendererProps & {
   tabStyle?: StyleProp<ViewStyle>;
   indicatorStyle?: StyleProp<ViewStyle>;
   indicatorContainerStyle?: StyleProp<ViewStyle>;
-  labelStyle?: StyleProp<TextStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  direction?: LocaleDirection;
   gap?: number;
   testID?: string;
   android_ripple?: PressableAndroidRippleConfig;
 };
 
-type FlattenedTabWidth = DimensionValue | undefined;
+const useNativeDriver = Platform.OS !== 'web';
 
 const Separator = ({ width }: { width: number }) => {
   return <View style={{ width }} />;
@@ -83,13 +71,56 @@ const getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
   return tabStyle?.width;
 };
 
+const getFlattenedPaddingStart = (style: StyleProp<ViewStyle>) => {
+  const flattenStyle = StyleSheet.flatten(style);
+
+  return flattenStyle
+    ? flattenStyle.paddingLeft ||
+        flattenStyle.paddingStart ||
+        flattenStyle.paddingHorizontal ||
+        0
+    : 0;
+};
+
+const getFlattenedPaddingEnd = (style: StyleProp<ViewStyle>) => {
+  const flattenStyle = StyleSheet.flatten(style);
+
+  return flattenStyle
+    ? flattenStyle.paddingRight ||
+        flattenStyle.paddingEnd ||
+        flattenStyle.paddingHorizontal ||
+        0
+    : 0;
+};
+
+const convertPaddingPercentToSize = (
+  value: DimensionValue | undefined,
+  layout: Layout
+): number => {
+  switch (typeof value) {
+    case 'number':
+      return value;
+    case 'string':
+      if (value.endsWith('%')) {
+        const width = parseFloat(value);
+        if (Number.isFinite(width)) {
+          return layout.width * (width / 100);
+        }
+      }
+  }
+  return 0;
+};
+
 const getComputedTabWidth = (
   index: number,
   layout: Layout,
   routes: Route[],
   scrollEnabled: boolean | undefined,
   tabWidths: { [key: string]: number },
-  flattenedWidth: FlattenedTabWidth
+  flattenedWidth: DimensionValue | undefined,
+  flattenedPaddingStart: DimensionValue | undefined,
+  flattenedPaddingEnd: DimensionValue | undefined,
+  gap?: number
 ) => {
   if (flattenedWidth === 'auto') {
     return tabWidths[routes[index].key] || 0;
@@ -110,7 +141,13 @@ const getComputedTabWidth = (
   if (scrollEnabled) {
     return (layout.width / 5) * 2;
   }
-  return layout.width / routes.length;
+
+  const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
+  const paddingTotalWidth =
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+    convertPaddingPercentToSize(flattenedPaddingEnd, layout);
+
+  return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
 };
 
 const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
@@ -118,13 +155,14 @@ const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
 
 const getTranslateX = (
   scrollAmount: Animated.Value,
-  maxScrollDistance: number
+  maxScrollDistance: number,
+  direction: LocaleDirection
 ) =>
   Animated.multiply(
-    Platform.OS === 'android' && I18nManager.isRTL
+    Platform.OS === 'android' && direction === 'rtl'
       ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))
       : scrollAmount,
-    I18nManager.isRTL ? 1 : -1
+    direction === 'rtl' ? 1 : -1
   );
 
 const getTabBarWidth = <T extends Route>({
@@ -133,26 +171,39 @@ const getTabBarWidth = <T extends Route>({
   gap,
   scrollEnabled,
   flattenedTabWidth,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
   tabWidths,
 }: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
-  flattenedTabWidth: FlattenedTabWidth;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  flattenedTabWidth: DimensionValue | undefined;
 }) => {
   const { routes } = navigationState;
 
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+  );
+
   return routes.reduce<number>(
     (acc, _, i) =>
       acc +
-      (i > 0 ? gap ?? 0 : 0) +
+      (i > 0 ? (gap ?? 0) : 0) +
       getComputedTabWidth(
         i,
         layout,
         routes,
         scrollEnabled,
         tabWidths,
-        flattenedTabWidth
+        flattenedTabWidth,
+        flattenedPaddingStart,
+        flattenedPaddingEnd,
+        gap
       ),
-    0
+    paddingsWidth
   );
 };
 
@@ -164,10 +215,16 @@ const normalizeScrollValue = <T extends Route>({
   tabWidths,
   value,
   flattenedTabWidth,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
+  direction,
 }: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {
   tabWidths: Record<string, number>;
   value: number;
-  flattenedTabWidth: FlattenedTabWidth;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  direction: LocaleDirection;
 }) => {
   const tabBarWidth = getTabBarWidth({
     layout,
@@ -176,11 +233,13 @@ const normalizeScrollValue = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
   });
   const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
   const scrollValue = Math.max(Math.min(value, maxDistance), 0);
 
-  if (Platform.OS === 'android' && I18nManager.isRTL) {
+  if (Platform.OS === 'android' && direction === 'rtl') {
     // On Android, scroll value is not applied in reverse in RTL
     // so we need to manually adjust it to apply correct value
     return maxDistance - scrollValue;
@@ -196,10 +255,21 @@ const getScrollAmount = <T extends Route>({
   scrollEnabled,
   flattenedTabWidth,
   tabWidths,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
+  direction,
 }: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {
   tabWidths: Record<string, number>;
-  flattenedTabWidth: FlattenedTabWidth;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  direction: LocaleDirection;
 }) => {
+  const paddingInitial =
+    direction === 'rtl'
+      ? convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+      : convertPaddingPercentToSize(flattenedPaddingStart, layout);
+
   const centerDistance = Array.from({
     length: navigationState.index + 1,
   }).reduce<number>((total, _, i) => {
@@ -209,18 +279,20 @@ const getScrollAmount = <T extends Route>({
       navigationState.routes,
       scrollEnabled,
       tabWidths,
-      flattenedTabWidth
+      flattenedTabWidth,
+      flattenedPaddingStart,
+      flattenedPaddingEnd,
+      gap
     );
 
     // To get the current index centered we adjust scroll amount by width of indexes
     // 0 through (i - 1) and add half the width of current index i
     return (
       total +
-      (navigationState.index === i
-        ? (tabWidth + (gap ?? 0)) / 2
-        : tabWidth + (gap ?? 0))
+      (i > 0 ? (gap ?? 0) : 0) +
+      (navigationState.index === i ? tabWidth / 2 : tabWidth)
     );
-  }, 0);
+  }, paddingInitial);
 
   const scrollAmount = centerDistance - layout.width / 2;
 
@@ -232,9 +304,11 @@ const getScrollAmount = <T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+    direction,
   });
 };
-
 const getLabelTextDefault = ({ route }: Scene<Route>) => route.title;
 
 const getAccessibleDefault = ({ route }: Scene<Route>) =>
@@ -244,8 +318,8 @@ const getAccessibilityLabelDefault = ({ route }: Scene<Route>) =>
   typeof route.accessibilityLabel === 'string'
     ? route.accessibilityLabel
     : typeof route.title === 'string'
-    ? route.title
-    : undefined;
+      ? route.title
+      : undefined;
 
 const renderIndicatorDefault = (props: IndicatorProps<Route>) => (
   <TabBarIndicator {...props} />
@@ -257,11 +331,7 @@ const getTestIdDefault = ({ route }: Scene<Route>) => route.testID;
 // Defaults to 10, since that's whats FlatList is using in initialNumToRender.
 const MEASURE_PER_BATCH = 10;
 
-export default function TabBar<T extends Route>({
-  getLabelText = getLabelTextDefault,
-  getAccessible = getAccessibleDefault,
-  getAccessibilityLabel = getAccessibilityLabelDefault,
-  getTestID = getTestIdDefault,
+export function TabBar<T extends Route>({
   renderIndicator = renderIndicatorDefault,
   gap = 0,
   scrollEnabled,
@@ -274,30 +344,32 @@ export default function TabBar<T extends Route>({
   inactiveColor,
   indicatorContainerStyle,
   indicatorStyle,
-  labelStyle,
   onTabLongPress,
   onTabPress,
   pressColor,
   pressOpacity,
-  renderBadge,
-  renderIcon,
-  renderLabel,
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   renderTabBarItem,
   style,
   tabStyle,
+  layout: propLayout,
   testID,
   android_ripple,
+  options,
 }: Props<T>) {
-  const [layout, setLayout] = React.useState<Layout>({ width: 0, height: 0 });
+  const [layout, setLayout] = React.useState<Layout>(
+    propLayout ?? { width: 0, height: 0 }
+  );
   const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});
   const flatListRef = React.useRef<FlatList | null>(null);
   const isFirst = React.useRef(true);
   const scrollAmount = useAnimatedValue(0);
   const measuredTabWidths = React.useRef<Record<string, number>>({});
-
   const { routes } = navigationState;
   const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
   const isWidthDynamic = flattenedTabWidth === 'auto';
+  const flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
+  const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
   const scrollOffset = getScrollAmount({
     layout,
     navigationState,
@@ -305,6 +377,9 @@ export default function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+    direction,
   });
 
   const hasMeasuredTabWidths =
@@ -348,139 +423,154 @@ export default function TabBar<T extends Route>({
     gap,
     scrollEnabled,
     flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
   });
 
   const separatorsWidth = Math.max(0, routes.length - 1) * gap;
-  const separatorPercent = (separatorsWidth / tabBarWidth) * 100;
-  const tabBarWidthPercent = `${routes.length * 40}%`;
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+  );
 
   const translateX = React.useMemo(
     () =>
       getTranslateX(
         scrollAmount,
-        getMaxScrollDistance(tabBarWidth, layout.width)
+        getMaxScrollDistance(tabBarWidth, layout.width),
+        direction
       ),
-    [layout.width, scrollAmount, tabBarWidth]
+    [direction, layout.width, scrollAmount, tabBarWidth]
   );
 
   const renderItem = React.useCallback(
     ({ item: route, index }: ListRenderItemInfo<T>) => {
-      const props: TabBarItemProps<T> & { key: string } = {
-        key: route.key,
-        position: position,
-        route: route,
-        navigationState: navigationState,
-        getAccessibilityLabel: getAccessibilityLabel,
-        getAccessible: getAccessible,
-        getLabelText: getLabelText,
-        getTestID: getTestID,
-        renderBadge: renderBadge,
-        renderIcon: renderIcon,
-        renderLabel: renderLabel,
-        activeColor: activeColor,
-        inactiveColor: inactiveColor,
-        pressColor: pressColor,
-        pressOpacity: pressOpacity,
-        onLayout: isWidthDynamic
-          ? (e: LayoutChangeEvent) => {
-              measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
-
-              // When we have measured widths for all of the tabs, we should updates the state
-              // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-              // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
-              if (
-                routes.length > MEASURE_PER_BATCH &&
-                index === MEASURE_PER_BATCH &&
-                routes
-                  .slice(0, MEASURE_PER_BATCH)
-                  .every(
-                    (r) => typeof measuredTabWidths.current[r.key] === 'number'
-                  )
-              ) {
-                setTabWidths({ ...measuredTabWidths.current });
-              } else if (
-                routes.every(
+      const {
+        testID = getTestIdDefault({ route }),
+        labelText = getLabelTextDefault({ route }),
+        accessible = getAccessibleDefault({ route }),
+        accessibilityLabel = getAccessibilityLabelDefault({ route }),
+        ...rest
+      } = options?.[route.key] ?? {};
+
+      const onLayout = isWidthDynamic
+        ? (e: LayoutChangeEvent) => {
+            measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
+
+            // When we have measured widths for all of the tabs, we should updates the state
+            // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+            // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
+            if (
+              routes.length > MEASURE_PER_BATCH &&
+              index === MEASURE_PER_BATCH &&
+              routes
+                .slice(0, MEASURE_PER_BATCH)
+                .every(
                   (r) => typeof measuredTabWidths.current[r.key] === 'number'
                 )
-              ) {
-                // When we have measured widths for all of the tabs, we should updates the state
-                // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-                setTabWidths({ ...measuredTabWidths.current });
-              }
+            ) {
+              setTabWidths({ ...measuredTabWidths.current });
+            } else if (
+              routes.every(
+                (r) => typeof measuredTabWidths.current[r.key] === 'number'
+              )
+            ) {
+              // When we have measured widths for all of the tabs, we should updates the state
+              // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+              setTabWidths({ ...measuredTabWidths.current });
             }
-          : undefined,
-        onPress: () => {
-          const event: Scene<T> & Event = {
-            route,
-            defaultPrevented: false,
-            preventDefault: () => {
-              event.defaultPrevented = true;
-            },
-          };
+          }
+        : undefined;
+
+      const onPress = () => {
+        const event: Scene<T> & Event = {
+          route,
+          defaultPrevented: false,
+          preventDefault: () => {
+            event.defaultPrevented = true;
+          },
+        };
 
-          onTabPress?.(event);
+        onTabPress?.(event);
 
-          if (event.defaultPrevented) {
-            return;
-          }
+        if (event.defaultPrevented) {
+          return;
+        }
 
-          jumpTo(route.key);
-        },
-        onLongPress: () => onTabLongPress?.({ route }),
-        labelStyle: labelStyle,
+        jumpTo(route.key);
+      };
+
+      const onLongPress = () => onTabLongPress?.({ route });
+
+      // Calculate the default width for tab for FlatList to work
+      const defaultTabWidth = !isWidthDynamic
+        ? getComputedTabWidth(
+            index,
+            layout,
+            routes,
+            scrollEnabled,
+            tabWidths,
+            getFlattenedTabWidth(tabStyle),
+            getFlattenedPaddingEnd(contentContainerStyle),
+            getFlattenedPaddingStart(contentContainerStyle),
+            gap
+          )
+        : undefined;
+
+      const props = {
+        ...rest,
+        position,
+        route,
+        navigationState,
+        testID,
+        labelText,
+        accessible,
+        accessibilityLabel,
+        activeColor,
+        inactiveColor,
+        pressColor,
+        pressOpacity,
+        onLayout,
+        onPress,
+        onLongPress,
         style: tabStyle,
-        // Calculate the deafult width for tab for FlatList to work
-        defaultTabWidth: !isWidthDynamic
-          ? getComputedTabWidth(
-              index,
-              layout,
-              routes,
-              scrollEnabled,
-              tabWidths,
-              getFlattenedTabWidth(tabStyle)
-            )
-          : undefined,
+        defaultTabWidth,
         android_ripple,
-      };
+      } satisfies TabBarItemProps<T>;
 
       return (
         <>
           {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
           {renderTabBarItem ? (
-            renderTabBarItem(props)
+            renderTabBarItem({ key: route.key, ...props })
           ) : (
-            <TabBarItem {...props} />
+            <TabBarItem key={route.key} {...props} />
           )}
         </>
       );
     },
     [
+      position,
+      navigationState,
+      options,
       activeColor,
-      android_ripple,
-      gap,
-      getAccessibilityLabel,
-      getAccessible,
-      getLabelText,
-      getTestID,
       inactiveColor,
-      isWidthDynamic,
-      jumpTo,
-      labelStyle,
-      layout,
-      navigationState,
-      onTabLongPress,
-      onTabPress,
-      position,
       pressColor,
       pressOpacity,
-      renderBadge,
-      renderIcon,
-      renderLabel,
-      renderTabBarItem,
+      isWidthDynamic,
+      tabStyle,
+      layout,
       routes,
       scrollEnabled,
-      tabStyle,
       tabWidths,
+      contentContainerStyle,
+      gap,
+      android_ripple,
+      renderTabBarItem,
+      onTabPress,
+      jumpTo,
+      onTabLongPress,
     ]
   );
 
@@ -489,21 +579,10 @@ export default function TabBar<T extends Route>({
   const contentContainerStyleMemoized = React.useMemo(
     () => [
       styles.tabContent,
-      scrollEnabled
-        ? {
-            width:
-              tabBarWidth > separatorsWidth ? tabBarWidth : tabBarWidthPercent,
-          }
-        : styles.container,
+      scrollEnabled ? { width: tabBarWidth } : null,
       contentContainerStyle,
     ],
-    [
-      contentContainerStyle,
-      scrollEnabled,
-      separatorsWidth,
-      tabBarWidth,
-      tabBarWidthPercent,
-    ]
+    [contentContainerStyle, scrollEnabled, tabBarWidth]
   );
 
   const handleScroll = React.useMemo(
@@ -516,7 +595,7 @@ export default function TabBar<T extends Route>({
             },
           },
         ],
-        { useNativeDriver: true }
+        { useNativeDriver }
       ),
     [scrollAmount]
   );
@@ -540,7 +619,6 @@ export default function TabBar<T extends Route>({
     }
   );
 
-  // FIXME: Not sure why i have to as-any here (x3) ..
   return (
     <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
       <Animated.View
@@ -548,11 +626,7 @@ export default function TabBar<T extends Route>({
         style={[
           styles.indicatorContainer,
           scrollEnabled ? { transform: [{ translateX }] as any } : null,
-          tabBarWidth > separatorsWidth
-            ? { width: tabBarWidth - separatorsWidth as any }
-            : scrollEnabled
-            ? { width: tabBarWidthPercent as any }
-            : null,
+          scrollEnabled ? { width: tabBarWidth } : null,
           indicatorContainerStyle,
         ]}
       >
@@ -561,10 +635,17 @@ export default function TabBar<T extends Route>({
           layout,
           navigationState,
           jumpTo,
+          direction,
           width: isWidthDynamic
             ? 'auto'
-            : `${(100 - separatorPercent) / routes.length}%`,
-          style: indicatorStyle,
+            : Math.max(
+                0,
+                (tabBarWidth - separatorsWidth - paddingsWidth) / routes.length
+              ),
+          style: [
+            indicatorStyle,
+            { start: flattenedPaddingStart, end: flattenedPaddingEnd },
+          ],
           getTabWidth: (i: number) =>
             getComputedTabWidth(
               i,
@@ -572,7 +653,10 @@ export default function TabBar<T extends Route>({
               routes,
               scrollEnabled,
               tabWidths,
-              flattenedTabWidth
+              flattenedTabWidth,
+              flattenedPaddingEnd,
+              flattenedPaddingStart,
+              gap
             ),
           gap,
         })}
@@ -582,7 +666,7 @@ export default function TabBar<T extends Route>({
           data={routes as Animated.WithAnimatedValue<T>[]}
           keyExtractor={keyExtractor}
           horizontal
-          accessibilityRole="tablist"
+          role="tablist"
           keyboardShouldPersistTaps="handled"
           scrollEnabled={scrollEnabled}
           bounces={bounces}
@@ -594,7 +678,7 @@ export default function TabBar<T extends Route>({
           showsVerticalScrollIndicator={false}
           automaticallyAdjustContentInsets={false}
           overScrollMode="never"
-          contentContainerStyle={contentContainerStyleMemoized as any}
+          contentContainerStyle={contentContainerStyleMemoized}
           scrollEventThrottle={16}
           renderItem={renderItem}
           onScroll={handleScroll}
@@ -607,33 +691,38 @@ export default function TabBar<T extends Route>({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   scroll: {
     overflow: Platform.select({ default: 'scroll', web: undefined }),
   },
   tabBar: {
+    zIndex: 1,
     backgroundColor: '#2196f3',
     elevation: 4,
-    shadowColor: 'black',
-    shadowOpacity: 0.1,
-    shadowRadius: StyleSheet.hairlineWidth,
-    shadowOffset: {
-      height: StyleSheet.hairlineWidth,
-      width: 0,
-    },
-    zIndex: 1,
+    ...Platform.select({
+      default: {
+        shadowColor: 'black',
+        shadowOpacity: 0.1,
+        shadowRadius: StyleSheet.hairlineWidth,
+        shadowOffset: {
+          height: StyleSheet.hairlineWidth,
+          width: 0,
+        },
+      },
+      web: {
+        boxShadow: '0 1px 1px rgba(0, 0, 0, 0.1)',
+      },
+    }),
   },
   tabContent: {
+    flexGrow: 1,
     flexDirection: 'row',
     flexWrap: 'nowrap',
   },
   indicatorContainer: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
   },
 });