Page MenuHomePhabricator
Files F3404031

D13867.id45639.diff
No OneTemporary
Actions

D13867.id45639.diff
View Options

diff --git a/native/bottom-sheet/bottom-sheet-constants.js b/native/bottom-sheet/bottom-sheet-constants.js
new file mode 100644
--- /dev/null
+++ b/native/bottom-sheet/bottom-sheet-constants.js
@@ -0,0 +1,10 @@
+// @flow
+
+export const knobHandleContainerMarginTop = -12;
+
+export const knobHandleHeight = 4;
+
+export const handleGap = 32;
+
+export const handleTotalHeight =
+ knobHandleContainerMarginTop + knobHandleHeight + handleGap;
diff --git a/native/bottom-sheet/bottom-sheet-handle.react.js b/native/bottom-sheet/bottom-sheet-handle.react.js
--- a/native/bottom-sheet/bottom-sheet-handle.react.js
+++ b/native/bottom-sheet/bottom-sheet-handle.react.js
@@ -3,6 +3,11 @@
import * as React from 'react';
import { View } from 'react-native';
+import {
+ knobHandleContainerMarginTop,
+ knobHandleHeight,
+ handleGap,
+} from './bottom-sheet-constants.js';
import { useStyles } from '../themes/colors.js';
function BottomSheetHandle(): React.Node {
@@ -25,17 +30,17 @@
const unboundStyles = {
knobHandleContainer: {
- marginTop: -12,
+ marginTop: knobHandleContainerMarginTop,
},
knobHandle: {
width: 64,
- height: 4,
+ height: knobHandleHeight,
backgroundColor: 'modalKnob',
alignSelf: 'center',
borderRadius: 4,
},
gap: {
- height: 32,
+ height: handleGap,
},
};
diff --git a/native/bottom-sheet/bottom-sheet.react.js b/native/bottom-sheet/bottom-sheet.react.js
--- a/native/bottom-sheet/bottom-sheet.react.js
+++ b/native/bottom-sheet/bottom-sheet.react.js
@@ -7,6 +7,7 @@
import type { ReactRefSetter } from 'lib/types/react-types.js';
import BottomSheetBackdrop from './bottom-sheet-backdrop.react.js';
+import { handleTotalHeight } from './bottom-sheet-constants.js';
import BottomSheetHandle from './bottom-sheet-handle.react.js';
import { BottomSheetContext } from './bottom-sheet-provider.react.js';
import { useStyles } from '../themes/colors.js';
@@ -29,7 +30,10 @@
const { contentHeight } = bottomSheetContext;
- const snapPoints = React.useMemo(() => [contentHeight], [contentHeight]);
+ const snapPoints = React.useMemo(
+ () => [contentHeight + handleTotalHeight],
+ [contentHeight],
+ );
const onChange = React.useCallback(
(index: number) => {

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 6:01 AM (5 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2613752
Default Alt Text
D13867.id45639.diff (2 KB)

Event Timeline