Fix dark mode theming in bottom sheet components (a-ghorbani#97)

* fix: restore theme context in bottom sheet components * chore: build:android:release assembleRelease --> bundleRelease
cloudnepal · Nov 20, 2024 · 89dea86 · 89dea86
1 parent 8244a68
commit 89dea86
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "postinstall": "patch-package",
     "android": "react-native run-android",
     "build:android": "cd android && ./gradlew assembleDebug && cd ..",
-    "build:android:release": "cd android && ./gradlew assembleRelease && cd ..",
+    "build:android:release": "cd android && ./gradlew bundleRelease && cd ..",
     "ios": "react-native run-ios --simulator=\"iPhone 15 Pro\"",
     "ios:build": "cd ios && xcodebuild CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ -workspace PocketPal.xcworkspace -scheme PocketPal -configuration Debug -sdk iphonesimulator -arch $(uname -m) ONLY_ACTIVE_ARCH=YES GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO | xcpretty",
     "ios:build:release": "cd ios && xcodebuild CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ -workspace PocketPal.xcworkspace -scheme PocketPal -configuration Release -sdk iphoneos -arch arm64 -arch x86_64 GCC_OPTIMIZATION_LEVEL=s GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=space DEBUG_INFORMATION_FORMAT=dwarf-with-dsym COMPILER_INDEX_STORE_ENABLE=YES | xcpretty",

diff --git a/src/screens/ModelsScreen/HFModelSearch/HFModelSearch.tsx b/src/screens/ModelsScreen/HFModelSearch/HFModelSearch.tsx
@@ -2,13 +2,16 @@ import React, {useState, useCallback, useMemo, useRef, useEffect} from 'react';
 
 import {observer} from 'mobx-react';
 import debounce from 'lodash/debounce';
-import {Portal} from 'react-native-paper';
+import {Portal, PaperProvider} from 'react-native-paper';
 import {
   BottomSheetModal,
   BottomSheetBackdrop,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
 
+import {useTheme} from '../../../hooks';
+
+import {createStyles} from './styles';
 import {SearchView} from './SearchView';
 import {DetailsView} from './DetailsView';
 
@@ -96,6 +99,9 @@ export const HFModelSearch: React.FC<HFModelSearchProps> = observer(
       [],
     );
 
+    const theme = useTheme();
+    const styles = createStyles(theme);
+
     return (
       <Portal>
         <BottomSheetModal
@@ -105,15 +111,28 @@ export const HFModelSearch: React.FC<HFModelSearchProps> = observer(
           enableDynamicSizing={false}
           onDismiss={onDismiss}
           enablePanDownToClose
+          handleIndicatorStyle={styles.bottomSheetHandle}
+          backgroundStyle={styles.bottomSheetBackground}
           keyboardBehavior="extend"
           keyboardBlurBehavior="restore"
           android_keyboardInputMode="adjustResize"
           backdropComponent={renderBackdrop}>
-          <SearchView
-            testID="hf-model-search-view"
-            onModelSelect={handleModelSelect}
-            onChangeSearchQuery={handleSearchChange}
-          />
+          {/*
+            We need PaperProvider here because:
+            1. BottomSheetModal creates a new React portal/root that's outside
+               the main component tree
+            2. When content is portaled, it loses access to the context (including theme)
+               from the original component tree
+            3. By wrapping the bottom sheet content with PaperProvider, we restore
+               the theme context for all Paper components inside
+          */}
+          <PaperProvider theme={theme}>
+            <SearchView
+              testID="hf-model-search-view"
+              onModelSelect={handleModelSelect}
+              onChangeSearchQuery={handleSearchChange}
+            />
+          </PaperProvider>
         </BottomSheetModal>
 
         <BottomSheetModal
@@ -124,10 +143,15 @@ export const HFModelSearch: React.FC<HFModelSearchProps> = observer(
           onDismiss={() => setDetailsVisible(false)}
           enablePanDownToClose
           stackBehavior="push"
+          handleIndicatorStyle={styles.bottomSheetHandle}
+          backgroundStyle={styles.bottomSheetBackground}
           backdropComponent={renderBackdrop}>
-          <BottomSheetScrollView>
-            {selectedModel && <DetailsView hfModel={selectedModel} />}
-          </BottomSheetScrollView>
+          {/* PaperProvider is needed here to restore theme context. see the comment above. */}
+          <PaperProvider theme={theme}>
+            <BottomSheetScrollView>
+              {selectedModel && <DetailsView hfModel={selectedModel} />}
+            </BottomSheetScrollView>
+          </PaperProvider>
         </BottomSheetModal>
       </Portal>
     );

diff --git a/src/screens/ModelsScreen/HFModelSearch/styles.tsx b/src/screens/ModelsScreen/HFModelSearch/styles.tsx
@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+import {Theme} from '../../../utils/types';
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    // ... existing styles ...
+    bottomSheetHandle: {
+      backgroundColor: theme.colors.onSurface,
+      opacity: 0.5,
+    },
+    bottomSheetBackground: {
+      backgroundColor: theme.colors.background,
+    },
+  });