Skip to content

Commit 8cd00b5

Browse files
committed
feat: add grabberProps prop
1 parent 6ef1a4f commit 8cd00b5

File tree

4 files changed

+55
-23
lines changed

4 files changed

+55
-23
lines changed

README.md

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ return (
5454

5555
## Options
5656

57-
Extended from `ViewProps`
57+
Props available for `TrueSheet`.
58+
Extends `ViewProps`
5859

5960
| Prop | Type | Default | Description | 🍎 | 🤖 |
6061
| - | - | - | - | - | - |
@@ -66,6 +67,7 @@ Extended from `ViewProps`
6667
| FooterComponent | `ReactNode` | - | A component that floats at the bottom of the sheet. | ✅ | ✅ |
6768
| dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
6869
| grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
70+
| grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |
6971
| blurTint | [`BlurTint`](#blurTint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `light`, `dark`, etc. | ✅ | |
7072
| scrollRef | `RefObject<...>` | - | The main scrollable ref that Sheet should handle on iOS. | ✅ | |
7173
@@ -131,18 +133,29 @@ return (
131133

132134
| Value | Description | 🍎 | 🤖 |
133135
| - | - | - | - |
134-
| `"large"` | Translates to 100% | ✅ | ✅ |
135-
| `"medium"` | Translates to 50% | **_15+_** | ✅ |
136136
| `"auto"` | Auto resize based on content height. | **_16+_** | ✅ |
137-
| `"number"` | Fixed height | **_16+_** | ✅ |
138-
| `${number}%` | Fixed height in % | **_16+_** | ✅ |
139137
| `"small"` | Translates to 25% | **_16+_** | ✅ |
138+
| `"medium"` | Translates to 50% | **_15+_** | ✅ |
139+
| `"large"` | Translates to 100% | ✅ | ✅ |
140+
| `number` | Fixed height | **_16+_** | ✅ |
141+
| `${number}%` | Fixed height in % | **_16+_** | ✅ |
140142
141143
> [!NOTE]
142144
> `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.
143145
>
144146
> Alternatively, you can programmatically call [`resize`](#methods) to adjust the sheet size on-the-fly.
145147
148+
### `TrueSheetGrabberProps`
149+
150+
Grabber props to be used for android grabber or handle.
151+
152+
| Prop | Type | Default | Description |
153+
| - | - | - | - |
154+
| visible | `boolean` | `true` | Is grabber visible. |
155+
| color | `ColorValue` | `"rgba(73,69,79,0.4)"` | Grabber color according to M3 specs. |
156+
| height | `DimensionValue` | `4` | Grabber height according to M3 specs. |
157+
| width | `DimensionValue` | `32` | Grabber width according to M3 specs. |
158+
146159
### `BlurTint`
147160
148161
Blur tint that is mapped into native values in iOS.

src/TrueSheet.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,9 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
130130
const {
131131
sizes,
132132
backgroundColor = 'white',
133-
grabber = true,
134133
dismissible = true,
134+
grabber = true,
135+
grabberProps,
135136
blurTint,
136137
cornerRadius,
137138
maxHeight,
@@ -179,7 +180,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
179180
{children}
180181
</View>
181182
<View collapsable={false}>{!!FooterComponent && <FooterComponent />}</View>
182-
{Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} />}
183+
{Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
183184
</View>
184185
</TrueSheetNativeView>
185186
)

src/TrueSheetGrabber.tsx

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,52 @@
11
import React from 'react'
2-
import { View, type ColorValue, type ViewProps, type ViewStyle } from 'react-native'
2+
import {
3+
View,
4+
type ColorValue,
5+
type ViewStyle,
6+
type DimensionValue,
7+
type StyleProp,
8+
} from 'react-native'
39

410
const GRABBER_WRAPPER_HEIGHT = 24
511
const GRABBER_DEFAULT_HEIGHT = 4
612
const GRABBER_DEFAULT_WIDTH = 32
7-
const GRABBER_DEFAULT_COLOR = '#49454F'
813

9-
export interface TrueSheetGrabberProps extends ViewProps {
14+
// M3 spec: #49454F 0.4 alpha
15+
const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)'
16+
17+
export interface TrueSheetGrabberProps {
1018
/**
11-
* Is grabber visible
19+
* Is grabber visible.
1220
* @default true
1321
*/
1422
visible?: boolean
1523

1624
/**
17-
* Grabber color according to M3 specs
18-
* @default #49454F
25+
* Optional style that overrides the default style.
26+
*/
27+
style?: StyleProp<ViewStyle>
28+
29+
/**
30+
* Grabber color according to M3 specs.
31+
* @default rgba(73,69,79,0.4)
1932
*/
2033
color?: ColorValue
2134

2235
/**
23-
* Grabber height according to M3 specs
36+
* Grabber height according to M3 specs.
2437
* @default 4
2538
*/
26-
height?: number
39+
height?: DimensionValue
2740

2841
/**
29-
* Grabber width according to M3 specs
42+
* Grabber width according to M3 specs.
3043
* @default 32
3144
*/
32-
width?: number
45+
width?: DimensionValue
3346
}
3447

3548
/**
36-
* Little Grabber component.
49+
* Grabber component.
3750
* Used by defualt for Android but feel free to re-use.
3851
*/
3952
export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
@@ -43,14 +56,13 @@ export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
4356
width = GRABBER_DEFAULT_WIDTH,
4457
height = GRABBER_DEFAULT_HEIGHT,
4558
style,
46-
...rest
4759
} = props
4860

4961
if (!visible) return null
5062

5163
return (
5264
<View style={$wrapper}>
53-
<View style={[$grabber, { height, width, backgroundColor: color }, style]} {...rest} />
65+
<View style={[$grabber, { height, width, backgroundColor: color }, style]} />
5466
</View>
5567
)
5668
}
@@ -67,8 +79,6 @@ const $wrapper: ViewStyle = {
6779
}
6880

6981
const $grabber: ViewStyle = {
70-
// M3 spec for opacity
71-
opacity: 0.4,
7282
borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
7383
top: 6,
7484
}

src/types.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Component, ComponentType, RefObject } from 'react'
22
import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native'
3+
import type { TrueSheetGrabberProps } from './TrueSheetGrabber'
34

45
export interface SizeInfo {
56
index: number
@@ -126,13 +127,20 @@ export interface TrueSheetProps extends ViewProps {
126127
cornerRadius?: number
127128

128129
/**
129-
* Shows native grabber (or handle) on IOS
130+
* Shows native grabber (or handle) on IOS.
130131
*
131132
* @platform ios
132133
* @default true
133134
*/
134135
grabber?: boolean
135136

137+
/**
138+
* Grabber props to be used for android grabber or handle.
139+
*
140+
* @platform android
141+
*/
142+
grabberProps?: TrueSheetGrabberProps
143+
136144
/**
137145
* The blur effect style on iOS.
138146
* Overrides `backgroundColor` if set.

0 commit comments

Comments
 (0)