@lodev09/react-native-true-sheet 0.2.1 → 0.3.0

package/src/TrueSheet.tsx

@@ -23,12 +23,12 @@ const ComponentName = 'TrueSheetView'
 
 interface TrueSheetNativeViewProps {
   scrollableHandle: number | null
+  style: StyleProp<ViewStyle>
+  sizes: TrueSheetProps['sizes']
+  children: ReactNode
   onDismiss: () => void
   onPresent: (event: NativeSyntheticEvent<{ index: number }>) => void
   onSizeChange: (event: NativeSyntheticEvent<SizeChangeEvent>) => void
-  children: ReactNode
-  style: StyleProp<ViewStyle>
-  sizes: TrueSheetProps['sizes']
 }
 
 const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(ComponentName)
@@ -71,7 +71,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     return nodeHandle
   }
 
-  private updateHandles() {
+  private updateState() {
     const scrollableHandle = this.props.scrollRef?.current
       ? findNodeHandle(this.props.scrollRef.current)
       : null
@@ -94,11 +94,17 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 
   componentDidMount(): void {
-    this.updateHandles()
+    if (this.props.sizes && this.props.sizes.length > 3) {
+      console.warn(
+        'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
+      )
+    }
+
+    this.updateState()
   }
 
   componentDidUpdate(): void {
-    this.updateHandles()
+    this.updateState()
   }
 
   /**
@@ -129,9 +135,14 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         onDismiss={this.onDismiss}
         onSizeChange={this.onSizeChange}
       >
-        <View style={{ backgroundColor: this.props.backgroundColor ?? 'white' }}>
-          <View style={this.props.style}>{this.props.children}</View>
-          <View>{!!FooterComponent && <FooterComponent />}</View>
+        <View
+          collapsable={false}
+          style={{ backgroundColor: this.props.backgroundColor ?? 'white' }}
+        >
+          <View collapsable={false} style={this.props.style}>
+            {this.props.children}
+          </View>
+          <View collapsable={false}>{!!FooterComponent && <FooterComponent />}</View>
         </View>
       </TrueSheetNativeView>
     )
@@ -140,5 +151,5 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
 const $nativeSheet: ViewStyle = {
   position: 'absolute',
-  zIndex: -99,
+  zIndex: -9999,
 }

package/src/TrueSheetModule.ts

@@ -6,8 +6,9 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n'
 
-export const TrueSheetModule = NativeModules.TrueSheetViewManager
-  ? NativeModules.TrueSheetViewManager
+// NativeModules automatically resolves 'TrueSheetView' to 'TrueSheetViewModule'
+export const TrueSheetModule = NativeModules.TrueSheetView
+  ? NativeModules.TrueSheetView
   : new Proxy(
       {},
       {

package/src/types.ts

@@ -66,17 +66,18 @@ export interface TrueSheetProps extends ViewProps {
   backgroundColor?: ColorValue
 
   /**
-   * The main scrollable ref that Sheet should handle.
+   * The main scrollable ref that Sheet should handle on IOS.
+   * @platform ios
    */
   scrollRef?: RefObject<Component<unknown>>
 
   /**
    * The sizes you want the Sheet to support.
-   * IMPORTANT! Sort them in ascending order
+   * Maximum of 3 sizes only; collapsed, half-expanded, expanded.
    *
    * Example:
    * ```ts
-   * size={['auto', 400, '80%', 'large']}
+   * size={['auto', '60%', 'large']}
    * ```
    *
    * @default ['medium', 'large']