refactor: updated bottom sheet layers

example/src/App.tsx

@@ -106,6 +106,15 @@ const App = () => {
               require('./screens/advanced/CustomHandleExample').default
             }
           />
+          <Stack.Screen
+            name="Advanced/CustomBackgroundExample"
+            options={{
+              title: 'Custom Background Example',
+            }}
+            getComponent={() =>
+              require('./screens/advanced/CustomBackgroundExample').default
+            }
+          />
           <Stack.Screen
             name="Advanced/BackdropExample"
             options={{

example/src/components/contactList/ContactList.tsx

@@ -163,15 +163,13 @@ const styles = StyleSheet.create({
   sectionHeaderContainer: {
     paddingTop: 24,
     paddingBottom: 6,
-    backgroundColor: 'white',
   },
   sectionHeaderTitle: {
     fontSize: 16,
     textTransform: 'uppercase',
   },
   contentContainer: {
     paddingHorizontal: 24,
-    backgroundColor: 'white',
   },
 });
 

example/src/components/customBackground/CustomBackground.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
+import Animated from 'react-native-reanimated';
+import { interpolateColor } from 'react-native-redash';
+
+interface CustomBackgroundProps extends BottomSheetBackgroundProps {}
+
+const CustomBackground: React.FC<CustomBackgroundProps> = ({
+  style,
+  animatedIndex,
+}) => {
+  //#region styles
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      style,
+      {
+        backgroundColor: interpolateColor(animatedIndex, {
+          inputRange: [0, 1],
+          outputRange: ['#ffffff', '#a8b5eb'],
+        }),
+      },
+    ],
+    [style, animatedIndex]
+  );
+  //#endregion
+
+  // render
+  return <Animated.View pointerEvents="none" style={containerStyle} />;
+};
+
+export default CustomBackground;
+
+const styles = StyleSheet.create({
+  container: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    backgroundColor: '#fff',
+  },
+});

example/src/components/customBackground/index.ts

@@ -0,0 +1 @@
+export { default } from './CustomBackground';

example/src/screens/Root.tsx

@@ -58,6 +58,10 @@ const data = [
         name: 'Custom Handle',
         slug: 'Advanced/CustomHandleExample',
       },
+      {
+        name: 'Custom Background',
+        slug: 'Advanced/CustomBackgroundExample',
+      },
       {
         name: 'Backdrop',
         slug: 'Advanced/BackdropExample',

example/src/screens/advanced/CustomBackgroundExample.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+import CustomBackground from '../../components/customBackground';
+import Button from '../../components/button';
+import ContactList from '../../components/contactList';
+
+const CustomBackgroundExample = () => {
+  // hooks
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  // variables
+  const snapPoints = useMemo(() => [150, 450], []);
+
+  // styles
+
+  // callbacks
+  const handleSnapPress = useCallback(index => {
+    bottomSheetRef.current?.snapTo(index);
+  }, []);
+  const handleExpandPress = useCallback(() => {
+    bottomSheetRef.current?.expand();
+  }, []);
+  const handleCollapsePress = useCallback(() => {
+    bottomSheetRef.current?.collapse();
+  }, []);
+  const handleClosePress = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  // renders
+  const renderHeader = useCallback(() => {
+    return (
+      <View style={styles.headerContainer}>
+        <Text style={styles.title}>Custom Background Example</Text>
+      </View>
+    );
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Button
+        label="Snap To 450"
+        style={styles.buttonContainer}
+        onPress={() => handleSnapPress(1)}
+      />
+      <Button
+        label="Snap To 150"
+        style={styles.buttonContainer}
+        onPress={() => handleSnapPress(0)}
+      />
+      <Button
+        label="Expand"
+        style={styles.buttonContainer}
+        onPress={() => handleExpandPress()}
+      />
+      <Button
+        label="Collapse"
+        style={styles.buttonContainer}
+        onPress={() => handleCollapsePress()}
+      />
+      <Button
+        label="Close"
+        style={styles.buttonContainer}
+        onPress={() => handleClosePress()}
+      />
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={1}
+        snapPoints={snapPoints}
+        animateOnMount={true}
+        backgroundComponent={CustomBackground}
+      >
+        <ContactList type="View" count={3} header={renderHeader} />
+      </BottomSheet>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  contentContainerStyle: {
+    paddingTop: 12,
+    paddingHorizontal: 24,
+  },
+  title: {
+    fontSize: 46,
+    lineHeight: 46,
+    fontWeight: '800',
+  },
+  headerContainer: {
+    paddingVertical: 24,
+  },
+  buttonContainer: {
+    marginBottom: 6,
+  },
+});
+
+export default CustomBackgroundExample;

example/src/screens/advanced/NavigatorExample.tsx

@@ -49,6 +49,10 @@ const Navigator = () => {
           <HeaderBackButton {...props} />
         </TouchableOpacity>
       ),
+      cardStyle: {
+        backgroundColor: 'white',
+        overflow: 'visible',
+      },
     }),
     []
   );

example/src/types.ts

@@ -14,6 +14,7 @@ export type AppStackParamsList = {
   // Advanced
   ['Advanced/NavigatorExample']: undefined;
   ['Advanced/CustomHandleExample']: undefined;
+  ['Advanced/CustomBackgroundExample']: undefined;
   ['Advanced/BackdropExample']: undefined;
   ['Advanced/MapExample']: undefined;
   ['Advanced/DynamicSnapPointExample']: undefined;

src/components/bottomSheet/BottomSheet.tsx

@@ -428,6 +428,19 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }),
       [sheetHeight]
     );
+
+    /**
+     * added safe area to prevent the sheet from floating above
+     * the bottom of the screen, when sheet being over dragged or
+     * when the sheet is resized.
+     */
+    const contentMaskContainerStyle = useMemo<ViewStyle>(
+      () => ({
+        ...styles.contentMaskContainer,
+        paddingBottom: animatedIsLayoutReady ? sheetHeight : 0,
+      }),
+      [sheetHeight, animatedIsLayoutReady]
+    );
     //#endregion
 
     //#region effects
@@ -538,7 +551,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region render
-    // console.log('BottomSheet', 'render', snapPoints, safeHandleHeight);
+    console.log(
+      'BottomSheet',
+      'render',
+      snapPoints,
+      sheetHeight,
+      safeHandleHeight
+    );
     return (
       <BottomSheetProvider value={externalContextVariables}>
         <BottomSheetBackdropContainer
@@ -581,12 +600,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   onMeasureHeight={handleOnHandleMeasureHeight}
                   {...handlePanGestureHandler}
                 />
-                <BottomSheetDraggableView
-                  key="BottomSheetRootDraggableView"
-                  style={contentContainerStyle}
+                <Animated.View
+                  pointerEvents="box-none"
+                  style={contentMaskContainerStyle}
                 >
-                  {children}
-                </BottomSheetDraggableView>
+                  <BottomSheetDraggableView
+                    key="BottomSheetRootDraggableView"
+                    style={contentContainerStyle}
+                  >
+                    {children}
+                  </BottomSheetDraggableView>
+                </Animated.View>
               </BottomSheetInternalProvider>
             </Animated.View>
           </BottomSheetContentWrapper>

src/components/bottomSheet/styles.ts

@@ -8,14 +8,7 @@ export const styles = StyleSheet.create({
     top: 0,
   },
   contentContainer: {},
-  debug: {
-    position: 'absolute',
-    left: 20,
-    top: 100,
-    backgroundColor: 'rgba(0, 0,0,0.5)',
-  },
-  debugText: {
-    fontSize: 24,
-    color: 'white',
+  contentMaskContainer: {
+    overflow: 'hidden',
   },
 });