diff --git a/native/bottom-sheet/bottom-sheet-constants.js b/native/bottom-sheet/bottom-sheet-constants.js
new file mode 100644
index 000000000..c79b2c075
--- /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
index 35fcff021..6182e0395 100644
--- a/native/bottom-sheet/bottom-sheet-handle.react.js
+++ b/native/bottom-sheet/bottom-sheet-handle.react.js
@@ -1,42 +1,47 @@
 // @flow
 
 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 {
   const styles = useStyles(unboundStyles);
 
   const bottomSheetHandle = React.useMemo(
     () => (
       <>
         <View style={styles.knobHandleContainer}>
           <View style={styles.knobHandle} />
         </View>
         <View style={styles.gap} />
       </>
     ),
     [styles.gap, styles.knobHandle, styles.knobHandleContainer],
   );
 
   return bottomSheetHandle;
 }
 
 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,
   },
 };
 
 export default BottomSheetHandle;
diff --git a/native/bottom-sheet/bottom-sheet.react.js b/native/bottom-sheet/bottom-sheet.react.js
index de8c79bb4..28a773bd3 100644
--- a/native/bottom-sheet/bottom-sheet.react.js
+++ b/native/bottom-sheet/bottom-sheet.react.js
@@ -1,77 +1,81 @@
 // @flow
 
 import GorhomBottomSheet from '@gorhom/bottom-sheet';
 import invariant from 'invariant';
 import * as React from 'react';
 
 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';
 
 type Props = {
   +children: React.Node,
   +onClosed: () => mixed,
 };
 
 function ForwardedBottomSheet(
   props: Props,
   ref: ReactRefSetter<typeof GorhomBottomSheet>,
 ): React.Node {
   const { children, onClosed } = props;
 
   const styles = useStyles(unboundStyles);
 
   const bottomSheetContext = React.useContext(BottomSheetContext);
   invariant(bottomSheetContext, 'bottomSheetContext should be set');
 
   const { contentHeight } = bottomSheetContext;
 
-  const snapPoints = React.useMemo(() => [contentHeight], [contentHeight]);
+  const snapPoints = React.useMemo(
+    () => [contentHeight + handleTotalHeight],
+    [contentHeight],
+  );
 
   const onChange = React.useCallback(
     (index: number) => {
       if (index === -1) {
         onClosed();
       }
     },
     [onClosed],
   );
 
   return (
     <GorhomBottomSheet
       ref={ref}
       backgroundStyle={styles.background}
       snapPoints={snapPoints}
       handleComponent={BottomSheetHandle}
       backdropComponent={BottomSheetBackdrop}
       onChange={onChange}
       enablePanDownToClose={true}
     >
       {children}
     </GorhomBottomSheet>
   );
 }
 
 const unboundStyles = {
   background: {
     backgroundColor: 'modalForeground',
   },
 };
 
 const BottomSheet: React.AbstractComponent<
   Props,
   React.ElementRef<typeof GorhomBottomSheet>,
 > = React.forwardRef<Props, React.ElementRef<typeof GorhomBottomSheet>>(
   ForwardedBottomSheet,
 );
 BottomSheet.displayName = 'BottomSheet';
 
 const MemoizedBottomSheet: typeof BottomSheet = React.memo<
   Props,
   React.ElementRef<typeof GorhomBottomSheet>,
 >(BottomSheet);
 
 export default MemoizedBottomSheet;