Page MenuHomePhabricator
Files F2762091

D8958.id30800.diff
No OneTemporary
Actions

D8958.id30800.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 = {
@@ -24,7 +25,7 @@
ref={ref}
backgroundStyle={styles.background}
snapPoints={snapPoints}
- handleIndicatorStyle={styles.handleIndicator}
+ handleComponent={BottomSheetHandle}
>
{children}
</BottomSheetModal>
@@ -35,10 +36,6 @@
background: {
backgroundColor: 'modalForeground',
},
- handleIndicator: {
- backgroundColor: 'modalKnob',
- width: 64,
- },
};
const BottomSheet: React.AbstractComponent<

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 9:14 AM (18 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2141611
Default Alt Text
D8958.id30800.diff (1 KB)

Event Timeline