@lodev09/react-native-true-sheet 0.4.4 → 0.5.0

package/src/TrueSheet.tsx

@@ -7,10 +7,9 @@ import {
   type NativeMethods,
   type ViewStyle,
   type NativeSyntheticEvent,
-  type StyleProp,
 } from 'react-native'
 
-import type { TrueSheetProps, SizeChangeEvent } from './types'
+import type { TrueSheetProps, SizeInfo } from './types'
 import { TrueSheetModule } from './TrueSheetModule'
 
 const LINKING_ERROR =
@@ -21,15 +20,10 @@ const LINKING_ERROR =
 
 const ComponentName = 'TrueSheetView'
 
-interface TrueSheetNativeViewProps {
+interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange'> {
   scrollableHandle: number | null
-  style: StyleProp<ViewStyle>
-  sizes: TrueSheetProps['sizes']
-  maxHeight?: TrueSheetProps['maxHeight']
-  children: ReactNode
-  onDismiss: () => void
-  onPresent: (event: NativeSyntheticEvent<{ index: number }>) => void
-  onSizeChange: (event: NativeSyntheticEvent<SizeChangeEvent>) => void
+  onPresent: (event: NativeSyntheticEvent<SizeInfo>) => void
+  onSizeChange: (event: NativeSyntheticEvent<SizeInfo>) => void
 }
 
 const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(ComponentName)
@@ -82,12 +76,12 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     })
   }
 
-  private onSizeChange(event: NativeSyntheticEvent<SizeChangeEvent>) {
+  private onSizeChange(event: NativeSyntheticEvent<SizeInfo>) {
     this.props.onSizeChange?.(event.nativeEvent)
   }
 
-  private onPresent(): void {
-    this.props.onPresent?.()
+  private onPresent(event: NativeSyntheticEvent<SizeInfo>): void {
+    this.props.onPresent?.(event.nativeEvent)
   }
 
   private onDismiss(): void {
@@ -117,32 +111,61 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 
   /**
-   * Dismiss the Sheet
+   * Dismisses the Sheet
    */
   public async dismiss() {
     await TrueSheetModule.dismiss(this.handle)
   }
 
   render(): ReactNode {
-    const FooterComponent = this.props.FooterComponent
+    const {
+      sizes,
+      backgroundColor,
+      blurStyle,
+      cornerRadius,
+      grabber,
+      maxHeight,
+      FooterComponent,
+      testID,
+      style,
+      children,
+      ...rest
+    } = this.props
 
     return (
       <TrueSheetNativeView
         ref={this.ref}
         style={$nativeSheet}
         scrollableHandle={this.state.scrollableHandle}
-        sizes={this.props.sizes ?? ['medium', 'large']}
-        maxHeight={this.props.maxHeight}
+        sizes={sizes ?? ['medium', 'large']}
+        blurStyle={blurStyle}
+        cornerRadius={cornerRadius}
+        grabber={grabber ?? true}
+        maxHeight={maxHeight}
         onPresent={this.onPresent}
         onDismiss={this.onDismiss}
         onSizeChange={this.onSizeChange}
+        testID={testID}
       >
         <View
           collapsable={false}
-          style={{ backgroundColor: this.props.backgroundColor ?? 'white' }}
+          style={[
+            $sheetWrapper,
+            {
+              borderTopLeftRadius: cornerRadius,
+              borderTopRightRadius: cornerRadius,
+
+              // Remove backgroundColor if `blurStyle` is set on iOS
+              backgroundColor: Platform.select({
+                ios: blurStyle ? undefined : backgroundColor ?? 'white',
+                android: backgroundColor ?? 'white',
+              }),
+            },
+          ]}
+          {...rest}
         >
-          <View collapsable={false} style={this.props.style}>
-            {this.props.children}
+          <View collapsable={false} style={style}>
+            {children}
           </View>
           <View collapsable={false}>{!!FooterComponent && <FooterComponent />}</View>
         </View>
@@ -153,5 +176,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
 const $nativeSheet: ViewStyle = {
   position: 'absolute',
+  width: 0,
   zIndex: -9999,
 }
+
+const $sheetWrapper: ViewStyle = {
+  overflow: 'hidden',
+}

package/src/__mocks__/{TrueSheet.js → index.js}

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View } from 'react-native'
 
-export default class TrueSheet extends React.Component {
+export class TrueSheet extends React.Component {
   dismiss = jest.fn()
   present = jest.fn()
 

package/src/types.ts

@@ -1,14 +1,44 @@
 import type { Component, ComponentType, RefObject } from 'react'
 import type { ColorValue, ViewProps } from 'react-native'
 
-export interface SizeChangeEvent {
+export interface SizeInfo {
   index: number
   value: number
 }
 
+/**
+ * Blur style mapped to native values in IOS.
+ *
+ * @platform ios
+ */
+export type BlurStyle =
+  | 'light'
+  | 'dark'
+  | 'default'
+  | 'extraLight'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark'
+
 /**
  * Supported Sheet size.
- * Requires IOS 15+
+ *
+ * @platform android
+ * @platform ios 15+
  */
 export type SheetSize =
   /**
@@ -60,29 +90,54 @@ export type SheetSize =
   | 'large'
 
 export interface TrueSheetProps extends ViewProps {
+  /**
+   * The sizes you want the Sheet to support.
+   * Maximum of 3 sizes only; collapsed, half-expanded, expanded.
+   *
+   * Example:
+   * ```ts
+   * size={['auto', '60%', 'large']}
+   * ```
+   *
+   * @default ['medium', 'large']
+   */
+  sizes?: SheetSize[]
+
   /**
    * Main sheet background color
    */
   backgroundColor?: ColorValue
 
   /**
-   * The main scrollable ref that Sheet should handle on IOS.
+   * The sheet corner radius.
+   *
+   * @platform android
+   * @platform ios 15+
+   */
+  cornerRadius?: number
+
+  /**
+   * Shows native grabber (or handle) on IOS
+   *
    * @platform ios
+   * @default true
    */
-  scrollRef?: RefObject<Component<unknown>>
+  grabber?: boolean
 
   /**
-   * The sizes you want the Sheet to support.
-   * Maximum of 3 sizes only; collapsed, half-expanded, expanded.
+   * The blur effect style on iOS.
+   * Overrides `backgroundColor` if set.
    *
-   * Example:
-   * ```ts
-   * size={['auto', '60%', 'large']}
-   * ```
+   * @platform ios
+   */
+  blurStyle?: BlurStyle
+
+  /**
+   * The main scrollable ref that Sheet should handle on IOS.
    *
-   * @default ['medium', 'large']
+   * @platform ios
    */
-  sizes?: SheetSize[]
+  scrollRef?: RefObject<Component<unknown>>
 
   /**
    * Overrides `large` or `100%` height.
@@ -96,9 +151,9 @@ export interface TrueSheetProps extends ViewProps {
 
   /**
    * Called when the Sheet has been presented.
-   * Comes with the size index.
+   * Comes with the size info.
    */
-  onPresent?: () => void
+  onPresent?: (info: SizeInfo) => void
 
   /**
    * Called when the Sheet has been dismissed
@@ -109,5 +164,5 @@ export interface TrueSheetProps extends ViewProps {
    * Called when the size of the sheet has changed.
    * Either by dragging or programatically.
    */
-  onSizeChange?: (event: SizeChangeEvent) => void
+  onSizeChange?: (info: SizeInfo) => void
 }

package/lib/commonjs/__mocks__/TrueSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","TrueSheet","React","Component","dismiss","jest","fn","present","render","createElement","View","props","exports"],"sourceRoot":"../../../src","sources":["__mocks__/TrueSheet.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAmC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpB,MAAMG,SAAS,SAASC,cAAK,CAACC,SAAS,CAAC;EACrDC,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EAEnBE,MAAMA,CAAA,EAAG;IACP,oBAAOd,MAAA,CAAAM,OAAA,CAAAS,aAAA,CAACZ,YAAA,CAAAa,IAAI,EAAK,IAAI,CAACC,KAAQ,CAAC;EACjC;AACF;AAACC,OAAA,CAAAZ,OAAA,GAAAC,SAAA","ignoreList":[]}

package/lib/module/__mocks__/TrueSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","TrueSheet","Component","dismiss","jest","fn","present","render","createElement","props"],"sourceRoot":"../../../src","sources":["__mocks__/TrueSheet.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,eAAe,MAAMC,SAAS,SAASF,KAAK,CAACG,SAAS,CAAC;EACrDC,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EAEnBE,MAAMA,CAAA,EAAG;IACP,oBAAOR,KAAA,CAAAS,aAAA,CAACR,IAAI,EAAK,IAAI,CAACS,KAAQ,CAAC;EACjC;AACF","ignoreList":[]}