chore: updated examples

example/src/screens/advanced/CustomHandleExample.tsx

@@ -1,22 +1,16 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import Handle from '../../components/handle';
 import Button from '../../components/button';
 import ContactList from '../../components/contactList';
 
 const CustomHandleExample = () => {
-  // state
-  const [enabled, setEnabled] = useState(true);
-
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
 
   // variables
   const snapPoints = useMemo(() => [150, 300, 450], []);
-  const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
-    enabled,
-  ]);
 
   // callbacks
   const handleSnapPress = useCallback(index => {
@@ -31,9 +25,6 @@ const CustomHandleExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
-  const handleEnablePress = useCallback(() => {
-    setEnabled(state => !state);
-  }, []);
 
   // renders
   const renderHeader = useCallback(() => {
@@ -76,14 +67,8 @@ const CustomHandleExample = () => {
         style={styles.buttonContainer}
         onPress={handleClosePress}
       />
-      <Button
-        label={enableButtonText}
-        style={styles.buttonContainer}
-        onPress={handleEnablePress}
-      />
       <BottomSheet
         ref={bottomSheetRef}
-        enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
         handleComponent={Handle}

example/src/screens/advanced/NavigatorExample.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
   createStackNavigator,
@@ -69,17 +69,11 @@ const Navigator = () => {
 };
 
 const NavigatorExample = () => {
-  // state
-  const [enabled, setEnabled] = useState(true);
-
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
 
   // variables
   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-  const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
-    enabled,
-  ]);
 
   // callbacks
   const handleSheetChange = useCallback(index => {
@@ -97,9 +91,6 @@ const NavigatorExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
-  const handleEnablePress = useCallback(() => {
-    setEnabled(state => !state);
-  }, []);
 
   // renders
   return (
@@ -134,14 +125,8 @@ const NavigatorExample = () => {
         style={styles.buttonContainer}
         onPress={handleClosePress}
       />
-      <Button
-        label={enableButtonText}
-        style={styles.buttonContainer}
-        onPress={handleEnablePress}
-      />
       <BottomSheet
         ref={bottomSheetRef}
-        enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
         onChange={handleSheetChange}

example/src/screens/static/BasicExample.tsx

@@ -9,7 +9,6 @@ import { useSafeArea } from 'react-native-safe-area-context';
 
 const BasicExample = () => {
   // state
-  const [enabled, setEnabled] = useState(true);
   const [dynamicSnapPoint, setDynamicSnapPoint] = useState(450);
 
   // hooks
@@ -61,16 +60,9 @@ const BasicExample = () => {
         style={styles.buttonContainer}
         onPress={() => handleClosePress()}
       />
-
-      <Button
-        label={`${enabled ? 'Disable' : 'Enable'}`}
-        style={styles.buttonContainer}
-        onPress={() => setEnabled(state => !state)}
-      />
       <ReText text={concat('Position from bottom: ', position)} />
       <BottomSheet
         ref={bottomSheetRef}
-        enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
         topInset={topSafeArea}

example/src/screens/static/BasicExamples.tsx

@@ -13,16 +13,34 @@ interface ExampleScreenProps {
 const createExampleScreen = ({ type, count = 20 }: ExampleScreenProps) =>
   memo(() => {
     // state
-    const [enabled, setEnabled] = useState(true);
+    const [
+      enableContentPanningGesture,
+      setEnableContentPanningGesture,
+    ] = useState(true);
+    const [
+      enableHandlePanningGesture,
+      setEnableHandlePanningGesture,
+    ] = useState(true);
 
     // hooks
     const bottomSheetRef = useRef<BottomSheet>(null);
 
     // variables
     const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-    const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
-      enabled,
-    ]);
+    const enableContentPanningGestureButtonText = useMemo(
+      () =>
+        enableContentPanningGesture
+          ? 'Disable Content Panning Gesture'
+          : 'Enable Content Panning Gesture',
+      [enableContentPanningGesture]
+    );
+    const enableHandlePanningGestureButtonText = useMemo(
+      () =>
+        enableHandlePanningGesture
+          ? 'Disable Handle Panning Gesture'
+          : 'Enable Handle Panning Gesture',
+      [enableHandlePanningGesture]
+    );
 
     // callbacks
     const handleSheetChange = useCallback(index => {
@@ -40,8 +58,11 @@ const createExampleScreen = ({ type, count = 20 }: ExampleScreenProps) =>
     const handleClosePress = useCallback(() => {
       bottomSheetRef.current?.close();
     }, []);
-    const handleEnablePress = useCallback(() => {
-      setEnabled(state => !state);
+    const handleEnableContentPanningGesturePress = useCallback(() => {
+      setEnableContentPanningGesture(state => !state);
+    }, []);
+    const handleEnableHandlePanningGesturePress = useCallback(() => {
+      setEnableHandlePanningGesture(state => !state);
     }, []);
 
     return (
@@ -77,16 +98,22 @@ const createExampleScreen = ({ type, count = 20 }: ExampleScreenProps) =>
           onPress={handleClosePress}
         />
         <Button
-          label={enableButtonText}
+          label={enableContentPanningGestureButtonText}
+          style={styles.buttonContainer}
+          onPress={handleEnableContentPanningGesturePress}
+        />
+        <Button
+          label={enableHandlePanningGestureButtonText}
           style={styles.buttonContainer}
-          onPress={handleEnablePress}
+          onPress={handleEnableHandlePanningGesturePress}
         />
         <BottomSheet
           ref={bottomSheetRef}
-          enabled={enabled}
           snapPoints={snapPoints}
           initialSnapIndex={1}
           animateOnMount={true}
+          enableContentPanningGesture={enableContentPanningGesture}
+          enableHandlePanningGesture={enableHandlePanningGesture}
           onChange={handleSheetChange}
         >
           <ContactList key={`${type}.list`} type={type} count={count} />