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}