@react-navigation/bottom-tabs 7.9.0 → 8.0.0-alpha.0

package/src/views/{BottomTabView.tsx → BottomTabViewCustom.tsx}

@@ -1,9 +1,8 @@
 import {
-  getHeaderTitle,
-  Header,
+  Container,
+  Lazy,
   SafeAreaProviderCompat,
-  Screen,
-} from '@react-navigation/elements';
+} from '@react-navigation/elements/internal';
 import {
   type NavigationAction,
   type ParamListBase,
@@ -11,8 +10,14 @@ import {
   type TabNavigationState,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import {
+  Animated,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+import { Screen, ScreenContainer } from 'react-native-screens';
 
 import {
   FadeTransition,
@@ -21,17 +26,18 @@ import {
 import type {
   BottomTabBarProps,
   BottomTabDescriptorMap,
-  BottomTabHeaderProps,
   BottomTabNavigationConfig,
   BottomTabNavigationHelpers,
   BottomTabNavigationOptions,
-  BottomTabNavigationProp,
+  BottomTabSceneStyleInterpolator,
 } from '../types';
+import { BottomTabAnimationContext } from '../utils/BottomTabAnimationContext';
 import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
 import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
 import { useAnimatedHashMap } from '../utils/useAnimatedHashMap';
+import { useTabBarPosition } from '../utils/useTabBarPosition';
 import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
-import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
+import { ScreenContent } from './ScreenContent';
 
 type Props = BottomTabNavigationConfig & {
   state: TabNavigationState<ParamListBase>;
@@ -72,29 +78,17 @@ const renderTabBarDefault = (props: BottomTabBarProps) => (
   <BottomTabBar {...props} />
 );
 
-export function BottomTabView(props: Props) {
-  const {
-    tabBar = renderTabBarDefault,
-    state,
-    navigation,
-    descriptors,
-    safeAreaInsets,
-    detachInactiveScreens = Platform.OS === 'web' ||
-      Platform.OS === 'android' ||
-      Platform.OS === 'ios',
-  } = props;
-
-  const focusedRouteKey = state.routes[state.index].key;
-
-  /**
-   * List of loaded tabs, tabs will be loaded when navigated to.
-   */
-  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
-
-  if (!loaded.includes(focusedRouteKey)) {
-    // Set the current tab to be loaded if it was not loaded before
-    setLoaded([...loaded, focusedRouteKey]);
-  }
+export function BottomTabViewCustom({
+  tabBar = renderTabBarDefault,
+  state,
+  navigation,
+  descriptors,
+  detachInactiveScreens = Platform.OS === 'web' ||
+    Platform.OS === 'android' ||
+    Platform.OS === 'ios',
+}: Props) {
+  const { routes } = state;
+  const focusedRouteKey = routes[state.index].key;
 
   const previousRouteKeyRef = React.useRef(focusedRouteKey);
   const tabAnims = useAnimatedHashMap(state);
@@ -187,58 +181,38 @@ export function BottomTabView(props: Props) {
     tabAnims,
   ]);
 
-  const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
   const [tabBarHeight, setTabBarHeight] = React.useState(() =>
     getTabBarHeight({
       state,
       descriptors,
-      dimensions,
-      insets: {
-        ...SafeAreaProviderCompat.initialMetrics.insets,
-        ...props.safeAreaInsets,
-      },
-      style: descriptors[state.routes[state.index].key].options.tabBarStyle,
+      dimensions: SafeAreaProviderCompat.initialMetrics.frame,
+      insets: SafeAreaProviderCompat.initialMetrics.insets,
+      style: descriptors[focusedRouteKey].options.tabBarStyle,
     })
   );
 
-  const renderTabBar = () => {
-    return (
-      <SafeAreaInsetsContext.Consumer>
-        {(insets) =>
-          tabBar({
-            state: state,
-            descriptors: descriptors,
-            navigation: navigation,
-            insets: {
-              top: safeAreaInsets?.top ?? insets?.top ?? 0,
-              right: safeAreaInsets?.right ?? insets?.right ?? 0,
-              bottom: safeAreaInsets?.bottom ?? insets?.bottom ?? 0,
-              left: safeAreaInsets?.left ?? insets?.left ?? 0,
-            },
-          })
-        }
-      </SafeAreaInsetsContext.Consumer>
-    );
-  };
-
-  const { routes } = state;
-
-  // If there is no animation, we only have 2 states: visible and invisible
-  const hasTwoStates = !routes.some((route) =>
-    hasAnimation(descriptors[route.key].options)
-  );
-
-  const { tabBarPosition = 'bottom' } = descriptors[focusedRouteKey].options;
-
   const tabBarElement = (
     <BottomTabBarHeightCallbackContext.Provider
       key="tabbar"
       value={setTabBarHeight}
     >
-      {renderTabBar()}
+      {tabBar({
+        state: state,
+        descriptors: descriptors,
+        navigation: navigation,
+      })}
     </BottomTabBarHeightCallbackContext.Provider>
   );
 
+  // If there is no animation, we only have 2 states: visible and invisible
+  const hasTwoStates = !routes.some((route) =>
+    hasAnimation(descriptors[route.key].options)
+  );
+
+  const tabBarPosition = useTabBarPosition(
+    descriptors[focusedRouteKey].options
+  );
+
   return (
     <SafeAreaProviderCompat
       style={{
@@ -251,7 +225,7 @@ export function BottomTabView(props: Props) {
       {tabBarPosition === 'top' || tabBarPosition === 'left'
         ? tabBarElement
         : null}
-      <MaybeScreenContainer
+      <ScreenContainer
         key="screens"
         enabled={detachInactiveScreens}
         hasTwoStates={hasTwoStates}
@@ -259,48 +233,67 @@ export function BottomTabView(props: Props) {
       >
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
+
+          const { navigation, options, render } = descriptor;
+
           const {
             lazy = true,
             animation = 'none',
             sceneStyleInterpolator = NAMED_TRANSITIONS_PRESETS[animation]
               .sceneStyleInterpolator,
-          } = descriptor.options;
+            sceneStyle: customSceneStyle,
+          } = options;
+
           const isFocused = state.index === index;
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
 
-          if (
-            lazy &&
-            !loaded.includes(route.key) &&
-            !isFocused &&
-            !isPreloaded
-          ) {
-            // Don't render a lazy screen if we've never navigated to it or it wasn't preloaded
-            return null;
-          }
+          const animationEnabled = hasAnimation(descriptor.options);
 
-          const {
-            freezeOnBlur,
-            header = ({ layout, options }: BottomTabHeaderProps) => (
-              <Header
-                {...options}
-                layout={layout}
-                title={getHeaderTitle(options, route.name)}
-              />
-            ),
-            headerShown,
-            headerStatusBarHeight,
-            headerTransparent,
-            sceneStyle: customSceneStyle,
-          } = descriptor.options;
+          const content = (
+            <AnimatedScreenContent
+              progress={tabAnims[route.key]}
+              animationEnabled={animationEnabled}
+              sceneStyleInterpolator={sceneStyleInterpolator}
+              style={customSceneStyle}
+            >
+              <Lazy enabled={lazy} visible={isFocused || isPreloaded}>
+                <ScreenContent
+                  isFocused={isFocused}
+                  route={route}
+                  navigation={navigation}
+                  options={options}
+                >
+                  <BottomTabBarHeightContext.Provider
+                    value={tabBarPosition === 'bottom' ? tabBarHeight : 0}
+                  >
+                    {render()}
+                  </BottomTabBarHeightContext.Provider>
+                </ScreenContent>
+              </Lazy>
+            </AnimatedScreenContent>
+          );
 
-          const { sceneStyle } =
-            sceneStyleInterpolator?.({
-              current: {
-                progress: tabAnims[route.key],
-              },
-            }) ?? {};
+          if (Platform.OS === 'web') {
+            /**
+             * Don't use react-native-screens on web:
+             * - It applies display: none as fallback, which triggers `onLayout` events
+             * - We still need to hide the view when screens is not enabled
+             * - We can use `inert` to handle a11y better for unfocused screens
+             */
+            return (
+              <Container
+                key={route.key}
+                inert={!isFocused}
+                style={{
+                  ...StyleSheet.absoluteFillObject,
+                  visibility: isFocused ? 'visible' : 'hidden',
+                }}
+              >
+                {content}
+              </Container>
+            );
+          }
 
-          const animationEnabled = hasAnimation(descriptor.options);
           const activityState = isFocused
             ? STATE_ON_TOP // the screen is on top after the transition
             : animationEnabled // is animation is not enabled, immediately move to inactive state
@@ -316,40 +309,24 @@ export function BottomTabView(props: Props) {
               : STATE_INACTIVE;
 
           return (
-            <MaybeScreen
+            <Screen
               key={route.key}
-              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
-              active={activityState}
+              style={[
+                StyleSheet.absoluteFill,
+                {
+                  zIndex: isFocused ? 0 : -1,
+                  pointerEvents: isFocused ? 'auto' : 'none',
+                },
+              ]}
+              activityState={activityState}
               enabled={detachInactiveScreens}
-              freezeOnBlur={freezeOnBlur}
               shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
             >
-              <BottomTabBarHeightContext.Provider
-                value={tabBarPosition === 'bottom' ? tabBarHeight : 0}
-              >
-                <Screen
-                  focused={isFocused}
-                  route={descriptor.route}
-                  navigation={descriptor.navigation}
-                  headerShown={headerShown}
-                  headerStatusBarHeight={headerStatusBarHeight}
-                  headerTransparent={headerTransparent}
-                  header={header({
-                    layout: dimensions,
-                    route: descriptor.route,
-                    navigation:
-                      descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
-                    options: descriptor.options,
-                  })}
-                  style={[customSceneStyle, animationEnabled && sceneStyle]}
-                >
-                  {descriptor.render()}
-                </Screen>
-              </BottomTabBarHeightContext.Provider>
-            </MaybeScreen>
+              {content}
+            </Screen>
           );
         })}
-      </MaybeScreenContainer>
+      </ScreenContainer>
       {tabBarPosition === 'bottom' || tabBarPosition === 'right'
         ? tabBarElement
         : null}
@@ -357,9 +334,45 @@ export function BottomTabView(props: Props) {
   );
 }
 
+function AnimatedScreenContent({
+  progress,
+  animationEnabled,
+  sceneStyleInterpolator,
+  children,
+  style,
+}: {
+  progress: Animated.Value;
+  animationEnabled: boolean;
+  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
+  children: React.ReactNode;
+  style: StyleProp<ViewStyle>;
+}) {
+  const interpolationProps = React.useMemo(() => {
+    return {
+      current: { progress },
+    };
+  }, [progress]);
+
+  const { sceneStyle } = sceneStyleInterpolator?.(interpolationProps) ?? {};
+
+  return (
+    <Animated.View
+      style={[styles.scene, style, animationEnabled && sceneStyle]}
+    >
+      <BottomTabAnimationContext.Provider value={interpolationProps}>
+        {children}
+      </BottomTabAnimationContext.Provider>
+    </Animated.View>
+  );
+}
+
 const styles = StyleSheet.create({
   screens: {
     flex: 1,
     overflow: 'hidden',
   },
+  scene: {
+    flex: 1,
+    pointerEvents: 'box-none',
+  },
 });

package/src/views/BottomTabViewNative.android.tsx

@@ -0,0 +1 @@
+export * from './BottomTabViewNativeImpl';

package/src/views/BottomTabViewNative.ios.tsx

@@ -0,0 +1 @@
+export * from './BottomTabViewNativeImpl';

package/src/views/BottomTabViewNative.tsx

@@ -0,0 +1,3 @@
+import { BottomTabViewCustom } from './BottomTabViewCustom';
+
+export { BottomTabViewCustom as BottomTabViewNative };