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/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