@lodev09/react-native-true-sheet 2.0.5 → 4.0.0-beta.0

package/src/TrueSheet.types.ts

@@ -1,24 +1,52 @@
-import type { Component, ComponentType, ReactElement, RefObject } from 'react'
-import type {
-  ColorValue,
-  NativeSyntheticEvent,
-  StyleProp,
-  ViewProps,
-  ViewStyle,
-} from 'react-native'
-
-import type { TrueSheetGrabberProps } from './TrueSheetGrabber'
-
-export interface SizeInfo {
-  index: number
-  value: number
+import type { ComponentType, ReactElement } from 'react';
+import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
+
+import type { TrueSheetGrabberProps } from './TrueSheetGrabber';
+
+export interface DetentInfoEventPayload {
+  /**
+   * The index position from the provided `detents`.
+   */
+  index: number;
+  /**
+   * The Y position of the sheet relative to the screen.
+   */
+  position: number;
+}
+
+export interface PositionChangeEventPayload extends DetentInfoEventPayload {
+  /**
+   * Workaround for cases where we can't get real-time position from native.
+   * When true, manually animate the position in JS.
+   */
+  transitioning: boolean;
+}
+
+export type MountEvent = NativeSyntheticEvent<null>;
+export type DetentChangeEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
+export type WillPresentEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
+export type DidPresentEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
+export type WillDismissEvent = NativeSyntheticEvent<null>;
+export type DidDismissEvent = NativeSyntheticEvent<null>;
+export type DragBeginEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
+export type DragChangeEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
+export type DragEndEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
+export type PositionChangeEvent = NativeSyntheticEvent<PositionChangeEventPayload>;
+
+/**
+ * Internal event payload for size changes (not exposed to users)
+ * @internal
+ */
+export interface SizeChangeEventPayload {
+  width: number;
+  height: number;
 }
 
-export type SizeChangeEvent = NativeSyntheticEvent<SizeInfo>
-export type PresentEvent = NativeSyntheticEvent<SizeInfo>
-export type DragBeginEvent = NativeSyntheticEvent<SizeInfo>
-export type DragChangeEvent = NativeSyntheticEvent<SizeInfo>
-export type DragEndEvent = NativeSyntheticEvent<SizeInfo>
+/**
+ * Internal event type for size changes (not exposed to users)
+ * @internal
+ */
+export type SizeChangeEvent = NativeSyntheticEvent<SizeChangeEventPayload>;
 
 /**
  * Blur style mapped to native values in IOS.
@@ -46,17 +74,18 @@ export type BlurTint =
   | 'systemThinMaterialDark'
   | 'systemMaterialDark'
   | 'systemThickMaterialDark'
-  | 'systemChromeMaterialDark'
+  | 'systemChromeMaterialDark';
 
 /**
- * Supported Sheet size.
+ * Supported Sheet detent.
  *
  * @platform android
  * @platform ios 15+
  */
-export type SheetSize =
+export type SheetDetent =
   /**
-   * Auto resize based on content height
+   * Auto resize based on content height, clamped to container height.
+   * Use the `maxHeight` prop to set a custom limit.
    *
    * @platform android
    * @platform ios 16+
@@ -64,44 +93,13 @@ export type SheetSize =
   | 'auto'
 
   /**
-   * Fixed height
-   *
-   * @platform android
-   * @platform ios 16+
-   */
-  | number
-
-  /**
-   * Fixed height in %
+   * Relative height as a fraction (0-1) of the available height.
+   * For example, 0.5 represents 50% of the available height.
    *
    * @platform android
    * @platform ios 16+
    */
-  | `${number}%`
-
-  /**
-   * Translates to 25%
-   *
-   * @platform android
-   * @platform ios 16+
-   */
-  | 'small'
-
-  /**
-   * Translates to 50%
-   *
-   * @platform android
-   * @platform ios 15+
-   */
-  | 'medium'
-
-  /**
-   * Translates to 100%
-   *
-   * @platform android
-   * @platform ios 15+
-   */
-  | 'large'
+  | number;
 
 export interface TrueSheetProps extends ViewProps {
   /**
@@ -118,19 +116,19 @@ export interface TrueSheetProps extends ViewProps {
    * TrueSheet.present('my-awesome-sheet')
    * ```
    */
-  name?: string
+  name?: string;
   /**
-   * The sizes you want the Sheet to support.
-   * Maximum of 3 sizes only; collapsed, half-expanded, expanded.
+   * The detents you want the Sheet to support.
+   * Maximum of 3 detents only; collapsed, half-expanded, expanded.
    *
    * Example:
    * ```ts
-   * size={['auto', '60%', 'large']}
+   * detents={['auto', 0.6, 1]}
    * ```
    *
-   * @default ['medium', 'large']
+   * @default [0.5, 1]
    */
-  sizes?: SheetSize[]
+  detents?: SheetDetent[];
 
   /**
    * Specify whether the sheet background is dimmed.
@@ -140,53 +138,57 @@ export interface TrueSheetProps extends ViewProps {
    * @platform ios 15+
    * @default true
    */
-  dimmed?: boolean
+  dimmed?: boolean;
 
   /**
-   * Initially present the sheet, after mounting, at a given size index.
+   * Initially present the sheet, after mounting, at a given detent index.
    *
    * @note This property is only used during the initial mount.
    * @default -1
    */
-  initialIndex?: number
+  initialDetentIndex?: number;
 
   /**
    * Specify whether the sheet should animate after mounting.
-   * Used with `initialIndex`.
+   * Used with `initialDetentIndex`.
    *
    * @default true
    */
-  initialIndexAnimated?: boolean
+  initialDetentAnimated?: boolean;
 
   /**
-   * The size index that the sheet should start to dim the background.
+   * The detent index that the sheet should start to dim the background.
    * This is ignored if `dimmed` is set to `false`.
    *
    * @default 0
    */
-  dimmedIndex?: number
+  dimmedIndex?: number;
 
   /**
    * Prevents interactive dismissal of the Sheet.
    *
    * @default true
    */
-  dismissible?: boolean
+  dismissible?: boolean;
 
   /**
    * Main sheet background color.
 
    * @default white
    */
-  backgroundColor?: ColorValue
+  backgroundColor?: ColorValue;
 
   /**
    * The sheet corner radius.
    *
+   * - `undefined` (not provided): Uses system default corner radius
+   * - `0`: Sharp corners (no rounding)
+   * - `> 0`: Custom corner radius value
+   *
    * @platform android
    * @platform ios 15+
    */
-  cornerRadius?: number
+  cornerRadius?: number;
 
   /**
    * Shows native grabber (or handle) on IOS.
@@ -194,14 +196,14 @@ export interface TrueSheetProps extends ViewProps {
    * @platform ios
    * @default true
    */
-  grabber?: boolean
+  grabber?: boolean;
 
   /**
    * Grabber props to be used for android grabber or handle.
    *
    * @platform android
    */
-  grabberProps?: TrueSheetGrabberProps
+  grabberProps?: TrueSheetGrabberProps;
 
   /**
    * The blur effect style on iOS.
@@ -209,29 +211,27 @@ export interface TrueSheetProps extends ViewProps {
    *
    * @platform ios
    */
-  blurTint?: BlurTint
+  blurTint?: BlurTint;
 
   /**
-   * Optional content container styles.
+   * Overrides `large` or `100%` height.
+   * Also sets the maximum height for 'auto' detents.
    */
-  contentContainerStyle?: StyleProp<ViewStyle>
+  maxHeight?: number;
 
   /**
-   * The main scrollable ref that Sheet should handle on IOS.
+   * Allows the sheet to extend behind the status bar when fully expanded in edge-to-edge mode.
+   * When false (default), the sheet stops at the bottom of the status bar.
    *
-   * @platform ios
-   */
-  scrollRef?: RefObject<Component<unknown>>
-
-  /**
-   * Overrides `large` or `100%` height.
+   * @platform android
+   * @default false
    */
-  maxHeight?: number
+  edgeToEdgeFullScreen?: boolean;
 
   /**
    * A component that floats at the bottom of the Sheet.
    */
-  FooterComponent?: ComponentType<unknown> | ReactElement
+  footer?: ComponentType<unknown> | ReactElement;
 
   /**
    * Determines how the software keyboard will impact the layout of the sheet.
@@ -240,62 +240,75 @@ export interface TrueSheetProps extends ViewProps {
    * @platform android
    * @default resize
    */
-  keyboardMode?: 'resize' | 'pan'
+  keyboardMode?: 'resize' | 'pan';
 
   /**
-   * Supports edge-to-edge on Android.
-   * Turn this on if your app has it enabled.
-   *
-   * @platform android
+   * Called when the sheet's content is mounted and ready.
+   * The sheet automatically waits for this event before presenting.
    */
-  edgeToEdge?: boolean
+  onMount?: (event: MountEvent) => void;
 
   /**
-   * This is called when the sheet is ready to present.
+   * Called when the Sheet is about to be presented.
    */
-  onMount?: () => void
+  onWillPresent?: (event: WillPresentEvent) => void;
 
   /**
    * Called when the Sheet has been presented.
-   * Comes with the size info.
+   * Comes with the detent info.
    */
-  onPresent?: (event: PresentEvent) => void
+  onDidPresent?: (event: DidPresentEvent) => void;
+
+  /**
+   * Called when the Sheet is about to be dismissed
+   */
+  onWillDismiss?: (event: WillDismissEvent) => void;
 
   /**
    * Called when the Sheet has been dismissed
    */
-  onDismiss?: () => void
+  onDidDismiss?: (event: DidDismissEvent) => void;
 
   /**
-   * Called when the size of the sheet has changed.
+   * Called when the detent of the sheet has changed.
    * Either by dragging or programatically.
    */
-  onSizeChange?: (event: SizeChangeEvent) => void
+  onDetentChange?: (event: DetentChangeEvent) => void;
 
   /**
    * Called when the sheet has began dragging.
-   * Comes with the size info.
+   * Comes with the detent info.
    *
    * @platform android
    * @platform ios 15+
    */
-  onDragBegin?: (event: DragBeginEvent) => void
+  onDragBegin?: (event: DragBeginEvent) => void;
 
   /**
    * Called when the sheet is being dragged.
-   * Comes with the size info.
+   * Comes with the detent info.
    *
    * @platform android
    * @platform ios 15+
    */
-  onDragChange?: (event: DragChangeEvent) => void
+  onDragChange?: (event: DragChangeEvent) => void;
 
   /**
    * Called when the sheet dragging has ended.
-   * Comes with the size info.
+   * Comes with the detent info.
+   *
+   * @platform android
+   * @platform ios 15+
+   */
+  onDragEnd?: (event: DragEndEvent) => void;
+
+  /**
+   * Called when the sheet's position changes.
+   * This fires continuously during sheet position changes.
+   * Comes with the detent info.
    *
    * @platform android
    * @platform ios 15+
    */
-  onDragEnd?: (event: DragEndEvent) => void
+  onPositionChange?: (event: PositionChangeEvent) => void;
 }

package/src/TrueSheetGrabber.tsx

@@ -1,47 +1,47 @@
-import { View, type ColorValue, type ViewStyle, type StyleProp } from 'react-native'
+import { StyleSheet, View, type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
 
-const GRABBER_DEFAULT_HEIGHT = 4
-const GRABBER_DEFAULT_WIDTH = 32
+const GRABBER_DEFAULT_HEIGHT = 4;
+const GRABBER_DEFAULT_WIDTH = 32;
 
 // M3 spec: #49454F 0.4 alpha
-const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)'
+const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)';
 
 export interface TrueSheetGrabberProps {
   /**
    * Is grabber visible.
    * @default true
    */
-  visible?: boolean
+  visible?: boolean;
 
   /**
    * Optional style that overrides the default style.
    */
-  style?: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>;
 
   /**
    * Grabber color according to M3 specs.
    * @default rgba(73,69,79,0.4)
    */
-  color?: ColorValue
+  color?: ColorValue;
 
   /**
    * Grabber height according to M3 specs.
    * @default 4
    */
-  height?: number
+  height?: number;
 
   /**
    * Grabber top position offset.
    *
    * @default 6
    */
-  topOffset?: number
+  topOffset?: number;
 
   /**
    * Grabber width according to M3 specs.
    * @default 32
    */
-  width?: number
+  width?: number;
 }
 
 /**
@@ -56,26 +56,27 @@ export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
     height = GRABBER_DEFAULT_HEIGHT,
     topOffset = 0,
     style,
-  } = props
+  } = props;
 
-  if (!visible) return null
+  if (!visible) return null;
 
   return (
-    <View style={[$wrapper, style, { height: GRABBER_DEFAULT_HEIGHT * 4, top: topOffset }]}>
-      <View style={[$grabber, { height, width, backgroundColor: color }]} />
+    <View style={[styles.wrapper, style, { height: GRABBER_DEFAULT_HEIGHT * 4, top: topOffset }]}>
+      <View style={[styles.grabber, { height, width, backgroundColor: color }]} />
     </View>
-  )
-}
-
-const $wrapper: ViewStyle = {
-  position: 'absolute',
-  alignSelf: 'center',
-  paddingHorizontal: 12,
-  alignItems: 'center',
-  justifyContent: 'center',
-  zIndex: 9999,
-}
+  );
+};
 
-const $grabber: ViewStyle = {
-  borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
-}
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    alignSelf: 'center',
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999,
+  },
+  grabber: {
+    borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
+  },
+});

package/src/__mocks__/index.js

@@ -1,19 +1,67 @@
-import React from 'react'
-import { View } from 'react-native'
-
-export * from '../TrueSheetGrabber'
-export * from '../TrueSheetFooter'
+import React from 'react';
+import { View } from 'react-native';
 
+// Mock TrueSheet class component
 export class TrueSheet extends React.Component {
-  static dismiss = jest.fn()
-  static present = jest.fn()
-  static resize = jest.fn()
+  static instances = {};
+
+  // Static methods
+  static dismiss = jest.fn((name) => Promise.resolve());
+  static present = jest.fn((name, index = 0) => Promise.resolve());
+  static resize = jest.fn((name, index) => Promise.resolve());
+
+  // Instance methods
+  dismiss = jest.fn(() => Promise.resolve());
+  present = jest.fn((index = 0) => Promise.resolve());
+  resize = jest.fn((index) => Promise.resolve());
+
+  componentDidMount() {
+    const { name } = this.props;
+    if (name) {
+      TrueSheet.instances[name] = this;
+    }
+  }
 
-  dismiss = jest.fn()
-  present = jest.fn()
-  resize = jest.fn()
+  componentWillUnmount() {
+    const { name } = this.props;
+    if (name) {
+      delete TrueSheet.instances[name];
+    }
+  }
 
   render() {
-    return <View {...this.props} />
+    const { children, footer, style, ...rest } = this.props;
+    return (
+      <View style={style} {...rest}>
+        {children}
+        {footer}
+      </View>
+    );
   }
 }
+
+// Mock ReanimatedTrueSheet
+export class ReanimatedTrueSheet extends TrueSheet {
+  render() {
+    return <TrueSheet {...this.props} />;
+  }
+}
+
+// Mock TrueSheetGrabber
+export const TrueSheetGrabber = ({ style, ...props }) => (
+  <View style={style} {...props} testID="true-sheet-grabber" />
+);
+
+// Mock ReanimatedTrueSheetProvider
+export const ReanimatedTrueSheetProvider = ({ children }) => <>{children}</>;
+
+// Mock hooks
+export const useReanimatedTrueSheet = jest.fn(() => ({
+  animatedPosition: { value: 0 },
+  animatedIndex: { value: -1 },
+}));
+
+export const useReanimatedPositionChangeHandler = jest.fn((callback) => jest.fn());
+
+// Re-export types (these will be no-ops in JS but useful for TS consumers)
+export * from '../TrueSheet.types';

package/src/fabric/TrueSheetContainerViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  // No props needed - container accesses props from parent TrueSheetView
+}
+
+export default codegenNativeComponent<NativeProps>('TrueSheetContainerView', {});

package/src/fabric/TrueSheetContentViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  // No props needed - size will be controlled by parent
+}
+
+export default codegenNativeComponent<NativeProps>('TrueSheetContentView', {});

package/src/fabric/TrueSheetFooterViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  // Footer-specific props can be added here if needed
+}
+
+export default codegenNativeComponent<NativeProps>('TrueSheetFooterView', {});

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -0,0 +1,63 @@
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+  Float,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import { codegenNativeComponent } from 'react-native';
+
+export interface DetentInfoEventPayload {
+  index: Int32;
+  position: Double;
+}
+
+export interface PositionChangeEventPayload {
+  index: Int32;
+  position: Double;
+  transitioning: boolean;
+}
+
+export interface SizeChangeEventPayload {
+  width: Double;
+  height: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  // Array properties
+  detents?: ReadonlyArray<Float>;
+
+  // Number properties - use 0 as default to avoid nil insertion
+  maxHeight?: WithDefault<Double, 0>;
+  background?: WithDefault<Int32, 0>;
+  cornerRadius?: WithDefault<Double, -1>;
+  initialDetentIndex?: WithDefault<Int32, -1>;
+  dimmedIndex?: WithDefault<Int32, 0>;
+
+  // String properties - use empty string as default to avoid nil insertion
+  blurTint?: WithDefault<string, ''>;
+  keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
+
+  // Boolean properties - match defaults from TrueSheet.types.ts
+  grabber?: WithDefault<boolean, true>;
+  dismissible?: WithDefault<boolean, true>;
+  dimmed?: WithDefault<boolean, true>;
+  initialDetentAnimated?: WithDefault<boolean, true>;
+  edgeToEdgeFullScreen?: WithDefault<boolean, false>;
+
+  // Event handlers
+  onMount?: DirectEventHandler<null>;
+  onWillPresent?: DirectEventHandler<DetentInfoEventPayload>;
+  onDidPresent?: DirectEventHandler<DetentInfoEventPayload>;
+  onWillDismiss?: DirectEventHandler<null>;
+  onDidDismiss?: DirectEventHandler<null>;
+  onDetentChange?: DirectEventHandler<DetentInfoEventPayload>;
+  onDragBegin?: DirectEventHandler<DetentInfoEventPayload>;
+  onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
+  onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
+  onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
+  onSizeChange?: DirectEventHandler<SizeChangeEventPayload>;
+}
+
+export default codegenNativeComponent<NativeProps>('TrueSheetView');

package/src/index.ts

@@ -1,3 +1,4 @@
-export * from './TrueSheet'
-export * from './TrueSheet.types'
-export * from './TrueSheetGrabber'
+export * from './TrueSheet';
+export * from './TrueSheet.types';
+export * from './TrueSheetGrabber';
+export * from './reanimated';