diff --git a/native/bottom-sheets/bottom-sheet-handle.react.js b/native/bottom-sheets/bottom-sheet-handle.react.js
new file mode 100644
--- /dev/null
+++ b/native/bottom-sheets/bottom-sheet-handle.react.js
@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useStyles } from '../themes/colors.js';
+
+function BottomSheetHandle(): React.Node {
+ const styles = useStyles(unboundStyles);
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+
+const unboundStyles = {
+ knobHandleContainer: {
+ marginTop: -12,
+ },
+ knobHandle: {
+ width: 64,
+ height: 4,
+ backgroundColor: 'modalKnob',
+ alignSelf: 'center',
+ borderRadius: 4,
+ },
+ gap: {
+ height: 32,
+ },
+};
+
+export default BottomSheetHandle;
diff --git a/native/bottom-sheets/bottom-sheet.react.js b/native/bottom-sheets/bottom-sheet.react.js
--- a/native/bottom-sheets/bottom-sheet.react.js
+++ b/native/bottom-sheets/bottom-sheet.react.js
@@ -3,6 +3,7 @@
import { BottomSheetModal } from '@gorhom/bottom-sheet';
import * as React from 'react';
+import BottomSheetHandle from './bottom-sheet-handle.react.js';
import { useStyles } from '../themes/colors.js';
type Props = {
@@ -21,7 +22,7 @@
ref={ref}
backgroundStyle={styles.background}
snapPoints={snapPoints}
- handleIndicatorStyle={styles.handleIndicator}
+ handleComponent={BottomSheetHandle}
>
{children}