Revert "fix ios lazy tab first-load flash"

This reverts commit 99b5e34.

Author: thiagobrez

.changeset/lazy-placeholders-style.md

@@ -3,15 +3,11 @@ import { useState } from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
-import { Chat } from '../Screens/Chat';
-import { SolidColor } from '../Screens/SolidColor';
 
 const renderScene = SceneMap({
   article: Article,
   albums: Albums,
   contacts: Contacts,
-  chat: Chat,
-  solid: SolidColor,
 });
 
 export default function LazyTabs() {
@@ -39,18 +35,6 @@ export default function LazyTabs() {
       title: 'Contacts',
       testID: 'contactsTestID',
     },
-    {
-      key: 'chat',
-      focusedIcon: require('../../assets/icons/chat_dark.png'),
-      title: 'Chat',
-      testID: 'chatTestID',
-    },
-    {
-      key: 'solid',
-      focusedIcon: require('../../assets/icons/person_dark.png'),
-      title: 'Solid',
-      testID: 'solidTestID',
-    },
   ]);
 
   return (

apps/example/src/Examples/LazyTabs.tsx

@@ -3,7 +3,6 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
-import { SolidColor } from '../Screens/SolidColor';
 
 const Tab = createNativeBottomTabNavigator();
 
@@ -39,13 +38,6 @@ export default function NativeBottomTabsLazy() {
           tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
         }}
       />
-      <Tab.Screen
-        name="Solid"
-        component={SolidColor}
-        options={{
-          tabBarIcon: () => require('../../assets/icons/newspaper.svg'),
-        }}
-      />
     </Tab.Navigator>
   );
 }

apps/example/src/Examples/NativeBottomTabsLazy.tsx

@@ -8,7 +8,6 @@ import UIKit
 
 private final class TabBarDelegate: NSObject, UITabBarControllerDelegate {
   var onClick: ((_ index: Int?, _ identifier: String?) -> Bool)?
-  weak var props: TabViewProps?
 
   func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
     if #available(iOS 27.0, *) {
@@ -72,36 +71,9 @@ private final class TabBarDelegate: NSObject, UITabBarControllerDelegate {
       $0 === tab || $0.identifier == tab.identifier
     }
   }
-
-  func tabBarController(
-    _ tabBarController: UITabBarController,
-    animationControllerForTransitionFrom fromVC: UIViewController,
-    to toVC: UIViewController
-  ) -> UIViewControllerAnimatedTransitioning? {
-    props?.disablePageAnimations == true ? DisabledTabTransitionAnimator() : nil
-  }
-}
-
-private final class DisabledTabTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
-  func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
-    0
-  }
-
-  func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
-    guard let toView = transitionContext.view(forKey: .to),
-          let toViewController = transitionContext.viewController(forKey: .to) else {
-      transitionContext.completeTransition(false)
-      return
-    }
-
-    toView.frame = transitionContext.finalFrame(for: toViewController)
-    transitionContext.containerView.addSubview(toView)
-    transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
-  }
 }
 
 struct TabItemEventModifier: ViewModifier {
-  @ObservedObject var props: TabViewProps
   let onTabEvent: (_ index: Int?, _ identifier: String?, _ isLongPress: Bool) -> Bool
   private let delegate = TabBarDelegate()
 
@@ -113,7 +85,6 @@ struct TabItemEventModifier: ViewModifier {
   }
 
   func handle(tabController: UITabBarController) {
-    delegate.props = props
     delegate.onClick = { index, identifier in
       onTabEvent(index, identifier, false)
     }
@@ -184,14 +155,8 @@ extension View {
   /**
    Event for tab items. Returns true if should prevent default (switching tabs).
    */
-  func onTabItemEvent(
-    props: TabViewProps,
-    _ handler: @escaping (Int?, String?, Bool) -> Bool
-  ) -> some View {
-    modifier(TabItemEventModifier(
-      props: props,
-      onTabEvent: handler
-    ))
+  func onTabItemEvent(_ handler: @escaping (Int?, String?, Bool) -> Bool) -> some View {
+    modifier(TabItemEventModifier(onTabEvent: handler))
   }
 }
 

apps/example/src/Screens/SolidColor.tsx

@@ -46,9 +46,7 @@ struct TabViewImpl: View {
     tabContent
       .tabBarMinimizeBehavior(props.minimizeBehavior)
       #if !os(tvOS) && !os(macOS) && !os(visionOS)
-        .onTabItemEvent(
-          props: props
-        ) { index, identifier, isLongPress in
+        .onTabItemEvent { index, identifier, isLongPress in
           let item = identifier.flatMap { props.filteredItems.findByKey($0) }
             ?? index.flatMap { props.filteredItems[safe: $0] }
           guard let key = item?.key else { return false }

packages/react-native-bottom-tabs/ios/TabItemEventModifier.swift

@@ -299,13 +299,12 @@ const TabView = <Route extends BaseRoute>({
     }
     return navigationState.routes;
   }, [navigationState.routes]);
-  const shouldDeferUnloadedLazySelection =
-    Platform.OS === 'ios' && parseFloat(String(Platform.Version)) >= 26;
 
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
    */
   const [loaded, setLoaded] = React.useState<string[]>([focusedKey]);
+
   if (!loaded.includes(focusedKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded((loaded) => [...loaded, focusedKey]);
@@ -348,11 +347,7 @@ const TabView = <Route extends BaseRoute>({
           hidden: getHidden?.({ route }),
           testID: getTestID?.({ route }),
           role: getRole?.({ route }),
-          preventsDefault:
-            getPreventsDefault?.({ route }) ||
-            (shouldDeferUnloadedLazySelection &&
-              getLazy({ route }) !== false &&
-              !loaded.includes(route.key)),
+          preventsDefault: getPreventsDefault?.({ route }),
         };
       }),
     [
@@ -368,9 +363,6 @@ const TabView = <Route extends BaseRoute>({
       getTestID,
       getRole,
       getPreventsDefault,
-      getLazy,
-      loaded,
-      shouldDeferUnloadedLazySelection,
     ]
   );
 
@@ -392,12 +384,6 @@ const TabView = <Route extends BaseRoute>({
     onIndexChange(index);
   });
 
-  const hasUnloadedLazyRoute =
-    shouldDeferUnloadedLazySelection &&
-    trimmedRoutes.some(
-      (route) => getLazy({ route }) !== false && !loaded.includes(route.key)
-    );
-
   const handleTabLongPress = React.useCallback(
     ({ nativeEvent: { key } }: { nativeEvent: OnPageSelectedEventData }) => {
       const index = trimmedRoutes.findIndex((route) => route.key === key);
@@ -408,22 +394,9 @@ const TabView = <Route extends BaseRoute>({
 
   const handlePageSelected = React.useCallback(
     ({ nativeEvent: { key } }: { nativeEvent: OnPageSelectedEventData }) => {
-      const route = trimmedRoutes.find((route) => route.key === key);
-      const preventsDefault = route ? getPreventsDefault({ route }) : false;
-
-      if (route && !preventsDefault) {
-        setLoaded((loaded) =>
-          loaded.includes(key) ? loaded : [...loaded, key]
-        );
-      }
-
       jumpTo(key);
     },
-    [
-      getPreventsDefault,
-      jumpTo,
-      trimmedRoutes,
-    ]
+    [jumpTo]
   );
 
   const handleTabBarMeasured = React.useCallback(
@@ -469,34 +442,27 @@ const TabView = <Route extends BaseRoute>({
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
         experimentalBakedTintColors={experimentalBakedTintColors}
-        disablePageAnimations={
-          props.disablePageAnimations || hasUnloadedLazyRoute
-        }
         barTintColor={tabBarStyle?.backgroundColor}
         rippleColor={rippleColor}
         labeled={labeled}
       >
         {trimmedRoutes.map((route) => {
-          const customStyle = getSceneStyle({ route });
-
           if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
             // Don't render a screen if we've never navigated to it
             return (
               <View
                 key={route.key}
                 collapsable={false}
-                style={[
-                  styles.screen,
-                  renderCustomTabBar ? styles.fullWidth : measuredDimensions,
-                  customStyle,
-                ]}
+                style={styles.fullWidth}
               />
             );
           }
 
           const focused = route.key === focusedKey;
           const freeze = !focused ? getFreezeOnBlur({ route }) : false;
 
+          const customStyle = getSceneStyle({ route });
+
           return (
             <View
               key={route.key}