revert: freeze on blur (#221)

* Revert "docs: add freezeOnBlur documentation" This reverts commit 44176dd. * Revert "feat: implement freezeOnBlur (#207)" This reverts commit c9f13ad. * chore: revert freezeOnBlur
callstackincubator · Dec 18, 2024 · 1ae783d · 1ae783d
1 parent 2bf9e80
commit 1ae783d
Show file tree

Hide file tree

Showing 13 changed files with 13 additions and 202 deletions.
diff --git a/.changeset/funny-lamps-raise.md b/.changeset/funny-lamps-raise.md
@@ -0,0 +1,6 @@
+---
+'react-native-bottom-tabs': patch
+'@bottom-tabs/react-navigation': patch
+---
+
+revert: freezeOnblur
diff --git a/apps/example/ios/Podfile.lock b/apps/example/ios/Podfile.lock
@@ -1209,7 +1209,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-bottom-tabs (0.7.6):
+  - react-native-bottom-tabs (0.7.3):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1222,7 +1222,7 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-bottom-tabs/common (= 0.7.6)
+    - react-native-bottom-tabs/common (= 0.7.3)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-rendererdebug
@@ -1234,7 +1234,7 @@ PODS:
     - SDWebImageSVGCoder (>= 1.7.0)
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
-  - react-native-bottom-tabs/common (0.7.6):
+  - react-native-bottom-tabs/common (0.7.3):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1943,7 +1943,7 @@ SPEC CHECKSUMS:
   React-logger: d79b704bf215af194f5213a6b7deec50ba8e6a9b
   React-Mapbuffer: b982d5bba94a8bc073bda48f0d27c9b28417fae3
   React-microtasksnativemodule: 8fa285fed833a04a754bf575f8ded65fc240b88d
-  react-native-bottom-tabs: 084cfd4d4b1e74c03f4196b3f62d39445882f45f
+  react-native-bottom-tabs: b6b3dc2e971c860a0a6d763701929d1899f666a0
   react-native-safe-area-context: 73505107f7c673cd550a561aeb6271f152c483b6
   React-nativeconfig: 8c83d992b9cc7d75b5abe262069eaeea4349f794
   React-NativeModulesApple: b8465afc883f5bf3fe8bac3767e394d581a5f123

diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
@@ -27,7 +27,6 @@ import TintColorsExample from './Examples/TintColors';
 import NativeBottomTabsEmbeddedStacks from './Examples/NativeBottomTabsEmbeddedStacks';
 import NativeBottomTabsSVGs from './Examples/NativeBottomTabsSVGs';
 import NativeBottomTabsRemoteIcons from './Examples/NativeBottomTabsRemoteIcons';
-import NativeBottomTabsFreezeOnBlur from './Examples/NativeBottomTabsFreezeOnBlur';
 
 const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
@@ -103,10 +102,6 @@ const examples = [
     name: 'Four Tabs - Transparent scroll edge appearance',
     platform: 'ios',
   },
-  {
-    component: NativeBottomTabsFreezeOnBlur,
-    name: 'Native Bottom Tabs with freezeOnBlur',
-  },
   {
     component: FourTabsOpaqueScrollEdgeAppearance,
     name: 'Four Tabs - Opaque scroll edge appearance',

diff --git a/apps/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx b/apps/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx
diff --git a/docs/docs/docs/guides/standalone-usage.md b/docs/docs/docs/guides/standalone-usage.md
@@ -184,7 +184,6 @@ Each route in the `routes` array can have the following properties:
 - `badge`: Badge text to display on the tab
 - `activeTintColor`: Custom active tint color for this specific tab
 - `lazy`: Whether to lazy load this tab's content
-- `freezeOnBlur`: Whether to freeze this tab's content when it's not visible
 
 ### Helper Props
 
@@ -225,8 +224,3 @@ Function to determine if a tab should be hidden.
 
 Function to get the test ID for a tab item.
 - Default: Uses `route.testID`
-
-#### `getFreezeOnBlur`
-
-Function to determine if a screen should be frozen on blur.
-- Default: Uses `route.freezeOnBlur`
diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx
@@ -233,12 +233,6 @@ Whether this screens should render the first time it's accessed. Defaults to tru
 
 Test ID for the tab item. This can be used to find the tab item in the native view hierarchy.
 
-#### `freezeOnBlur`
-
-Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when `enableFreeze()` from `react-native-screens` package is run at the top of the application.
-
-Only supported on iOS and Android.
-
 ### Events
 
 The navigator can emit events on certain actions. Supported events are:

diff --git a/packages/react-native-bottom-tabs/package.json b/packages/react-native-bottom-tabs/package.json
@@ -77,18 +77,11 @@
     "react": "18.3.1",
     "react-native": "0.75.4",
     "react-native-builder-bob": "^0.32.1",
-    "react-native-screens": "4.3.0",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*",
-    "react-native-screens": ">=3.29.0"
-  },
-  "peerDependenciesMeta": {
-    "react-native-screens": {
-      "optional": true
-    }
+    "react-native": "*"
   },
   "react-native-builder-bob": {
     "source": "src",

diff --git a/packages/react-native-bottom-tabs/src/Screen.tsx b/packages/react-native-bottom-tabs/src/Screen.tsx
diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx
@@ -15,7 +15,6 @@ import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
 import TabViewAdapter from './TabViewAdapter';
 import useLatestCallback from 'use-latest-callback';
 import type { BaseRoute, NavigationState } from './types';
-import { Screen } from './Screen';
 
 const isAppleSymbol = (icon: any): icon is { sfSymbol: string } =>
   icon?.sfSymbol;
@@ -117,13 +116,6 @@ interface Props<Route extends BaseRoute> {
    */
   getTestID?: (props: { route: Route }) => string | undefined;
 
-  /**
-   * Get freezeOnBlur for the current screen. Uses false by default.
-   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-   *
-   */
-  getFreezeOnBlur?: (props: { route: Route }) => boolean | undefined;
-
   /**
    * Background color of the tab bar.
    */
@@ -168,7 +160,6 @@ const TabView = <Route extends BaseRoute>({
   tabBarInactiveTintColor: inactiveTintColor,
   getLazy = ({ route }: { route: Route }) => route.lazy,
   getLabelText = ({ route }: { route: Route }) => route.title,
-  getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur,
   getIcon = ({ route, focused }: { route: Route; focused: boolean }) =>
     route.unfocusedIcon
       ? focused
@@ -320,14 +311,11 @@ const TabView = <Route extends BaseRoute>({
           const focused = route.key === focusedKey;
           const opacity = focused ? 1 : 0;
           const zIndex = focused ? 0 : -1;
-          const freezeOnBlur = getFreezeOnBlur({ route });
 
           return (
-            <Screen
+            <View
               key={route.key}
               collapsable={false}
-              visible={focused}
-              freezeOnBlur={freezeOnBlur}
               pointerEvents={focused ? 'auto' : 'none'}
               accessibilityElementsHidden={!focused}
               importantForAccessibility={
@@ -343,7 +331,7 @@ const TabView = <Route extends BaseRoute>({
                 route,
                 jumpTo,
               })}
-            </Screen>
+            </View>
           );
         })}
       </TabViewAdapter>

diff --git a/packages/react-native-bottom-tabs/src/types.ts b/packages/react-native-bottom-tabs/src/types.ts
@@ -15,7 +15,6 @@ export type BaseRoute = {
   activeTintColor?: string;
   hidden?: boolean;
   testID?: string;
-  freezeOnBlur?: boolean;
 };
 
 export type NavigationState<Route extends BaseRoute> = {

diff --git a/packages/react-navigation/src/types.ts b/packages/react-navigation/src/types.ts
@@ -91,14 +91,6 @@ export type NativeBottomTabNavigationOptions = {
    * TestID for the tab.
    */
   tabBarButtonTestID?: string;
-
-  /**
-   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
-   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-   *
-   * Only supported on iOS and Android.
-   */
-  freezeOnBlur?: boolean;
 };
 
 export type NativeBottomTabDescriptor = Descriptor<
@@ -125,6 +117,5 @@ export type NativeBottomTabNavigationConfig = Partial<
     | 'onTabLongPress'
     | 'getActiveTintColor'
     | 'getTestID'
-    | 'getFreezeOnBlur'
   >
 >;
diff --git a/packages/react-navigation/src/views/NativeBottomTabView.tsx b/packages/react-navigation/src/views/NativeBottomTabView.tsx
@@ -45,9 +45,6 @@ export default function NativeBottomTabView({
         const options = descriptors[route.key]?.options;
         return options?.tabBarItemHidden === true;
       }}
-      getFreezeOnBlur={({ route }) =>
-        descriptors[route.key]?.options.freezeOnBlur
-      }
       getTestID={({ route }) =>
         descriptors[route.key]?.options.tabBarButtonTestID
       }

diff --git a/yarn.lock b/yarn.lock
@@ -15614,17 +15614,12 @@ __metadata:
     react: 18.3.1
     react-native: 0.75.4
     react-native-builder-bob: ^0.32.1
-    react-native-screens: 4.3.0
     sf-symbols-typescript: ^2.0.0
     typescript: ^5.2.2
     use-latest-callback: ^0.2.1
   peerDependencies:
     react: "*"
     react-native: "*"
-    react-native-screens: ">=3.29.0"
-  peerDependenciesMeta:
-    react-native-screens:
-      optional: true
   languageName: unknown
   linkType: soft