@react-navigation/bottom-tabs 8.0.0-alpha.32 → 8.0.0-alpha.34

package/src/views/BottomTabViewCustom.tsx

@@ -36,6 +36,7 @@ import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
 import { useAnimatedHashMap } from '../utils/useAnimatedHashMap';
 import { useTabBarPosition } from '../utils/useTabBarPosition';
 import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
+import { Deferred } from './Deferred';
 import { ScreenContent } from './ScreenContent';
 
 type Props = BottomTabNavigationConfig & {
@@ -79,7 +80,14 @@ export function BottomTabViewCustom({
   descriptors,
 }: Props) {
   const { routes } = state;
-  const focusedRouteKey = routes[state.index].key;
+  const focusedRoute = routes[state.index];
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedRouteKey = focusedRoute.key;
+  const focusedOptions = descriptors[focusedRouteKey]?.options;
 
   const [loaded, setLoaded] = React.useState([focusedRouteKey]);
 
@@ -141,7 +149,15 @@ export function BottomTabViewCustom({
 
       const animations = state.routes
         .map((route, index) => {
-          const { options } = descriptors[route.key];
+          const descriptor = descriptors[route.key];
+
+          if (descriptor == null) {
+            throw new Error(
+              `Couldn't find a descriptor for route '${route.key}'.`
+            );
+          }
+
+          const { options } = descriptor;
           const {
             animation = 'none',
             transitionSpec = NAMED_TRANSITIONS_PRESETS[animation]
@@ -161,7 +177,15 @@ export function BottomTabViewCustom({
           const toValue =
             index === state.index ? 0 : index >= state.index ? 1 : -1;
 
-          return Animated[spec.animation](tabAnims[route.key], {
+          const tabAnimation = tabAnims[route.key];
+
+          if (tabAnimation == null) {
+            throw new Error(
+              `Couldn't find an animation for route '${route.key}'.`
+            );
+          }
+
+          return Animated[spec.animation](tabAnimation, {
             ...spec.config,
             toValue,
             useNativeDriver,
@@ -218,7 +242,7 @@ export function BottomTabViewCustom({
       descriptors,
       dimensions: SafeAreaProviderCompat.initialMetrics.frame,
       insets: SafeAreaProviderCompat.initialMetrics.insets,
-      style: descriptors[focusedRouteKey].options.tabBarStyle,
+      style: focusedOptions?.tabBarStyle,
     })
   );
 
@@ -235,9 +259,7 @@ export function BottomTabViewCustom({
     </BottomTabBarHeightCallbackContext.Provider>
   );
 
-  const tabBarPosition = useTabBarPosition(
-    descriptors[focusedRouteKey].options
-  );
+  const tabBarPosition = useTabBarPosition(focusedOptions ?? {});
 
   return (
     <SafeAreaProviderCompat
@@ -255,6 +277,12 @@ export function BottomTabViewCustom({
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
 
+          if (descriptor == null) {
+            throw new Error(
+              `Couldn't find a descriptor for route '${route.key}'.`
+            );
+          }
+
           const { navigation, options, render } = descriptor;
 
           const {
@@ -269,22 +297,19 @@ export function BottomTabViewCustom({
           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 tabAnimation = tabAnims[route.key];
+
+          if (tabAnimation == null) {
+            throw new Error(
+              `Couldn't find an animation for route '${route.key}'.`
+            );
+          }
 
           const content = (
             <AnimatedScreenContent
               key={route.key}
-              progress={tabAnims[route.key]}
+              progress={tabAnimation}
               animationEnabled={animationEnabled}
               sceneStyleInterpolator={sceneStyleInterpolator}
               style={[StyleSheet.absoluteFill, customSceneStyle]}
@@ -318,14 +343,22 @@ export function BottomTabViewCustom({
             (lazy === false && !loaded.includes(route.key));
 
           return (
-            <ActivityView
+            <Deferred
               key={route.key}
-              mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
-              visible={isFocused || isAnimatingRoute}
-              style={{ ...StyleSheet.absoluteFill, zIndex: isFocused ? 0 : -1 }}
+              lazy={lazy}
+              visible={isFocused || isPreloaded || loaded.includes(route.key)}
             >
-              {content}
-            </ActivityView>
+              <ActivityView
+                mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
+                visible={isFocused || isAnimatingRoute}
+                style={{
+                  ...StyleSheet.absoluteFill,
+                  zIndex: isFocused ? 0 : -1,
+                }}
+              >
+                {content}
+              </ActivityView>
+            </Deferred>
           );
         })}
       </Container>

package/src/views/BottomTabViewNativeImpl.tsx

@@ -39,10 +39,12 @@ import type {
   BottomTabDescriptorMap,
   BottomTabNavigationConfig,
   BottomTabNavigationHelpers,
+  BottomTabNavigationOptions,
 } from '../types';
 import { BottomTabAnimationContext } from '../utils/BottomTabAnimationContext';
 import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
 import { useTabBarPosition } from '../utils/useTabBarPosition';
+import { Deferred } from './Deferred';
 import { ScreenContent } from './ScreenContent';
 
 type Props = BottomTabNavigationConfig & {
@@ -125,7 +127,13 @@ export function BottomTabViewNative({
 }: Props) {
   const { dark, colors, fonts } = useTheme();
 
-  const focusedRouteKey = state.routes[state.index].key;
+  const focusedRoute = state.routes[state.index];
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedRouteKey = focusedRoute.key;
 
   const [loaded, setLoaded] = React.useState([focusedRouteKey]);
 
@@ -302,7 +310,8 @@ export function BottomTabViewNative({
     });
   };
 
-  const currentOptions = descriptors[state.routes[state.index].key]?.options;
+  const currentOptions: BottomTabNavigationOptions =
+    descriptors[focusedRouteKey]?.options ?? {};
 
   const {
     fontFamily = Platform.select({
@@ -438,6 +447,7 @@ export function BottomTabViewNative({
         onTabSelectionRejected={onTabSelectionRejected}
         onTabSelectionPrevented={onTabSelectionPrevented}
         tabBarHidden={hasCustomTabBar || shouldHideTabBar}
+        nativeContainerStyle={{ backgroundColor }}
         colorScheme={dark ? 'dark' : 'light'}
         ios={{
           bottomAccessory: bottomAccessory
@@ -450,13 +460,21 @@ export function BottomTabViewNative({
         }}
       >
         {state.routes.map((route, index) => {
-          const { options, render, navigation } = descriptors[route.key];
+          const descriptor = descriptors[route.key];
+
+          if (descriptor == null) {
+            throw new Error(
+              `Couldn't find a descriptor for route '${route.key}'.`
+            );
+          }
+
+          const { options, render, navigation } = descriptor;
           const isFocused = state.index === index;
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
 
           const {
             title,
-            lazy = true,
+            lazy = false,
             inactiveBehavior = 'pause',
             tabBarLabel,
             tabBarSelectionEnabled,
@@ -630,10 +648,10 @@ export function BottomTabViewNative({
                 overrideScrollViewContentInsetAdjustmentBehavior,
               }}
             >
-              {lazy &&
-              !loaded.includes(route.key) &&
-              !isFocused &&
-              !isPreloaded ? null : (
+              <Deferred
+                lazy={lazy}
+                visible={isFocused || isPreloaded || loaded.includes(route.key)}
+              >
                 <ActivityView
                   key={route.key}
                   mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
@@ -661,7 +679,7 @@ export function BottomTabViewNative({
                     </AnimatedScreenContent>
                   </ScreenContent>
                 </ActivityView>
-              )}
+              </Deferred>
             </Tabs.Screen>
           );
         })}

package/src/views/Deferred.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+type Props = {
+  /**
+   * Whether lazy rendering is enabled.
+   */
+  lazy: boolean;
+  /**
+   * Whether the component is visible.
+   */
+  visible: boolean;
+  /**
+   * Content to render.
+   */
+  children: React.ReactElement;
+};
+
+/**
+ * Render content lazily based on visibility.
+ *
+ * When lazy is enabled:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it won't render until it becomes visible
+ *
+ * Otherwise:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it will defer rendering
+ *
+ * Once rendered, the content remains rendered.
+ */
+export function Deferred({ lazy, visible, children }: Props) {
+  const [rendered, setRendered] = React.useState(lazy ? visible : false);
+
+  const shouldRenderDeferred = !(lazy || visible || rendered);
+
+  React.useEffect(() => {
+    if (shouldRenderDeferred === false) {
+      return;
+    }
+
+    React.startTransition(() => {
+      setRendered(true);
+    });
+  }, [shouldRenderDeferred]);
+
+  if (visible && rendered === false) {
+    setRendered(true);
+
+    return children;
+  }
+
+  if (rendered) {
+    return children;
+  }
+
+  return null;
+}