feat: add grabberProps prop

Author: lodev09

README.md

@@ -54,7 +54,8 @@ return (
 
 ## Options
 
-Extended from `ViewProps`
+Props available for `TrueSheet`.
+Extends `ViewProps`
 
 | Prop | Type | Default | Description | 🍎 | 🤖 |
 | - | - | - | - | - | - |
@@ -66,6 +67,7 @@ Extended from `ViewProps`
 | FooterComponent | `ReactNode` | - | A component that floats at the bottom of the sheet. | ✅ | ✅ |
 | dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
 | grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
+| grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |
 | blurTint | [`BlurTint`](#blurTint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `light`, `dark`, etc. | ✅ | |
 | scrollRef | `RefObject<...>` | - | The main scrollable ref that Sheet should handle on iOS. | ✅ | |
 
@@ -131,18 +133,29 @@ return (
 
 | Value | Description | 🍎 | 🤖 |
 | - | - | - | - |
-| `"large"` | Translates to 100% | ✅ | ✅ |
-| `"medium"` | Translates to 50% | **_15+_** | ✅ |
 | `"auto"` | Auto resize based on content height. | **_16+_** | ✅ |
-| `"number"` | Fixed height | **_16+_** | ✅ |
-| `${number}%` | Fixed height in % | **_16+_** | ✅ |
 | `"small"` | Translates to 25% | **_16+_** | ✅ |
+| `"medium"` | Translates to 50% | **_15+_** | ✅ |
+| `"large"` | Translates to 100% | ✅ | ✅ |
+| `number` | Fixed height | **_16+_** | ✅ |
+| `${number}%` | Fixed height in % | **_16+_** | ✅ |
 
 > [!NOTE]
 > `auto` is not guaranteed to be accurate if your content depends on various rendering logic. Experiment with it and try to keep your content size as fixed as possible.
 >
 > Alternatively, you can programmatically call [`resize`](#methods) to adjust the sheet size on-the-fly.
 
+### `TrueSheetGrabberProps`
+
+Grabber props to be used for android grabber or handle.
+
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| visible | `boolean` | `true` | Is grabber visible. |
+| color | `ColorValue` | `"rgba(73,69,79,0.4)"` | Grabber color according to M3 specs. |
+| height | `DimensionValue` | `4` | Grabber height according to M3 specs. |
+| width | `DimensionValue` | `32` | Grabber width according to M3 specs. |
+
 ### `BlurTint`
 
 Blur tint that is mapped into native values in iOS.

src/TrueSheet.tsx

@@ -130,8 +130,9 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     const {
       sizes,
       backgroundColor = 'white',
-      grabber = true,
       dismissible = true,
+      grabber = true,
+      grabberProps,
       blurTint,
       cornerRadius,
       maxHeight,
@@ -179,7 +180,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
             {children}
           </View>
           <View collapsable={false}>{!!FooterComponent && <FooterComponent />}</View>
-          {Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} />}
+          {Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
         </View>
       </TrueSheetNativeView>
     )

src/TrueSheetGrabber.tsx

@@ -1,39 +1,52 @@
 import React from 'react'
-import { View, type ColorValue, type ViewProps, type ViewStyle } from 'react-native'
+import {
+  View,
+  type ColorValue,
+  type ViewStyle,
+  type DimensionValue,
+  type StyleProp,
+} from 'react-native'
 
 const GRABBER_WRAPPER_HEIGHT = 24
 const GRABBER_DEFAULT_HEIGHT = 4
 const GRABBER_DEFAULT_WIDTH = 32
-const GRABBER_DEFAULT_COLOR = '#49454F'
 
-export interface TrueSheetGrabberProps extends ViewProps {
+// M3 spec: #49454F 0.4 alpha
+const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)'
+
+export interface TrueSheetGrabberProps {
   /**
-   * Is grabber visible
+   * Is grabber visible.
    * @default true
    */
   visible?: boolean
 
   /**
-   * Grabber color according to M3 specs
-   * @default #49454F
+   * Optional style that overrides the default style.
+   */
+  style?: StyleProp<ViewStyle>
+
+  /**
+   * Grabber color according to M3 specs.
+   * @default rgba(73,69,79,0.4)
    */
   color?: ColorValue
 
   /**
-   * Grabber height according to M3 specs
+   * Grabber height according to M3 specs.
    * @default 4
    */
-  height?: number
+  height?: DimensionValue
 
   /**
-   * Grabber width according to M3 specs
+   * Grabber width according to M3 specs.
    * @default 32
    */
-  width?: number
+  width?: DimensionValue
 }
 
 /**
- * Little Grabber component.
+ * Grabber component.
  * Used by defualt for Android but feel free to re-use.
  */
 export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
@@ -43,14 +56,13 @@ export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
     width = GRABBER_DEFAULT_WIDTH,
     height = GRABBER_DEFAULT_HEIGHT,
     style,
-    ...rest
   } = props
 
   if (!visible) return null
 
   return (
     <View style={$wrapper}>
-      <View style={[$grabber, { height, width, backgroundColor: color }, style]} {...rest} />
+      <View style={[$grabber, { height, width, backgroundColor: color }, style]} />
     </View>
   )
 }
@@ -67,8 +79,6 @@ const $wrapper: ViewStyle = {
 }
 
 const $grabber: ViewStyle = {
-  // M3 spec for opacity
-  opacity: 0.4,
   borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
   top: 6,
 }

src/types.ts

@@ -1,5 +1,6 @@
 import type { Component, ComponentType, RefObject } from 'react'
 import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native'
+import type { TrueSheetGrabberProps } from './TrueSheetGrabber'
 
 export interface SizeInfo {
   index: number
@@ -126,13 +127,20 @@ export interface TrueSheetProps extends ViewProps {
   cornerRadius?: number
 
   /**
-   * Shows native grabber (or handle) on IOS
+   * Shows native grabber (or handle) on IOS.
    *
    * @platform ios
    * @default true
    */
   grabber?: boolean
 
+  /**
+   * Grabber props to be used for android grabber or handle.
+   *
+   * @platform android
+   */
+  grabberProps?: TrueSheetGrabberProps
+
   /**
    * The blur effect style on iOS.
    * Overrides `backgroundColor` if set.