From 1ae783df914fc661d25dfcbfafec32c70e9b3538 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 18 Dec 2024 21:38:24 +0100 Subject: [PATCH] revert: freeze on blur (#221) * Revert "docs: add freezeOnBlur documentation" This reverts commit 44176dd02a8d98d5723693eda8ae5bf86558278e. * Revert "feat: implement freezeOnBlur (#207)" This reverts commit c9f13ad01aa147341ac74acce00b7ae8e1db5402. * chore: revert freezeOnBlur --- .changeset/funny-lamps-raise.md | 6 + apps/example/ios/Podfile.lock | 8 +- apps/example/src/App.tsx | 5 - .../Examples/NativeBottomTabsFreezeOnBlur.tsx | 115 ------------------ docs/docs/docs/guides/standalone-usage.md | 6 - .../guides/usage-with-react-navigation.mdx | 6 - .../react-native-bottom-tabs/package.json | 9 +- .../react-native-bottom-tabs/src/Screen.tsx | 26 ---- .../react-native-bottom-tabs/src/TabView.tsx | 16 +-- .../react-native-bottom-tabs/src/types.ts | 1 - packages/react-navigation/src/types.ts | 9 -- .../src/views/NativeBottomTabView.tsx | 3 - yarn.lock | 5 - 13 files changed, 13 insertions(+), 202 deletions(-) create mode 100644 .changeset/funny-lamps-raise.md delete mode 100644 apps/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx delete mode 100644 packages/react-native-bottom-tabs/src/Screen.tsx diff --git a/.changeset/funny-lamps-raise.md b/.changeset/funny-lamps-raise.md new file mode 100644 index 0000000..2fd91dc --- /dev/null +++ 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 index 879f9d3..fd71fc1 100644 --- 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 index 8d6e56e..b724fb2 100644 --- 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 ; @@ -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 deleted file mode 100644 index b42439a..0000000 --- a/apps/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { Platform, StyleSheet, Text, View } from 'react-native'; -import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'; - -const store = new Set(); - -type Dispatch = (value: number) => void; - -function useValue() { - const [value, setValue] = React.useState(0); - - React.useEffect(() => { - const dispatch = (value: number) => { - setValue(value); - }; - store.add(dispatch); - return () => { - store.delete(dispatch); - }; - }, [setValue]); - - return value; -} - -function HomeScreen() { - return ( - - Home! - - ); -} - -function DetailsScreen(props: any) { - const value = useValue(); - const screenName = props?.route?.params?.screenName; - // only 1 'render' should appear at the time - console.log(`${Platform.OS} Details Screen render ${value} ${screenName}`); - return ( - - Details! - - Details Screen {value} {screenName ? screenName : ''}{' '} - - - ); -} -const Tab = createNativeBottomTabNavigator(); - -export default function NativeBottomTabsFreezeOnBlur() { - React.useEffect(() => { - let timer = 0; - const interval = setInterval(() => { - timer = timer + 1; - store.forEach((dispatch) => dispatch(timer)); - }, 3000); - return () => clearInterval(interval); - }, []); - - return ( - - require('../../assets/icons/article_dark.png'), - }} - /> - require('../../assets/icons/grid_dark.png'), - }} - /> - require('../../assets/icons/person_dark.png'), - }} - /> - require('../../assets/icons/chat_dark.png'), - }} - /> - - ); -} - -const styles = StyleSheet.create({ - screenContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, -}); diff --git a/docs/docs/docs/guides/standalone-usage.md b/docs/docs/docs/guides/standalone-usage.md index 97d0a9c..5f6fb1b 100644 --- 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 index 0bc8ea0..10f0dc8 100644 --- 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 index 4cbf9c1..311f21d 100644 --- 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 deleted file mode 100644 index 4e13793..0000000 --- a/packages/react-native-bottom-tabs/src/Screen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import type { StyleProp, ViewProps, ViewStyle } from 'react-native'; - -interface Props extends ViewProps { - visible: boolean; - children?: React.ReactNode; - freezeOnBlur?: boolean; - style?: StyleProp; - collapsable?: boolean; -} - -let Screens: typeof import('react-native-screens') | undefined; - -try { - Screens = require('react-native-screens'); -} catch (e) { - // Ignore -} - -export function Screen({ visible, ...rest }: Props) { - if (Screens?.screensEnabled()) { - return ; - } - return ; -} diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 72436d9..7f56420 100644 --- 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 { */ 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 = ({ 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 = ({ const focused = route.key === focusedKey; const opacity = focused ? 1 : 0; const zIndex = focused ? 0 : -1; - const freezeOnBlur = getFreezeOnBlur({ route }); return ( - ({ route, jumpTo, })} - + ); })} diff --git a/packages/react-native-bottom-tabs/src/types.ts b/packages/react-native-bottom-tabs/src/types.ts index 744af8d..5993a61 100644 --- 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 = { diff --git a/packages/react-navigation/src/types.ts b/packages/react-navigation/src/types.ts index 3209b44..eb1c3eb 100644 --- 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 index 8d2acab..8c633f4 100644 --- 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 index 5c2edd7..0e39e01 100644 --- 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