fix missing theme colors (#917)

Author: sieu-db

packages/core/src/components/BottomSheet/BottomSheet.tsx

@@ -10,7 +10,7 @@ import {
 import BottomSheetComponent, {
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
-import type { ReadTheme } from "@draftbit/theme";
+import { useTheme } from "@draftbit/theme";
 import { useDeepCompareMemo } from "../../utilities";
 
 type SnapPosition = "top" | "middle" | "bottom";
@@ -37,7 +37,6 @@ export interface BottomSheetProps extends ScrollViewProps {
   borderColor?: string;
   onSettle?: (index: number) => void;
   style?: StyleProp<ViewStyle>;
-  theme: ReadTheme;
 }
 
 // Clarification:
@@ -46,25 +45,25 @@ export interface BottomSheetProps extends ScrollViewProps {
 const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
   (
     {
-      theme,
       snapPoints: snapPointsProp,
       topSnapPosition = "10%",
       middleSnapPosition = "50%",
       bottomSnapPosition = "80%",
       initialSnapIndex,
       initialSnapPosition = "bottom",
       showHandle = true,
-      handleColor = theme.colors.border.brand,
+      handleColor,
       topBorderRadius = 20,
       borderWidth = 1,
-      borderColor = theme.colors.border.brand,
+      borderColor,
       onSettle,
       style,
       children,
       ...rest
     },
     ref
   ) => {
+    const theme = useTheme();
     const backgroundColor =
       (style as ViewStyle)?.backgroundColor || theme.colors.background.brand;
 
@@ -100,15 +99,15 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
             : getSnapIndexFromPosition(initialSnapPosition)
         }
         handleIndicatorStyle={[
-          { backgroundColor: handleColor },
+          { backgroundColor: handleColor ?? theme.colors.border.brand },
           !showHandle ? { display: "none" } : {},
         ]}
         backgroundStyle={{
           backgroundColor,
           borderTopLeftRadius: topBorderRadius,
           borderTopRightRadius: topBorderRadius,
           borderWidth,
-          borderColor,
+          borderColor: borderColor ?? theme.colors.border.brand,
         }}
         onChange={(index) => onSettle?.(mappedSnapPoints.length - index - 1)}
       >