feat: added enabled prop (#35)

* chore: added enabled prop implementation * chore: updated examples * docs: updated readme file to include enabled prop
gorhom · Sep 24, 2020 · 7e14c2b · 7e14c2b
1 parent fea90a9
commit 7e14c2b
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -141,6 +141,12 @@ Top inset value helps to calculate percentage snap points values. usually comes
 
 > `required:` NO | `type:` number | `default:` 0
 
+#### `enabled`
+
+To enable or disable user interaction with the sheet.
+
+> `required:` NO | `type:` boolean | `default:` true
+
 #### `animationDuration`
 
 Snapping animation duration.

diff --git a/example/src/screens/BasicExample.tsx b/example/src/screens/BasicExample.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/stack';
 import Animated, {
@@ -13,6 +13,9 @@ import Button from '../components/button';
 import { ReText } from 'react-native-redash';
 
 const BasicExample = () => {
+  // state
+  const [enabled, setEnabled] = useState(true);
+
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
   const headerHeight = useHeaderHeight();
@@ -78,10 +81,17 @@ 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)} />
       <Animated.View pointerEvents="none" style={shadowOverlayStyle} />
       <BottomSheet
         ref={bottomSheetRef}
+        enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
         handleComponent={Handle}

diff --git a/example/src/screens/BasicExamples.tsx b/example/src/screens/BasicExamples.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, memo, useRef, useMemo } from 'react';
+import React, { useCallback, memo, useRef, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import ContactList from '../components/contactList';
@@ -13,12 +13,18 @@ interface ExampleScreenProps {
 
 const createExampleScreen = ({ type, count = 50 }: ExampleScreenProps) =>
   memo(() => {
+    // state
+    const [enabled, setEnabled] = useState(true);
+
     // hooks
     const bottomSheetRef = useRef<BottomSheet>(null);
     const headerHeight = useHeaderHeight();
 
     // variables
     const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
+    const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
+      enabled,
+    ]);
 
     // callbacks
     const handleSheetChange = useCallback(index => {
@@ -36,6 +42,9 @@ const createExampleScreen = ({ type, count = 50 }: ExampleScreenProps) =>
     const handleClosePress = useCallback(() => {
       bottomSheetRef.current?.close();
     }, []);
+    const handleEnablePress = useCallback(() => {
+      setEnabled(state => !state);
+    }, []);
 
     return (
       <View style={styles.container}>
@@ -57,20 +66,26 @@ const createExampleScreen = ({ type, count = 50 }: ExampleScreenProps) =>
         <Button
           label="Expand"
           style={styles.buttonContainer}
-          onPress={() => handleExpandPress()}
+          onPress={handleExpandPress}
         />
         <Button
           label="Collapse"
           style={styles.buttonContainer}
-          onPress={() => handleCollapsePress()}
+          onPress={handleCollapsePress}
         />
         <Button
           label="Close"
           style={styles.buttonContainer}
-          onPress={() => handleClosePress()}
+          onPress={handleClosePress}
+        />
+        <Button
+          label={enableButtonText}
+          style={styles.buttonContainer}
+          onPress={handleEnablePress}
         />
         <BottomSheet
           ref={bottomSheetRef}
+          enabled={enabled}
           snapPoints={snapPoints}
           initialSnapIndex={1}
           topInset={headerHeight}

diff --git a/example/src/screens/CustomHandleExample.tsx b/example/src/screens/CustomHandleExample.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/stack';
 import BottomSheet from '@gorhom/bottom-sheet';
@@ -7,14 +7,18 @@ import Button from '../components/button';
 import ContactList from '../components/contactList';
 
 const CustomHandleExample = () => {
+  // state
+  const [enabled, setEnabled] = useState(true);
+
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
   const headerHeight = useHeaderHeight();
 
   // variables
   const snapPoints = useMemo(() => [150, 300, 450], []);
-
-  // styles
+  const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
+    enabled,
+  ]);
 
   // callbacks
   const handleSnapPress = useCallback(index => {
@@ -29,6 +33,9 @@ const CustomHandleExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
+  const handleEnablePress = useCallback(() => {
+    setEnabled(state => !state);
+  }, []);
 
   // renders
   const renderHeader = useCallback(() => {
@@ -59,20 +66,26 @@ const CustomHandleExample = () => {
       <Button
         label="Expand"
         style={styles.buttonContainer}
-        onPress={() => handleExpandPress()}
+        onPress={handleExpandPress}
       />
       <Button
         label="Collapse"
         style={styles.buttonContainer}
-        onPress={() => handleCollapsePress()}
+        onPress={handleCollapsePress}
       />
       <Button
         label="Close"
         style={styles.buttonContainer}
-        onPress={() => handleClosePress()}
+        onPress={handleClosePress}
+      />
+      <Button
+        label={enableButtonText}
+        style={styles.buttonContainer}
+        onPress={handleEnablePress}
       />
       <BottomSheet
         ref={bottomSheetRef}
+        enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
         topInset={headerHeight}

diff --git a/example/src/screens/NavigatorExample.tsx b/example/src/screens/NavigatorExample.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
   useHeaderHeight,
@@ -70,12 +70,18 @@ const Navigator = () => {
 };
 
 const NavigatorExample = () => {
+  // state
+  const [enabled, setEnabled] = useState(true);
+
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
   const headerHeight = useHeaderHeight();
 
   // variables
   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
+  const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
+    enabled,
+  ]);
 
   // callbacks
   const handleSheetChange = useCallback(index => {
@@ -93,6 +99,9 @@ const NavigatorExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
+  const handleEnablePress = useCallback(() => {
+    setEnabled(state => !state);
+  }, []);
 
   // renders
   return (
@@ -115,20 +124,26 @@ const NavigatorExample = () => {
       <Button
         label="Expand"
         style={styles.buttonContainer}
-        onPress={() => handleExpandPress()}
+        onPress={handleExpandPress}
       />
       <Button
         label="Collapse"
         style={styles.buttonContainer}
-        onPress={() => handleCollapsePress()}
+        onPress={handleCollapsePress}
       />
       <Button
         label="Close"
         style={styles.buttonContainer}
-        onPress={() => handleClosePress()}
+        onPress={handleClosePress}
+      />
+      <Button
+        label={enableButtonText}
+        style={styles.buttonContainer}
+        onPress={handleEnablePress}
       />
       <BottomSheet
         ref={bottomSheetRef}
+        enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
         topInset={headerHeight}

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -75,6 +75,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       initialSnapIndex = 0,
       snapPoints: _snapPoints,
       topInset = 0,
+      enabled = true,
       // animated nodes callback
       animatedPosition: _animatedPosition,
       animatedPositionIndex: _animatedPositionIndex,
@@ -300,6 +301,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region
     const internalContextVariables = useMemo(
       () => ({
+        enabled,
         rootTapGestureRef,
         handlePanGestureState,
         handlePanGestureTranslationY,
@@ -313,7 +315,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         removeScrollableRef,
       }),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
+      [enabled]
     );
     const externalContextVariables = useMemo(
       () => ({
@@ -399,6 +401,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             )}
             <BottomSheetProvider value={externalContextVariables}>
               <PanGestureHandler
+                enabled={enabled}
                 ref={handlePanGestureRef}
                 simultaneousHandlers={rootTapGestureRef}
                 shouldCancelWhenOutside={false}

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -21,8 +21,15 @@ export interface BottomSheetProps extends BottomSheetAnimationConfigs {
   /**
    * Top inset value helps to calculate percentage snap points values. usually comes from `@react-navigation/stack` hook `useHeaderHeight` or from `react-native-safe-area-context` hook `useSafeArea`.
    * @type number
+   * @default 0
    */
   topInset?: number;
+  /**
+   * To enable or disable user interaction with the sheet.
+   * @type boolean
+   * @default true
+   */
+  enabled?: boolean;
   /**
    * Animated value to be used as a callback of the position node internally.
    * @type Animated.Value<number>

diff --git a/src/components/draggableView/DraggableView.tsx b/src/components/draggableView/DraggableView.tsx
@@ -18,6 +18,7 @@ const BottomSheetDraggableViewComponent = ({
 
   // hooks
   const {
+    enabled,
     rootTapGestureRef,
     handlePanGestureState,
     handlePanGestureTranslationY,
@@ -69,10 +70,10 @@ const BottomSheetDraggableViewComponent = ({
   );
 
   // effects
-
   return (
     <PanGestureHandler
       ref={panGestureRef}
+      enabled={enabled}
       simultaneousHandlers={simultaneousHandlers}
       shouldCancelWhenOutside={false}
       onGestureEvent={handleGestureEvent}

diff --git a/src/components/flatList/FlatList.tsx b/src/components/flatList/FlatList.tsx
@@ -43,7 +43,11 @@ const BottomSheetFlatListComponent = forwardRef(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal('FlatList');
-    const { rootTapGestureRef, decelerationRate } = useBottomSheetInternal();
+    const {
+      enabled,
+      rootTapGestureRef,
+      decelerationRate,
+    } = useBottomSheetInternal();
 
     // effects
     // @ts-ignore
@@ -59,6 +63,7 @@ const BottomSheetFlatListComponent = forwardRef(
       >
         <NativeViewGestureHandler
           ref={nativeGestureRef}
+          enabled={enabled}
           waitFor={rootTapGestureRef}
         >
           <AnimatedFlatList

diff --git a/src/components/scrollView/ScrollView.tsx b/src/components/scrollView/ScrollView.tsx
@@ -48,7 +48,11 @@ const BottomSheetScrollViewComponent = forwardRef(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal('ScrollView');
-    const { rootTapGestureRef, decelerationRate } = useBottomSheetInternal();
+    const {
+      enabled,
+      rootTapGestureRef,
+      decelerationRate,
+    } = useBottomSheetInternal();
 
     // effects
     // @ts-ignore
@@ -63,6 +67,7 @@ const BottomSheetScrollViewComponent = forwardRef(
       >
         <NativeViewGestureHandler
           ref={nativeGestureRef}
+          enabled={enabled}
           waitFor={rootTapGestureRef}
         >
           <AnimatedScrollView

diff --git a/src/components/sectionList/SectionList.tsx b/src/components/sectionList/SectionList.tsx
@@ -43,7 +43,11 @@ const BottomSheetSectionListComponent = forwardRef(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal('SectionList');
-    const { rootTapGestureRef, decelerationRate } = useBottomSheetInternal();
+    const {
+      enabled,
+      rootTapGestureRef,
+      decelerationRate,
+    } = useBottomSheetInternal();
     // effects
     // @ts-ignore
     useImperativeHandle(ref, () => scrollableRef.current!.getNode());
@@ -58,6 +62,7 @@ const BottomSheetSectionListComponent = forwardRef(
       >
         <NativeViewGestureHandler
           ref={nativeGestureRef}
+          enabled={enabled}
           waitFor={rootTapGestureRef}
         >
           <AnimatedSectionList

diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
@@ -4,6 +4,7 @@ import type Animated from 'react-native-reanimated';
 import { Scrollable, ScrollableRef } from '../types';
 
 export type BottomSheetInternalContextType = {
+  enabled: boolean;
   rootTapGestureRef: Ref<TapGestureHandler>;
   contentPanGestureState: Animated.Value<State>;
   contentPanGestureTranslationY: Animated.Value<number>;