@lodev09/react-native-true-sheet 0.9.3 → 0.9.4

package/README.md

@@ -12,8 +12,12 @@ The true native bottom sheet 💩
 * ✅ Implemented in the native realm.
 * ✅ **_NOT_** your pure JS, (re)animated view (might integrate in the future 👀)
 * ✅ Clean, fast, and lightweight.
-* ✅ Handles your scrolling needs, easy.
-* ✅ Asynchronus `ref` methods.
+* ✅ Handles your _Scrolling_ needs, natively.
+* ✅ Handles your _Footer_ needs, natively.
+* ✅ Handles your _Keyboard_ needs, natively.
+* ✅ Asynchronus `ref` [methods](#methods).
+* ✅ Works with Expo by default.
+* ✅ Bonus! [Blur](#blurtint) support on iOS 😎
 
 ## Installation
 
@@ -34,8 +38,9 @@ import { TrueSheet } from "@lodev09/react-native-true-sheet"
 
 const sheet = useRef<TrueSheet>(null)
 
-const openSheet = () => {
-  sheet.current?.present()
+const openSheet = async () => {
+  await sheet.current?.present()
+  console.log('horray! sheet has been presented 💩')
 }
 
 return (
@@ -59,17 +64,17 @@ Extends `ViewProps`
 
 | Prop | Type | Default | Description | 🍎 | 🤖 |
 | - | - | - | - | - | - |
-| sizes | [`SheetSize`](#sheetsize) | `['medium', 'large']` | The sizes you want the sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_**, and **_expanded_**. Example: `size={['auto', '60%', 'large']}`| ✅ | ✅ |
-| backgroundColor | `ColorValue` | `white` | Main sheet background color. | ✅ | ✅ |
+| sizes | [`SheetSize[]`](#sheetsize) | `["medium", "large"]` | Array of sizes you want the sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_**, and **_expanded_**. Example: `size={["auto", "60%", "large"]}`| ✅ | ✅ |
+| backgroundColor | `ColorValue` | `"white"` | The sheet's background color. | ✅ | ✅ |
 | cornerRadius | `number` | - | the sheet corner radius. | ✅ | ✅ |
-| maxHeight | `number` | - | Overrides `large` or `100%` height. | ✅ | ✅ |
+| maxHeight | `number` | - | Overrides `"large"` or `"100%"` height. | ✅ | ✅ |
 | contentContainerStyle | `StyleProp<ViewStyle>` | - | Optional content container styles. | ✅ | ✅ |
 | FooterComponent | `ComponentType<...> \| ReactElement` | - | A component that floats at the bottom of the sheet. Accepts a functional `Component` or `ReactElement`. | ✅ | ✅ |
 | 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. | ✅ | |
+| blurTint | [`BlurTint`](#blurtint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `"light"`, `"dark"`, etc. | ✅ | |
+| scrollRef | `RefObject<...>` | - | The main scrollable ref that the sheet should handle on iOS. | ✅ | |
 
 ## Methods
 
@@ -155,7 +160,7 @@ Grabber props to be used for android grabber or handle.
 | color | `ColorValue` | `"rgba(73,69,79,0.4)"` | Grabber color according to M3 specs. |
 | height | `number` | `4` | Grabber height according to M3 specs. |
 | width | `number` | `32` | Grabber width according to M3 specs. |
-| topOffset | `number` | `6` | Grabber top position offset. |
+| topOffset | `number` | `0` | Grabber top position offset. |
 
 ### `BlurTint`
 
@@ -207,11 +212,38 @@ Blur tint that is mapped into native values in iOS.
 | index | `number` | The size index from the provided sizes. See `sizes` prop. |
 | value | `number` | The actual height value of the size. |
 
+## Troubleshooting
+
+### Integrating `@react-navigation/native` on iOS
+
+On iOS, navigating to a [React Navigation](https://reactnavigation.org) screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!
+
+Example:
+```ts
+const sheet = useRef<TrueSheet>(null)
+
+const navigate = async () => {
+  await sheet.current?.dismiss() // wait for the sheet to dismiss ✅
+  navigation.navigate('SomeScreen') // navigate to the screen 🎉
+}
+
+return (
+  <TrueSheet ref={sheet}>
+    <Button onPress={navigate} title="Navigate to SomeScreen" />
+    // ...
+  </TrueSheet>
+)
+```
+
+### Weird layout render
+
+The sheet does not have control over how React Native renders components and may lead to rendering issues. To resolve this, try to minimize the use of `flex=1` in your content styles. Instead, use fixed `height` or employ `flexGrow`, `flexBasis`, etc., to manage your layout requirements.
+
 ## v1 Roadmap
 
 - [ ] Inline sheet
+- [ ] Test with RN new architecture
 - [ ] Reanimated integration(?)
-- [ ] Any ideas?
 
 ## Contributing
 

package/lib/commonjs/TrueSheetGrabber.js

@@ -7,10 +7,8 @@ exports.TrueSheetGrabber = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const GRABBER_WRAPPER_HEIGHT = 24;
 const GRABBER_DEFAULT_HEIGHT = 4;
 const GRABBER_DEFAULT_WIDTH = 32;
-const GRABBER_DEFAULT_TOP_OFFSET = 6;
 
 // M3 spec: #49454F 0.4 alpha
 const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)';
@@ -24,30 +22,30 @@ const TrueSheetGrabber = props => {
     color = GRABBER_DEFAULT_COLOR,
     width = GRABBER_DEFAULT_WIDTH,
     height = GRABBER_DEFAULT_HEIGHT,
-    topOffset = GRABBER_DEFAULT_TOP_OFFSET,
+    topOffset = 0,
     style
   } = props;
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: $wrapper
+    style: [$wrapper, style, {
+      height: GRABBER_DEFAULT_HEIGHT * 4,
+      top: topOffset
+    }]
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [$grabber, {
       height,
       width,
-      backgroundColor: color,
-      top: topOffset
-    }, style]
+      backgroundColor: color
+    }]
   }));
 };
 exports.TrueSheetGrabber = TrueSheetGrabber;
 const $wrapper = {
   position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
   alignSelf: 'center',
-  height: GRABBER_WRAPPER_HEIGHT,
+  paddingHorizontal: 12,
   alignItems: 'center',
+  justifyContent: 'center',
   zIndex: 9999
 };
 const $grabber = {

package/lib/commonjs/TrueSheetGrabber.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","GRABBER_WRAPPER_HEIGHT","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_TOP_OFFSET","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","topOffset","style","createElement","View","$wrapper","$grabber","backgroundColor","top","exports","position","left","right","alignSelf","alignItems","zIndex","borderRadius"],"sourceRoot":"../../src","sources":["TrueSheetGrabber.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAoF,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpF,MAAMG,sBAAsB,GAAG,EAAE;AACjC,MAAMC,sBAAsB,GAAG,CAAC;AAChC,MAAMC,qBAAqB,GAAG,EAAE;AAChC,MAAMC,0BAA0B,GAAG,CAAC;;AAEpC;AACA,MAAMC,qBAAqB,GAAG,oBAAoB;AAwClD;AACA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAChE,MAAM;IACJC,OAAO,GAAG,IAAI;IACdC,KAAK,GAAGJ,qBAAqB;IAC7BK,KAAK,GAAGP,qBAAqB;IAC7BQ,MAAM,GAAGT,sBAAsB;IAC/BU,SAAS,GAAGR,0BAA0B;IACtCS;EACF,CAAC,GAAGN,KAAK;EAET,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEd,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACjB,YAAA,CAAAkB,IAAI;IAACF,KAAK,EAAEG;EAAS,gBACpBtB,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACjB,YAAA,CAAAkB,IAAI;IAACF,KAAK,EAAE,CAACI,QAAQ,EAAE;MAAEN,MAAM;MAAED,KAAK;MAAEQ,eAAe,EAAET,KAAK;MAAEU,GAAG,EAAEP;IAAU,CAAC,EAAEC,KAAK;EAAE,CAAE,CACxF,CAAC;AAEX,CAAC;AAAAO,OAAA,CAAAd,gBAAA,GAAAA,gBAAA;AAED,MAAMU,QAAmB,GAAG;EAC1BK,QAAQ,EAAE,UAAU;EACpBF,GAAG,EAAE,CAAC;EACNG,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,QAAQ;EACnBb,MAAM,EAAEV,sBAAsB;EAC9BwB,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC;AAED,MAAMT,QAAmB,GAAG;EAC1BU,YAAY,EAAEzB,sBAAsB,GAAG;AACzC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","topOffset","style","createElement","View","$wrapper","top","$grabber","backgroundColor","exports","position","alignSelf","paddingHorizontal","alignItems","justifyContent","zIndex","borderRadius"],"sourceRoot":"../../src","sources":["TrueSheetGrabber.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAoF,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpF,MAAMG,sBAAsB,GAAG,CAAC;AAChC,MAAMC,qBAAqB,GAAG,EAAE;;AAEhC;AACA,MAAMC,qBAAqB,GAAG,oBAAoB;AAwClD;AACA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAChE,MAAM;IACJC,OAAO,GAAG,IAAI;IACdC,KAAK,GAAGJ,qBAAqB;IAC7BK,KAAK,GAAGN,qBAAqB;IAC7BO,MAAM,GAAGR,sBAAsB;IAC/BS,SAAS,GAAG,CAAC;IACbC;EACF,CAAC,GAAGN,KAAK;EAET,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEZ,MAAA,CAAAM,OAAA,CAAAY,aAAA,CAACf,YAAA,CAAAgB,IAAI;IAACF,KAAK,EAAE,CAACG,QAAQ,EAAEH,KAAK,EAAE;MAAEF,MAAM,EAAER,sBAAsB,GAAG,CAAC;MAAEc,GAAG,EAAEL;IAAU,CAAC;EAAE,gBACrFhB,MAAA,CAAAM,OAAA,CAAAY,aAAA,CAACf,YAAA,CAAAgB,IAAI;IAACF,KAAK,EAAE,CAACK,QAAQ,EAAE;MAAEP,MAAM;MAAED,KAAK;MAAES,eAAe,EAAEV;IAAM,CAAC;EAAE,CAAE,CACjE,CAAC;AAEX,CAAC;AAAAW,OAAA,CAAAd,gBAAA,GAAAA,gBAAA;AAED,MAAMU,QAAmB,GAAG;EAC1BK,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE,QAAQ;EACnBC,iBAAiB,EAAE,EAAE;EACrBC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,QAAQ;EACxBC,MAAM,EAAE;AACV,CAAC;AAED,MAAMR,QAAmB,GAAG;EAC1BS,YAAY,EAAExB,sBAAsB,GAAG;AACzC,CAAC","ignoreList":[]}

package/lib/module/TrueSheetGrabber.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
-const GRABBER_WRAPPER_HEIGHT = 24;
 const GRABBER_DEFAULT_HEIGHT = 4;
 const GRABBER_DEFAULT_WIDTH = 32;
-const GRABBER_DEFAULT_TOP_OFFSET = 6;
 
 // M3 spec: #49454F 0.4 alpha
 const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)';
@@ -17,29 +15,29 @@ export const TrueSheetGrabber = props => {
     color = GRABBER_DEFAULT_COLOR,
     width = GRABBER_DEFAULT_WIDTH,
     height = GRABBER_DEFAULT_HEIGHT,
-    topOffset = GRABBER_DEFAULT_TOP_OFFSET,
+    topOffset = 0,
     style
   } = props;
   if (!visible) return null;
   return /*#__PURE__*/React.createElement(View, {
-    style: $wrapper
+    style: [$wrapper, style, {
+      height: GRABBER_DEFAULT_HEIGHT * 4,
+      top: topOffset
+    }]
   }, /*#__PURE__*/React.createElement(View, {
     style: [$grabber, {
       height,
       width,
-      backgroundColor: color,
-      top: topOffset
-    }, style]
+      backgroundColor: color
+    }]
   }));
 };
 const $wrapper = {
   position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
   alignSelf: 'center',
-  height: GRABBER_WRAPPER_HEIGHT,
+  paddingHorizontal: 12,
   alignItems: 'center',
+  justifyContent: 'center',
   zIndex: 9999
 };
 const $grabber = {

package/lib/module/TrueSheetGrabber.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","GRABBER_WRAPPER_HEIGHT","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_TOP_OFFSET","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","topOffset","style","createElement","$wrapper","$grabber","backgroundColor","top","position","left","right","alignSelf","alignItems","zIndex","borderRadius"],"sourceRoot":"../../src","sources":["TrueSheetGrabber.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAyD,cAAc;AAEpF,MAAMC,sBAAsB,GAAG,EAAE;AACjC,MAAMC,sBAAsB,GAAG,CAAC;AAChC,MAAMC,qBAAqB,GAAG,EAAE;AAChC,MAAMC,0BAA0B,GAAG,CAAC;;AAEpC;AACA,MAAMC,qBAAqB,GAAG,oBAAoB;AAwClD;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAChE,MAAM;IACJC,OAAO,GAAG,IAAI;IACdC,KAAK,GAAGJ,qBAAqB;IAC7BK,KAAK,GAAGP,qBAAqB;IAC7BQ,MAAM,GAAGT,sBAAsB;IAC/BU,SAAS,GAAGR,0BAA0B;IACtCS;EACF,CAAC,GAAGN,KAAK;EAET,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACET,KAAA,CAAAe,aAAA,CAACd,IAAI;IAACa,KAAK,EAAEE;EAAS,gBACpBhB,KAAA,CAAAe,aAAA,CAACd,IAAI;IAACa,KAAK,EAAE,CAACG,QAAQ,EAAE;MAAEL,MAAM;MAAED,KAAK;MAAEO,eAAe,EAAER,KAAK;MAAES,GAAG,EAAEN;IAAU,CAAC,EAAEC,KAAK;EAAE,CAAE,CACxF,CAAC;AAEX,CAAC;AAED,MAAME,QAAmB,GAAG;EAC1BI,QAAQ,EAAE,UAAU;EACpBD,GAAG,EAAE,CAAC;EACNE,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,QAAQ;EACnBX,MAAM,EAAEV,sBAAsB;EAC9BsB,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC;AAED,MAAMR,QAAmB,GAAG;EAC1BS,YAAY,EAAEvB,sBAAsB,GAAG;AACzC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","View","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","topOffset","style","createElement","$wrapper","top","$grabber","backgroundColor","position","alignSelf","paddingHorizontal","alignItems","justifyContent","zIndex","borderRadius"],"sourceRoot":"../../src","sources":["TrueSheetGrabber.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAyD,cAAc;AAEpF,MAAMC,sBAAsB,GAAG,CAAC;AAChC,MAAMC,qBAAqB,GAAG,EAAE;;AAEhC;AACA,MAAMC,qBAAqB,GAAG,oBAAoB;AAwClD;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAChE,MAAM;IACJC,OAAO,GAAG,IAAI;IACdC,KAAK,GAAGJ,qBAAqB;IAC7BK,KAAK,GAAGN,qBAAqB;IAC7BO,MAAM,GAAGR,sBAAsB;IAC/BS,SAAS,GAAG,CAAC;IACbC;EACF,CAAC,GAAGN,KAAK;EAET,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEP,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACW,KAAK,EAAE,CAACE,QAAQ,EAAEF,KAAK,EAAE;MAAEF,MAAM,EAAER,sBAAsB,GAAG,CAAC;MAAEa,GAAG,EAAEJ;IAAU,CAAC;EAAE,gBACrFX,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACW,KAAK,EAAE,CAACI,QAAQ,EAAE;MAAEN,MAAM;MAAED,KAAK;MAAEQ,eAAe,EAAET;IAAM,CAAC;EAAE,CAAE,CACjE,CAAC;AAEX,CAAC;AAED,MAAMM,QAAmB,GAAG;EAC1BI,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE,QAAQ;EACnBC,iBAAiB,EAAE,EAAE;EACrBC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,QAAQ;EACxBC,MAAM,EAAE;AACV,CAAC;AAED,MAAMP,QAAmB,GAAG;EAC1BQ,YAAY,EAAEtB,sBAAsB,GAAG;AACzC,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"TrueSheetGrabber.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetGrabber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAUpF,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,6BAiB5D,CAAA"}
+{"version":3,"file":"TrueSheetGrabber.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetGrabber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAQpF,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,6BAiB5D,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "The true native bottom sheet. 💩",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/TrueSheetGrabber.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import { View, type ColorValue, type ViewStyle, type StyleProp } from 'react-native'
 
-const GRABBER_WRAPPER_HEIGHT = 24
 const GRABBER_DEFAULT_HEIGHT = 4
 const GRABBER_DEFAULT_WIDTH = 32
-const GRABBER_DEFAULT_TOP_OFFSET = 6
 
 // M3 spec: #49454F 0.4 alpha
 const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)'
@@ -57,27 +55,25 @@ export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
     color = GRABBER_DEFAULT_COLOR,
     width = GRABBER_DEFAULT_WIDTH,
     height = GRABBER_DEFAULT_HEIGHT,
-    topOffset = GRABBER_DEFAULT_TOP_OFFSET,
+    topOffset = 0,
     style,
   } = props
 
   if (!visible) return null
 
   return (
-    <View style={$wrapper}>
-      <View style={[$grabber, { height, width, backgroundColor: color, top: topOffset }, style]} />
+    <View style={[$wrapper, style, { height: GRABBER_DEFAULT_HEIGHT * 4, top: topOffset }]}>
+      <View style={[$grabber, { height, width, backgroundColor: color }]} />
     </View>
   )
 }
 
 const $wrapper: ViewStyle = {
   position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
   alignSelf: 'center',
-  height: GRABBER_WRAPPER_HEIGHT,
+  paddingHorizontal: 12,
   alignItems: 'center',
+  justifyContent: 'center',
   zIndex: 9999,
 }