Page MenuHomePhabricator
Files F3184144

D8958.id30334.diff
No OneTemporary
Actions

D8958.id30334.diff
View Options

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 (
+ <>
+ <View style={styles.knobHandleContainer}>
+ <View style={styles.knobHandle} />
+ </View>
+ <View style={styles.gap} />
+ </>
+ );
+}
+
+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}
</BottomSheetModal>

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 9, 10:15 AM (16 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2451512
Default Alt Text
D8958.id30334.diff (1 KB)

Event Timeline