From 535990589d54671de9a41a3d67a0223229313ed5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwas=CC=81niewski?= Date: Thu, 14 Nov 2024 15:28:38 +0100 Subject: [PATCH 1/2] feat: native tabs --- packages/host/ios/Podfile | 3 + packages/host/ios/Podfile.lock | 69 ++++++++++++++++++- packages/host/package.json | 3 +- .../host/src/navigation/TabsNavigator.tsx | 10 +-- pnpm-lock.yaml | 29 ++++++++ 5 files changed, 107 insertions(+), 7 deletions(-) diff --git a/packages/host/ios/Podfile b/packages/host/ios/Podfile index d9d26ed..c6d0133 100644 --- a/packages/host/ios/Podfile +++ b/packages/host/ios/Podfile @@ -17,6 +17,9 @@ target 'host' do :app_path => "#{Pod::Config.instance.installation_root}/.." ) + pod 'SDWebImage', :modular_headers => true + pod 'SDWebImageSVGCoder', :modular_headers => true + target 'hostTests' do inherit! :complete # Pods for testing diff --git a/packages/host/ios/Podfile.lock b/packages/host/ios/Podfile.lock index ceed052..a703a78 100644 --- a/packages/host/ios/Podfile.lock +++ b/packages/host/ios/Podfile.lock @@ -1266,6 +1266,55 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - react-native-bottom-tabs (0.5.2): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - react-native-bottom-tabs/common (= 0.5.2) + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - SDWebImage (>= 5.19.1) + - SDWebImageSVGCoder (>= 1.7.0) + - SwiftUIIntrospect (~> 1.0) + - Yoga + - react-native-bottom-tabs/common (0.5.2): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - SDWebImage (>= 5.19.1) + - SDWebImageSVGCoder (>= 1.7.0) + - SwiftUIIntrospect (~> 1.0) + - Yoga - react-native-safe-area-context (4.12.0): - DoubleConversion - glog @@ -1707,7 +1756,13 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - SDWebImage (5.20.0): + - SDWebImage/Core (= 5.20.0) + - SDWebImage/Core (5.20.0) + - SDWebImageSVGCoder (1.7.0): + - SDWebImage/Core (~> 5.6) - SocketRocket (0.7.1) + - SwiftUIIntrospect (1.3.0) - SwiftyRSA (1.7.0): - SwiftyRSA/ObjC (= 1.7.0) - SwiftyRSA/ObjC (1.7.0) @@ -1752,6 +1807,7 @@ DEPENDENCIES: - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`) + - react-native-bottom-tabs (from `../node_modules/react-native-bottom-tabs`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-nativeconfig (from `../node_modules/react-native/ReactCommon`) - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) @@ -1784,12 +1840,17 @@ DEPENDENCIES: - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" - RNScreens (from `../node_modules/react-native-screens`) - RNVectorIcons (from `../node_modules/react-native-vector-icons`) + - SDWebImage + - SDWebImageSVGCoder - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: trunk: - JWTDecode + - SDWebImage + - SDWebImageSVGCoder - SocketRocket + - SwiftUIIntrospect - SwiftyRSA EXTERNAL SOURCES: @@ -1866,6 +1927,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" React-microtasksnativemodule: :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks" + react-native-bottom-tabs: + :path: "../node_modules/react-native-bottom-tabs" react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" React-nativeconfig: @@ -1971,6 +2034,7 @@ SPEC CHECKSUMS: React-logger: 97c9dafae1f1a638001a9d1d0e93d431f2f9cb7b React-Mapbuffer: 3146a13424f9fec2ea1f1462d49d566e4d69b732 React-microtasksnativemodule: 02d218c79c72d373a92a8552183f4ead0d1c6e05 + react-native-bottom-tabs: e1a13267a8c4584d6a96bc732f8e9b93fe6dfa2d react-native-safe-area-context: 458f6b948437afcb59198016b26bbd02ff9c3b47 React-nativeconfig: 93fe8c85a8c40820c57814e30f3e44b94c995a7b React-NativeModulesApple: b3e076fd0d7b73417fe1e8c8b26e3c57ae9b74aa @@ -2003,10 +2067,13 @@ SPEC CHECKSUMS: RNCAsyncStorage: 597673c6086d359029afefef8fd5859f1f35ab87 RNScreens: e389d6a6a66a4f0d3662924ecae803073ccce8ec RNVectorIcons: 07792a9538e8577c1263fcad187712e90d65d8fb + SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8 + SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 + SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6 Yoga: 157bed1c62656587df4639d4dc29714898f8fb10 -PODFILE CHECKSUM: 1eb29827633ed97ecc85d01956159c426f755d22 +PODFILE CHECKSUM: 2b24fa302810c2cc12b0fc718c30582aea935b12 COCOAPODS: 1.15.2 diff --git a/packages/host/package.json b/packages/host/package.json index 21f7086..c089b97 100644 --- a/packages/host/package.json +++ b/packages/host/package.json @@ -27,7 +27,8 @@ "react-native-paper": "5.12.5", "react-native-safe-area-context": "4.12.0", "react-native-screens": "3.35.0", - "react-native-vector-icons": "10.2.0" + "react-native-vector-icons": "10.2.0", + "react-native-bottom-tabs": "0.5.2" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/packages/host/src/navigation/TabsNavigator.tsx b/packages/host/src/navigation/TabsNavigator.tsx index 4504e2e..a61b707 100644 --- a/packages/host/src/navigation/TabsNavigator.tsx +++ b/packages/host/src/navigation/TabsNavigator.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {createMaterialBottomTabNavigator} from 'react-native-paper/react-navigation'; +import {createNativeBottomTabNavigator} from 'react-native-bottom-tabs/react-navigation'; import HomeNavigator from './HomeNavigator'; import ServicesNavigator from './ServicesNavigator'; import AccountNavigator from './AccountNavigator'; @@ -10,7 +10,7 @@ export type TabsParamList = { AccountNavigator: undefined; }; -const Tabs = createMaterialBottomTabNavigator(); +const Tabs = createNativeBottomTabNavigator(); const TabsNavigator = () => { return ( @@ -20,7 +20,7 @@ const TabsNavigator = () => { component={HomeNavigator} options={{ title: 'Home', - tabBarIcon: 'home', + tabBarIcon: () => ({ sfSymbol: 'book' }), }} /> { component={ServicesNavigator} options={{ title: 'Services', - tabBarIcon: 'apps', + tabBarIcon: () => ({ sfSymbol: 'book' }), }} /> { component={AccountNavigator} options={{ title: 'Account', - tabBarIcon: 'account', + tabBarIcon: () => ({ sfSymbol: 'book' }), }} /> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19fb2d2..793a49d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -408,6 +408,9 @@ importers: react-native-bootsplash: specifier: 6.2.6 version: 6.2.6(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1) + react-native-bottom-tabs: + specifier: 0.5.2 + version: 0.5.2(@react-navigation/native@6.1.18(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1))(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1) react-native-paper: specifier: 5.12.5 version: 5.12.5(patch_hash=y63saubgvw44zriplyaexrq2dy)(react-native-safe-area-context@4.12.0(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1))(react-native-vector-icons@10.2.0)(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1) @@ -4619,6 +4622,16 @@ packages: react: '>=18.1.0' react-native: '>=0.70.0' + react-native-bottom-tabs@0.5.2: + resolution: {integrity: sha512-vQILvr1EVOkled1oxJitZKF0ep0NV/+h0UaSjqFLN2vScMVNKEuayAfgfTRH+U8vDXJmq8x/BmFUC7JvvtVFYQ==} + peerDependencies: + '@react-navigation/native': '>=6' + react: '*' + react-native: '*' + peerDependenciesMeta: + '@react-navigation/native': + optional: true + react-native-calendars@1.1291.1: resolution: {integrity: sha512-L2MK2t3kbnDg2RoU12UAoQyNrUpDYdj2MyIfg13YrwVb8BuI/gc0q/VpEinY3iz5ETHiFsTLkCsAFwSj7xbZWw==} @@ -4913,6 +4926,10 @@ packages: setprototypeof@1.2.0: resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} + sf-symbols-typescript@2.0.0: + resolution: {integrity: sha512-Fc8Uhhl2plqXMw7GQ8q83t/zj1xhNCJvteDNJUDULaH/4a/Eqw5aW1UYEznyEIgkokw7QYXuQ9hOw8jhBLXL0A==} + engines: {node: '>=10'} + shallow-clone@3.0.1: resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==} engines: {node: '>=8'} @@ -10711,6 +10728,16 @@ snapshots: transitivePeerDependencies: - supports-color + react-native-bottom-tabs@0.5.2(@react-navigation/native@6.1.18(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1))(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1): + dependencies: + color: 4.2.3 + react: 18.3.1 + react-native: 0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1) + sf-symbols-typescript: 2.0.0 + use-latest-callback: 0.2.1(react@18.3.1) + optionalDependencies: + '@react-navigation/native': 6.1.18(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1) + react-native-calendars@1.1291.1(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@react-native-community/cli-server-api@15.0.0)(@types/react@18.2.27)(encoding@0.1.13)(react@18.3.1))(react@18.3.1): dependencies: hoist-non-react-statics: 3.3.2 @@ -11091,6 +11118,8 @@ snapshots: setprototypeof@1.2.0: {} + sf-symbols-typescript@2.0.0: {} + shallow-clone@3.0.1: dependencies: kind-of: 6.0.3 From bf70dc743e8097b9cf98cbbd25ef9e6d5d565ff8 Mon Sep 17 00:00:00 2001 From: Mikita Kliushun Date: Mon, 18 Nov 2024 14:25:41 +0100 Subject: [PATCH 2/2] chore: update rspack config to fix rn-bottom-tabs import --- packages/host/rspack.config.mjs | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/host/rspack.config.mjs b/packages/host/rspack.config.mjs index 919c372..20e3666 100644 --- a/packages/host/rspack.config.mjs +++ b/packages/host/rspack.config.mjs @@ -66,9 +66,15 @@ export default env => { * dependency. You might need it when using workspaces/monorepos or unconventional project * structure. For simple/typical project you won't need it. */ - // alias: { - // 'react-native': reactNativePath, - // }, + alias: { + // 'react-native': reactNativePath, + 'react-native-bottom-tabs$': + path.dirname(resolve('react-native-bottom-tabs/package.json')) + + '/src', + 'react-native-bottom-tabs/react-navigation': + path.dirname(resolve('react-native-bottom-tabs/package.json')) + + '/src/react-navigation', + }, }, /** * Configures output. @@ -126,7 +132,7 @@ export default env => { }, }, /** Run React Native codegen, required for utilizing new architecture */ - Repack.REACT_NATIVE_CODEGEN_RULES, + // Repack.REACT_NATIVE_CODEGEN_RULES, /** * This loader handles all static assets (images, video, audio and others), so that you can * use (reference) them inside your application.