49 - add ref support to withTheme HOC (#916)

* add ref support to withTheme HOC

* update bottomsheet

Author: sieu-db

example/src/BottomSheetExample.tsx

@@ -1,13 +1,47 @@
 import React from "react";
 import { Text, View } from "react-native";
 import { BottomSheet } from "@draftbit/ui";
+import { Button } from "@draftbit/core";
 
 const BottomSheetExample: React.FC = () => {
+  const bottomSheetRef = React.useRef<any>();
   return (
     <View style={{ flex: 1 }}>
-      <BottomSheet style={{ alignItems: "center" }}>
+      <BottomSheet style={{ alignItems: "center" }} ref={bottomSheetRef}>
         <Text>This is a bottom Sheet</Text>
       </BottomSheet>
+      <Button
+        title="Expand"
+        onPress={() => {
+          if (bottomSheetRef && bottomSheetRef?.current) {
+            bottomSheetRef?.current?.expand();
+          }
+        }}
+      />
+      <Button
+        title="Snap to index 2"
+        onPress={() => {
+          if (bottomSheetRef && bottomSheetRef?.current) {
+            bottomSheetRef?.current?.snapToIndex(2);
+          }
+        }}
+      />
+      <Button
+        title="Collapse"
+        onPress={() => {
+          if (bottomSheetRef && bottomSheetRef?.current) {
+            bottomSheetRef?.current?.collapse();
+          }
+        }}
+      />
+      <Button
+        title="Close"
+        onPress={() => {
+          if (bottomSheetRef && bottomSheetRef?.current) {
+            bottomSheetRef?.current?.close();
+          }
+        }}
+      />
     </View>
   );
 };

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

@@ -11,7 +11,6 @@ import BottomSheetComponent, {
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
 import type { ReadTheme } from "@draftbit/theme";
-import { withTheme } from "@draftbit/theme";
 import { useDeepCompareMemo } from "../../utilities";
 
 type SnapPosition = "top" | "middle" | "bottom";
@@ -166,4 +165,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withTheme(BottomSheet);
+export default BottomSheet;

packages/theme/src/Provider.tsx

@@ -117,11 +117,13 @@ const useChangeTheme = (): ((themeName: string) => void) => {
 
 const withTheme = <Props extends { theme: ReadTheme }>(
   Component: React.ComponentType<Props>
-): React.ComponentType<Omit<Props, "theme">> => {
-  return (props: Omit<Props, "theme">) => {
-    const { theme } = React.useContext(ThemeContext);
-    return <Component {...(props as Props)} theme={theme} />;
-  };
+) => {
+  return React.forwardRef(
+    (props: Omit<Props, "theme">, ref: React.Ref<any>) => {
+      const { theme } = React.useContext(ThemeContext);
+      return <Component {...(props as Props)} theme={theme} ref={ref} />;
+    }
+  );
 };
 
 export { Provider, useTheme, useChangeTheme, withTheme };