@lodev09/react-native-true-sheet 3.0.0-beta.9 → 3.0.1

package/lib/typescript/src/fabric/TrueSheetViewNativeComponent.d.ts

@@ -1,16 +1,29 @@
 import type { ViewProps } from 'react-native';
-import type { DirectEventHandler, Double, Int32, WithDefault, Float } from 'react-native/Libraries/Types/CodegenTypes';
+import type { DirectEventHandler, Double, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+type GrabberOptionsType = Readonly<{
+    width?: Double;
+    height?: Double;
+    topMargin?: Double;
+    cornerRadius?: WithDefault<Double, -1>;
+    color?: Int32;
+}>;
+type BlurOptionsType = Readonly<{
+    intensity?: WithDefault<Double, -1>;
+    interaction?: WithDefault<boolean, true>;
+}>;
 export interface DetentInfoEventPayload {
     index: Int32;
     position: Double;
+    detent: Double;
 }
 export interface PositionChangeEventPayload {
-    index: Int32;
+    index: Double;
     position: Double;
-    transitioning: boolean;
+    detent: Double;
+    realtime: boolean;
 }
 export interface NativeProps extends ViewProps {
-    detents?: ReadonlyArray<Float>;
+    detents?: ReadonlyArray<Double>;
     maxHeight?: WithDefault<Double, 0>;
     background?: WithDefault<Int32, 0>;
     cornerRadius?: WithDefault<Double, -1>;
@@ -18,12 +31,15 @@ export interface NativeProps extends ViewProps {
     dimmedDetentIndex?: WithDefault<Int32, 0>;
     blurTint?: WithDefault<string, ''>;
     keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
+    blurOptions?: BlurOptionsType;
     grabber?: WithDefault<boolean, true>;
+    grabberOptions?: GrabberOptionsType;
     dismissible?: WithDefault<boolean, true>;
+    draggable?: WithDefault<boolean, true>;
     dimmed?: WithDefault<boolean, true>;
     initialDetentAnimated?: WithDefault<boolean, true>;
     edgeToEdgeFullScreen?: WithDefault<boolean, false>;
-    fitScrollView?: WithDefault<boolean, false>;
+    scrollable?: WithDefault<boolean, false>;
     pageSizing?: WithDefault<boolean, true>;
     onMount?: DirectEventHandler<null>;
     onWillPresent?: DirectEventHandler<DetentInfoEventPayload>;
@@ -35,6 +51,10 @@ export interface NativeProps extends ViewProps {
     onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
     onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
     onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
+    onWillFocus?: DirectEventHandler<null>;
+    onDidFocus?: DirectEventHandler<null>;
+    onWillBlur?: DirectEventHandler<null>;
+    onDidBlur?: DirectEventHandler<null>;
 }
 declare const _default: import("react-native").HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/src/fabric/TrueSheetViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrueSheetViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/TrueSheetViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACN,MAAM,2CAA2C,CAAC;AAGnD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAE5C,OAAO,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAG/B,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAG1C,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;IAGvD,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACnD,oBAAoB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAGxC,OAAO,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,aAAa,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IACzD,YAAY,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,0BAA0B,CAAC,CAAC;CACnE;;AAED,wBAEG"}
+{"version":3,"file":"TrueSheetViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/TrueSheetViewNativeComponent.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,4 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
-export * from './TrueSheetGrabber';
 export * from './reanimated';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}

package/lib/typescript/src/reanimated/ReanimatedTrueSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReanimatedTrueSheet.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/ReanimatedTrueSheet.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAuB,MAAM,oBAAoB,CAAC;AAgB9E,UAAU,wBAAyB,SAAQ,cAAc;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;CACvD;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,mBAAmB,gHAyB9B,CAAC"}
+{"version":3,"file":"ReanimatedTrueSheet.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/ReanimatedTrueSheet.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAuB,MAAM,oBAAoB,CAAC;AAgB9E,UAAU,wBAAyB,SAAQ,cAAc;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;CACvD;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,mBAAmB,gHA8B9B,CAAC"}

package/lib/typescript/src/reanimated/ReanimatedTrueSheetProvider.d.ts

@@ -2,13 +2,19 @@ import { type ReactNode } from 'react';
 import { type SharedValue } from 'react-native-reanimated';
 export interface ReanimatedTrueSheetContextValue {
     /**
-     * Shared value representing the current sheet position (Y offset from bottom)
+     * Shared value representing the current sheet position (Y offset from top of screen)
      */
     animatedPosition: SharedValue<number>;
     /**
-     * Shared value representing the current detent index
+     * Shared value representing the current detent index as a continuous float.
+     * Interpolates smoothly between -1 (off-screen) and the target detent index.
      */
     animatedIndex: SharedValue<number>;
+    /**
+     * Shared value representing the current detent value (0-1 fraction of screen height).
+     * Interpolates smoothly between detent values as the sheet is dragged.
+     */
+    animatedDetent: SharedValue<number>;
 }
 export interface ReanimatedTrueSheetProviderProps {
     children: ReactNode;

package/lib/typescript/src/reanimated/ReanimatedTrueSheetProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReanimatedTrueSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/ReanimatedTrueSheetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,+BAA+B;IAC9C;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACpC;AAID,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,2BAA2B,GAAI,cAAc,gCAAgC,4CAkBzF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,sBAAsB,QAAO,+BAWzC,CAAC"}
+{"version":3,"file":"ReanimatedTrueSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/ReanimatedTrueSheetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,+BAA+B;IAC9C;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC;;;OAGG;IACH,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC;;;OAGG;IACH,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACrC;AAID,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,2BAA2B,GAAI,cAAc,gCAAgC,4CAoBzF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,sBAAsB,QAAO,+BAWzC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.1",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -41,7 +41,7 @@
     "tidy": "yarn typecheck && yarn lint && yarn format && scripts/objclint.sh && scripts/ktlint.sh",
     "clean": "scripts/clean.sh",
     "prepare": "bob build",
-    "release": "yarn tidy && release-it --only-version",
+    "release": "release-it",
     "release:beta": "yarn release --preRelease=beta"
   },
   "keywords": [
@@ -152,6 +152,12 @@
     "npm": {
       "publish": true
     },
+    "hooks": {
+      "before:init": [
+        "yarn tidy",
+        "yarn test"
+      ]
+    },
     "github": {
       "release": true,
       "comments": {

package/src/TrueSheet.tsx

@@ -20,6 +20,10 @@ import type {
   DidDismissEvent,
   WillDismissEvent,
   MountEvent,
+  WillFocusEvent,
+  DidFocusEvent,
+  WillBlurEvent,
+  DidBlurEvent,
 } from './TrueSheet.types';
 import TrueSheetViewNativeComponent from './fabric/TrueSheetViewNativeComponent';
 import TrueSheetContainerViewNativeComponent from './fabric/TrueSheetContainerViewNativeComponent';
@@ -29,7 +33,7 @@ import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNati
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
 
-import { Platform, processColor, StyleSheet, findNodeHandle } from 'react-native';
+import { Platform, processColor, StyleSheet, findNodeHandle, View } from 'react-native';
 
 const LINKING_ERROR =
   `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` +
@@ -38,6 +42,9 @@ const LINKING_ERROR =
   '- You are not using Expo Go\n' +
   '- You are using the new architecture (Fabric)\n';
 
+// Material Design 3 minimum touch target
+const ANDROID_HITBOX_HEIGHT = 48;
+
 if (!TrueSheetModule) {
   throw new Error(LINKING_ERROR);
 }
@@ -88,6 +95,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.onDragChange = this.onDragChange.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
     this.onPositionChange = this.onPositionChange.bind(this);
+    this.onWillFocus = this.onWillFocus.bind(this);
+    this.onDidFocus = this.onDidFocus.bind(this);
+    this.onWillBlur = this.onWillBlur.bind(this);
+    this.onDidBlur = this.onDidBlur.bind(this);
   }
 
   private validateDetents(): void {
@@ -250,6 +261,22 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onPositionChange?.(event);
   }
 
+  private onWillFocus(event: WillFocusEvent): void {
+    this.props.onWillFocus?.(event);
+  }
+
+  private onDidFocus(event: DidFocusEvent): void {
+    this.props.onDidFocus?.(event);
+  }
+
+  private onWillBlur(event: WillBlurEvent): void {
+    this.props.onWillBlur?.(event);
+  }
+
+  private onDidBlur(event: DidBlurEvent): void {
+    this.props.onDidBlur?.(event);
+  }
+
   /**
    * Present the Sheet by `index` (Promise-based)
    * @param index - Detent index (default: 0)
@@ -313,23 +340,25 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       detents = [0.5, 1],
       backgroundColor,
       dismissible = true,
+      draggable = true,
       grabber = true,
+      grabberOptions,
       dimmed = true,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
       keyboardMode = 'resize',
       dimmedDetentIndex,
       blurTint,
+      blurOptions,
       cornerRadius,
       maxHeight,
       edgeToEdgeFullScreen,
-      fitScrollView = false,
+      scrollable = false,
       pageSizing = true,
       children,
       style,
       header,
       footer,
-      testID,
       ...rest
     } = this.props;
 
@@ -344,6 +373,18 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       return Math.min(1, detent);
     });
 
+    const containerStyle =
+      this.props.scrollable &&
+      Platform.select({
+        android: styles.scrollableAndroidContainer,
+      });
+
+    const contentStyle =
+      this.props.scrollable &&
+      Platform.select({
+        android: styles.scrollableAndroidContent,
+      });
+
     return (
       <TrueSheetViewNativeComponent
         {...rest}
@@ -351,18 +392,24 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         style={styles.sheetView}
         detents={resolvedDetents}
         blurTint={blurTint}
+        blurOptions={blurOptions}
         background={(processColor(backgroundColor) as number) ?? 0}
         cornerRadius={cornerRadius}
         grabber={grabber}
+        grabberOptions={{
+          ...grabberOptions,
+          color: (processColor(grabberOptions?.color) as number) ?? 0,
+        }}
         dimmed={dimmed}
         dimmedDetentIndex={dimmedDetentIndex}
         keyboardMode={keyboardMode}
         initialDetentIndex={initialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}
         dismissible={dismissible}
+        draggable={draggable}
         maxHeight={maxHeight}
         edgeToEdgeFullScreen={edgeToEdgeFullScreen}
-        fitScrollView={fitScrollView}
+        scrollable={scrollable}
         pageSizing={pageSizing}
         onMount={this.onMount}
         onWillPresent={this.onWillPresent}
@@ -374,22 +421,29 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         onDragChange={this.onDragChange}
         onDragEnd={this.onDragEnd}
         onPositionChange={this.onPositionChange}
+        onWillFocus={this.onWillFocus}
+        onDidFocus={this.onDidFocus}
+        onWillBlur={this.onWillBlur}
+        onDidBlur={this.onDidBlur}
       >
         {this.state.shouldRenderNativeView && (
-          <TrueSheetContainerViewNativeComponent testID={testID} collapsable={false}>
+          <TrueSheetContainerViewNativeComponent style={containerStyle}>
             {header && (
-              <TrueSheetHeaderViewNativeComponent collapsable={false}>
+              <TrueSheetHeaderViewNativeComponent>
                 {isValidElement(header) ? header : createElement(header)}
               </TrueSheetHeaderViewNativeComponent>
             )}
-            <TrueSheetContentViewNativeComponent style={style} collapsable={false}>
+            <TrueSheetContentViewNativeComponent style={[style, contentStyle]}>
               {children}
             </TrueSheetContentViewNativeComponent>
             {footer && (
-              <TrueSheetFooterViewNativeComponent style={styles.footer} collapsable={false}>
+              <TrueSheetFooterViewNativeComponent style={styles.footer}>
                 {isValidElement(footer) ? footer : createElement(footer)}
               </TrueSheetFooterViewNativeComponent>
             )}
+            {Platform.OS === 'android' && grabber && draggable && (
+              <View collapsable={false} style={styles.grabberHitbox} />
+            )}
           </TrueSheetContainerViewNativeComponent>
         )}
       </TrueSheetViewNativeComponent>
@@ -399,13 +453,36 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
 const styles = StyleSheet.create({
   sheetView: {
-    position: 'absolute',
-    width: '100%',
     zIndex: -9999,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+
+    // Android needs a fixed bottom to avoid jumping content
+    bottom: Platform.select({ android: 0 }),
+  },
+  scrollableAndroidContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  scrollableAndroidContent: {
+    flexGrow: 1,
+    flexBasis: 0,
   },
   footer: {
     position: 'absolute',
     left: 0,
     right: 0,
   },
+  grabberHitbox: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: ANDROID_HITBOX_HEIGHT,
+  },
 });

package/src/TrueSheet.types.ts

@@ -10,14 +10,18 @@ export interface DetentInfoEventPayload {
    * The Y position of the sheet relative to the screen.
    */
   position: number;
+  /**
+   * The detent value (0-1) for the current index.
+   */
+  detent: 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.
+   * Indicates whether the position value is real-time (e.g., during drag or animation tracking).
+   * When false, the position should be animated in JS.
    */
-  transitioning: boolean;
+  realtime: boolean;
 }
 
 export type MountEvent = NativeSyntheticEvent<null>;
@@ -30,6 +34,67 @@ export type DragBeginEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type DragChangeEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type DragEndEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type PositionChangeEvent = NativeSyntheticEvent<PositionChangeEventPayload>;
+export type DidFocusEvent = NativeSyntheticEvent<null>;
+export type DidBlurEvent = NativeSyntheticEvent<null>;
+export type WillFocusEvent = NativeSyntheticEvent<null>;
+export type WillBlurEvent = NativeSyntheticEvent<null>;
+
+/**
+ * Options for customizing the grabber (drag handle) appearance.
+ */
+export interface GrabberOptions {
+  /**
+   * The width of the grabber pill.
+   *
+   * @default iOS: 36, Android: 32
+   */
+  width?: number;
+  /**
+   * The height of the grabber pill.
+   *
+   * @default iOS: 5, Android: 4
+   */
+  height?: number;
+  /**
+   * The top margin of the grabber from the sheet edge.
+   *
+   * @default iOS: 5, Android: 16
+   */
+  topMargin?: number;
+  /**
+   * The corner radius of the grabber pill.
+   *
+   * @default height / 2
+   */
+  cornerRadius?: number;
+  /**
+   * The color of the grabber.
+   * Uses native vibrancy/material styling when not provided.
+   */
+  color?: ColorValue;
+}
+
+/**
+ * Options for customizing the blur effect.
+ * Only applies when `blurTint` is set.
+ *
+ * @platform ios
+ */
+export interface BlurOptions {
+  /**
+   * The intensity of the blur effect (0-100).
+   * Uses system default if not provided.
+   */
+  intensity?: number;
+  /**
+   * Enables or disables user interaction on the blur view.
+   * Disabling this can help with visual artifacts (flash) on iOS 18+
+   * when touching the sheet content with blur enabled.
+   *
+   * @default true
+   */
+  interaction?: boolean;
+}
 
 /**
  * Blur style mapped to native values in IOS.
@@ -152,6 +217,14 @@ export interface TrueSheetProps extends ViewProps {
    */
   dismissible?: boolean;
 
+  /**
+   * Enables or disables dragging the sheet to resize it.
+   * When disabled, the sheet becomes static and can only be resized programmatically.
+   *
+   * @default true
+   */
+  draggable?: boolean;
+
   /**
    * Main sheet background color.
    * Uses system default when not provided.
@@ -177,6 +250,12 @@ export interface TrueSheetProps extends ViewProps {
    */
   grabber?: boolean;
 
+  /**
+   * Options for customizing the grabber appearance.
+   * Only applies when `grabber` is `true`.
+   */
+  grabberOptions?: GrabberOptions;
+
   /**
    * Controls the sheet presentation style on iPad.
    * When enabled (true), uses a large page sheet for better readability.
@@ -195,6 +274,14 @@ export interface TrueSheetProps extends ViewProps {
    */
   blurTint?: BlurTint;
 
+  /**
+   * Options for customizing the blur effect.
+   * Only applies when `blurTint` is set.
+   *
+   * @platform ios
+   */
+  blurOptions?: BlurOptions;
+
   /**
    * Overrides `large` or `100%` height.
    * Also sets the maximum height for 'auto' detents.
@@ -222,14 +309,15 @@ export interface TrueSheetProps extends ViewProps {
   footer?: ComponentType<unknown> | ReactElement;
 
   /**
-   * Automatically pins ScrollView or FlatList to fit within the sheet's available space.
+   * On iOS, automatically pins ScrollView or FlatList to fit within the sheet's available space.
    * When enabled, the ScrollView's top edge will be pinned below any top sibling views,
    * and its left, right, and bottom edges will be pinned to the container.
    *
-   * @platform ios
+   * On Android, it adds additional style to the content for scrollable to work.
+   *
    * @default false
    */
-  fitScrollView?: boolean;
+  scrollable?: boolean;
 
   /**
    * Determines how the software keyboard will impact the layout of the sheet.
@@ -297,4 +385,24 @@ export interface TrueSheetProps extends ViewProps {
    * Comes with the detent info.
    */
   onPositionChange?: (event: PositionChangeEvent) => void;
+
+  /**
+   * Called when the sheet is about to regain focus because a sheet presented on top of it is being dismissed.
+   */
+  onWillFocus?: (event: WillFocusEvent) => void;
+
+  /**
+   * Called when the sheet regains focus after a sheet presented on top of it is dismissed.
+   */
+  onDidFocus?: (event: DidFocusEvent) => void;
+
+  /**
+   * Called when the sheet is about to lose focus because another sheet is being presented on top of it.
+   */
+  onWillBlur?: (event: WillBlurEvent) => void;
+
+  /**
+   * Called when the sheet loses focus because another sheet is presented on top of it.
+   */
+  onDidBlur?: (event: DidBlurEvent) => void;
 }

package/src/__mocks__/index.js

@@ -47,11 +47,6 @@ export class ReanimatedTrueSheet extends TrueSheet {
   }
 }
 
-// Mock TrueSheetGrabber
-export const TrueSheetGrabber = ({ style, ...props }) => (
-  <View style={style} {...props} testID="true-sheet-grabber" />
-);
-
 // Mock ReanimatedTrueSheetProvider
 export const ReanimatedTrueSheetProvider = ({ children }) => <>{children}</>;
 

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -4,24 +4,38 @@ import type {
   Double,
   Int32,
   WithDefault,
-  Float,
 } from 'react-native/Libraries/Types/CodegenTypes';
 import { codegenNativeComponent } from 'react-native';
 
+type GrabberOptionsType = Readonly<{
+  width?: Double;
+  height?: Double;
+  topMargin?: Double;
+  cornerRadius?: WithDefault<Double, -1>;
+  color?: Int32;
+}>;
+
+type BlurOptionsType = Readonly<{
+  intensity?: WithDefault<Double, -1>;
+  interaction?: WithDefault<boolean, true>;
+}>;
+
 export interface DetentInfoEventPayload {
   index: Int32;
   position: Double;
+  detent: Double;
 }
 
 export interface PositionChangeEventPayload {
-  index: Int32;
+  index: Double;
   position: Double;
-  transitioning: boolean;
+  detent: Double;
+  realtime: boolean;
 }
 
 export interface NativeProps extends ViewProps {
   // Array properties
-  detents?: ReadonlyArray<Float>;
+  detents?: ReadonlyArray<Double>;
 
   // Number properties - use 0 as default to avoid nil insertion
   maxHeight?: WithDefault<Double, 0>;
@@ -34,13 +48,18 @@ export interface NativeProps extends ViewProps {
   blurTint?: WithDefault<string, ''>;
   keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
 
+  // Blur options
+  blurOptions?: BlurOptionsType;
+
   // Boolean properties - match defaults from TrueSheet.types.ts
   grabber?: WithDefault<boolean, true>;
+  grabberOptions?: GrabberOptionsType;
   dismissible?: WithDefault<boolean, true>;
+  draggable?: WithDefault<boolean, true>;
   dimmed?: WithDefault<boolean, true>;
   initialDetentAnimated?: WithDefault<boolean, true>;
   edgeToEdgeFullScreen?: WithDefault<boolean, false>;
-  fitScrollView?: WithDefault<boolean, false>;
+  scrollable?: WithDefault<boolean, false>;
   pageSizing?: WithDefault<boolean, true>;
 
   // Event handlers
@@ -54,6 +73,10 @@ export interface NativeProps extends ViewProps {
   onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
   onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
   onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
+  onWillFocus?: DirectEventHandler<null>;
+  onDidFocus?: DirectEventHandler<null>;
+  onWillBlur?: DirectEventHandler<null>;
+  onDidBlur?: DirectEventHandler<null>;
 }
 
 export default codegenNativeComponent<NativeProps>('TrueSheetView', {

package/src/index.ts

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

package/src/reanimated/ReanimatedTrueSheet.tsx

@@ -70,24 +70,29 @@ const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
 export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
   const { onPositionChange, ...rest } = props;
 
-  const { animatedPosition, animatedIndex } = useReanimatedTrueSheet();
+  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet();
 
   const positionChangeHandler = useReanimatedPositionChangeHandler((payload) => {
     'worklet';
 
-    // When transitioning=true, we animate the position manually for smooth transitions.
-    // This is used when native can't provide real-time position updates during animations.
-    if (payload.transitioning) {
+    if (payload.realtime) {
+      // Update directly when we have real-time values (during drag or animation tracking)
+      animatedPosition.value = payload.position;
+      animatedIndex.value = payload.index;
+      animatedDetent.value = payload.detent;
+    } else {
+      // Animate position, index, and detent when not real-time
       if (Platform.OS === 'android') {
         animatedPosition.value = withTiming(payload.position, TIMING_CONFIG);
+        animatedIndex.value = withTiming(payload.index, TIMING_CONFIG);
+        animatedDetent.value = withTiming(payload.detent, TIMING_CONFIG);
       } else {
         animatedPosition.value = withSpring(payload.position, SPRING_CONFIG);
+        animatedIndex.value = withSpring(payload.index, SPRING_CONFIG);
+        animatedDetent.value = withSpring(payload.detent, SPRING_CONFIG);
       }
-    } else {
-      animatedPosition.value = payload.position;
     }
 
-    animatedIndex.value = payload.index;
     onPositionChange?.({ nativeEvent: payload } as PositionChangeEvent);
   });