feat: added default backdrop (#109)

* chore: delete old overlay component

* chore: added backdrop implementation

* chore: updated examples

example/src/App.tsx

@@ -63,12 +63,12 @@ const App = () => {
             }
           />
           <Stack.Screen
-            name="Modal/OverlayExample"
+            name="Modal/BackdropExample"
             options={{
-              title: 'Modal Overlay Example',
+              title: 'Modal Backdrop Example',
             }}
             getComponent={() =>
-              require('./screens/modal/OverlayExample').default
+              require('./screens/modal/BackdropExample').default
             }
           />
           <Stack.Screen
@@ -98,12 +98,12 @@ const App = () => {
             }
           />
           <Stack.Screen
-            name="Advanced/OverlayExample"
+            name="Advanced/BackdropExample"
             options={{
-              title: 'Overlay Example',
+              title: 'Backdrop Example',
             }}
             getComponent={() =>
-              require('./screens/advanced/OverlayExample').default
+              require('./screens/advanced/BackdropExample').default
             }
           />
           <Stack.Screen

example/src/screens/Root.tsx

@@ -34,8 +34,8 @@ const data = [
         slug: 'Modal/SimpleExample',
       },
       {
-        name: 'Overlay',
-        slug: 'Modal/OverlayExample',
+        name: 'Backdrop',
+        slug: 'Modal/BackdropExample',
       },
       {
         name: 'Stack Modals',
@@ -55,8 +55,8 @@ const data = [
         slug: 'Advanced/CustomHandleExample',
       },
       {
-        name: 'Shadow Overlay',
-        slug: 'Advanced/OverlayExample',
+        name: 'Backdrop',
+        slug: 'Advanced/BackdropExample',
       },
       {
         name: 'Map',

example/src/screens/advanced/OverlayExample.tsx → example/src/screens/advanced/BackdropExample.tsx

@@ -1,36 +1,17 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import Animated, { interpolate, Extrapolate } from 'react-native-reanimated';
-import { useValue } from 'react-native-redash';
-import BottomSheet from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
 import ContactList from '../../components/contactList';
 
-const OverlayExample = () => {
+const BackdropExample = () => {
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
 
   // variables
   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-  const animatedIndex = useValue<number>(0);
-
-  // styles
-  const shadowOverlayStyle = useMemo(
-    () => ({
-      ...styles.shadowOverlay,
-      opacity: interpolate(animatedIndex, {
-        inputRange: [0, 2],
-        outputRange: [0, 1],
-        extrapolate: Extrapolate.CLAMP,
-      }),
-    }),
-    [animatedIndex]
-  );
 
   // callbacks
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log('handleSheetChanges', index);
-  }, []);
   const handleSnapPress = useCallback(index => {
     bottomSheetRef.current?.snapTo(index);
   }, []);
@@ -48,7 +29,7 @@ const OverlayExample = () => {
   const renderHeader = useCallback(() => {
     return (
       <View style={styles.headerContainer}>
-        <Text style={styles.title}>Shadow Overlay Example</Text>
+        <Text style={styles.title}>Backdrop Example</Text>
       </View>
     );
   }, []);
@@ -85,13 +66,11 @@ const OverlayExample = () => {
         style={styles.buttonContainer}
         onPress={() => handleClosePress()}
       />
-      <Animated.View pointerEvents="none" style={shadowOverlayStyle} />
       <BottomSheet
         ref={bottomSheetRef}
         index={1}
         snapPoints={snapPoints}
-        animatedIndex={animatedIndex}
-        onChange={handleSheetChanges}
+        backdropComponent={BottomSheetBackdrop}
       >
         <ContactList type="View" count={3} header={renderHeader} />
       </BottomSheet>
@@ -109,7 +88,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     backgroundColor: 'white',
   },
-  shadowOverlay: {
+  shadowBackdrop: {
     position: 'absolute',
     top: 0,
     left: 0,
@@ -131,4 +110,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default OverlayExample;
+export default BackdropExample;

example/src/screens/advanced/CustomHandleExample.tsx

@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     backgroundColor: 'white',
   },
-  shadowOverlay: {
+  shadowBackdrop: {
     position: 'absolute',
     top: 0,
     left: 0,

example/src/screens/advanced/MapExample.tsx

@@ -13,8 +13,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   BottomSheetModal,
   BottomSheetScrollView,
-  BottomSheetOverlay,
+  BottomSheetBackdrop,
   TouchableOpacity,
+  BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
 import withModalProvider from '../withModalProvider';
 import { createLocationListMockData, Location } from '../../utils';
@@ -59,15 +60,6 @@ const MapExample = () => {
   const animatedPosition = useValue<number>(0);
   const animatedModalPosition = useValue<number>(0);
   const animatedIndex = useValue<number>(0);
-  const animatedOverlayOpacity = useMemo(
-    () =>
-      interpolate(animatedPosition, {
-        inputRange: [poiListSnapPoints[1], poiListSnapPoints[2]],
-        outputRange: [0, 0.25],
-        extrapolate: Extrapolate.CLAMP,
-      }),
-    [animatedPosition, poiListSnapPoints]
-  );
   const weatherAnimatedPosition = useMemo(
     () => max(animatedModalPosition, animatedPosition),
     [animatedModalPosition, animatedPosition]
@@ -128,6 +120,18 @@ const MapExample = () => {
     ),
     [handlePresentLocationDetails]
   );
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        enableTouchThrough={true}
+        closeOnPress={false}
+        appearsOnIndex={2}
+        disappearsOnIndex={1}
+      />
+    ),
+    []
+  );
   return (
     <View style={styles.container}>
       <MapView
@@ -146,11 +150,6 @@ const MapExample = () => {
         style={styles.mapContainer}
         onTouchStart={handleTouchStart}
       />
-      <BottomSheetOverlay
-        pointerEvents="none"
-        animatedOpacity={animatedOverlayOpacity}
-      />
-
       <Weather
         animatedPosition={weatherAnimatedPosition}
         snapPoints={poiListSnapPoints}
@@ -165,6 +164,7 @@ const MapExample = () => {
         animatedIndex={animatedIndex}
         dismissOnPanDown={false}
         handleComponent={SearchHandle}
+        backdropComponent={renderBackdrop}
         backgroundComponent={BlurredBackground}
       >
         <BottomSheetScrollView
@@ -185,6 +185,7 @@ const MapExample = () => {
         topInset={topSafeArea}
         animatedPosition={animatedModalPosition}
         handleComponent={LocationDetailsHandle}
+        backdropComponent={renderBackdrop}
         backgroundComponent={BlurredBackground}
       >
         <LocationDetails

example/src/screens/modal/BackdropExample.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useRef } from 'react';
+import { View, StyleSheet, Alert } from 'react-native';
+import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import Button from '../../components/button';
+import ContactListContainer from '../../components/contactListContainer';
+import withModalProvider from '../withModalProvider';
+
+const BackdropExample = () => {
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+
+  // callbacks
+  const handleDismiss = useCallback(() => {
+    Alert.alert('Modal Been Dismissed');
+  }, []);
+  const handlePresentPress = useCallback(() => {
+    bottomSheetRef.current?.present();
+  }, []);
+
+  // renders
+  return (
+    <View style={styles.container}>
+      <Button
+        label="Present Modal"
+        style={styles.buttonContainer}
+        onPress={handlePresentPress}
+      />
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        snapPoints={['25%', '50%']}
+        animationDuration={250}
+        onDismiss={handleDismiss}
+        backdropComponent={BottomSheetBackdrop}
+      >
+        <ContactListContainer title="Modal FlatList" type="FlatList" />
+      </BottomSheetModal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  buttonContainer: {
+    marginBottom: 6,
+  },
+});
+
+export default withModalProvider(BackdropExample);

example/src/screens/static/BasicExample.tsx

@@ -158,7 +158,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     backgroundColor: 'white',
   },
-  shadowOverlay: {
+  shadowBackdrop: {
     position: 'absolute',
     top: 0,
     left: 0,

example/src/types.ts

@@ -8,12 +8,12 @@ export type AppStackParamsList = {
   ['Static/ViewExample']: undefined;
   // modal
   ['Modal/SimpleExample']: undefined;
-  ['Modal/OverlayExample']: undefined;
+  ['Modal/BackdropExample']: undefined;
   ['Modal/StackExample']: undefined;
   // Advanced
   ['Advanced/NavigatorExample']: undefined;
   ['Advanced/CustomHandleExample']: undefined;
-  ['Advanced/OverlayExample']: undefined;
+  ['Advanced/BackdropExample']: undefined;
   ['Advanced/MapExample']: undefined;
   ['Advanced/DynamicSnapPointExample']: undefined;
 };