1 files changed, 19 insertions, 95 deletions
diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index 9e7d0c209..bcc2c42ad 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -1,100 +1,24 @@
-import * as React from 'react'
-import {
-  Dimensions,
-  NativeSyntheticEvent,
-  Platform,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
+import React from 'react'
 
-import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
+import {BottomSheetViewProps} from './BottomSheet.types'
+import {BottomSheetNativeComponent} from './BottomSheetNativeComponent'
+import {useBottomSheetPortal_INTERNAL} from './BottomSheetPortal'
 
-const screenHeight = Dimensions.get('screen').height
+export const BottomSheet = React.forwardRef<
+  BottomSheetNativeComponent,
+  BottomSheetViewProps
+>(function BottomSheet(props, ref) {
+  const Portal = useBottomSheetPortal_INTERNAL()
 
-const NativeView: React.ComponentType<
-  BottomSheetViewProps & {
-    ref: React.RefObject<any>
-    style: StyleProp<ViewStyle>
-  }
-> = requireNativeViewManager('BottomSheet')
-
-const NativeModule = requireNativeModule('BottomSheet')
-
-export class BottomSheet extends React.Component<
-  BottomSheetViewProps,
-  {
-    open: boolean
-  }
-> {
-  ref = React.createRef<any>()
-
-  constructor(props: BottomSheetViewProps) {
-    super(props)
-    this.state = {
-      open: false,
-    }
-  }
-
-  present() {
-    this.setState({open: true})
-  }
-
-  dismiss() {
-    this.ref.current?.dismiss()
-  }
-
-  private onStateChange = (
-    event: NativeSyntheticEvent<{state: BottomSheetState}>,
-  ) => {
-    const {state} = event.nativeEvent
-    const isOpen = state !== 'closed'
-    this.setState({open: isOpen})
-    this.props.onStateChange?.(event)
-  }
-
-  private updateLayout = () => {
-    this.ref.current?.updateLayout()
-  }
-
-  static dismissAll = async () => {
-    await NativeModule.dismissAll()
-  }
-
-  render() {
-    const {children, backgroundColor, ...rest} = this.props
-    const cornerRadius = rest.cornerRadius ?? 0
-
-    if (!this.state.open) {
-      return null
-    }
-
-    return (
-      <NativeView
-        {...rest}
-        onStateChange={this.onStateChange}
-        ref={this.ref}
-        style={{
-          position: 'absolute',
-          height: screenHeight,
-          width: '100%',
-        }}
-        containerBackgroundColor={backgroundColor}>
-        <View
-          style={[
-            {
-              flex: 1,
-              backgroundColor,
-            },
-            Platform.OS === 'android' && {
-              borderTopLeftRadius: cornerRadius,
-              borderTopRightRadius: cornerRadius,
-            },
-          ]}>
-          <View onLayout={this.updateLayout}>{children}</View>
-        </View>
-      </NativeView>
+  if (__DEV__ && !Portal) {
+    throw new Error(
+      'BottomSheet: You need to wrap your component tree with a <BottomSheetPortalProvider> to use the bottom sheet.',
     )
   }
-}
+
+  return (
+    <Portal>
+      <BottomSheetNativeComponent {...props} ref={ref} />
+    </Portal>
+  )
+})