From 016a01f3705c83c9903a3e28c875e7b90424a128 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Sun, 6 Jun 2021 13:50:41 +0100
Subject: [PATCH] feat: added pull to refresh implementaion

---
 .../components/contactList/ContactList.tsx    |  6 +-
 .../ContactListContainer.tsx                  | 51 --------------
 .../components/contactListContainer/index.ts  |  1 -
 .../CustomHandle.tsx}                         | 34 +++++++---
 example/src/components/customHandle/index.ts  |  1 +
 example/src/components/handle/index.ts        |  1 -
 .../components/headerHandle/HeaderHandle.tsx  | 49 ++++++++++++++
 example/src/components/headerHandle/index.ts  |  1 +
 .../src/screens/advanced/BackdropExample.tsx  | 10 ++-
 .../advanced/CustomBackgroundExample.tsx      | 18 ++---
 .../screens/advanced/CustomHandleExample.tsx  | 17 +++--
 .../advanced/DynamicSnapPointExample.tsx      |  1 -
 .../src/screens/advanced/FooterExample.tsx    |  2 +-
 .../advanced/KeyboardHandlingExample.tsx      |  6 +-
 .../screens/advanced/PullToRefreshExample.tsx | 58 ++++++++++++++++
 .../src/screens/advanced/ShadowExample.tsx    | 13 +++-
 example/src/screens/basic/BasicExamples.tsx   |  9 ---
 example/src/screens/modal/BackdropExample.tsx | 11 ++-
 example/src/screens/modal/SimpleExample.tsx   | 11 ++-
 example/src/screens/modal/StackExample.tsx    | 25 ++++---
 example/src/screens/screens.ts                |  5 ++
 src/components/bottomSheet/BottomSheet.tsx    | 12 +++-
 .../BottomSheetDraggableView.tsx              | 11 ++-
 .../bottomSheetDraggableView/types.d.ts       |  5 +-
 .../bottomSheetHandle/BottomSheetHandle.tsx   | 26 +++++--
 src/components/bottomSheetHandle/types.d.ts   | 24 +++++++
 .../BottomSheetRefreshControl.android.tsx     | 37 ++++++++++
 .../BottomSheetRefreshControl.tsx             |  1 +
 .../bottomSheetRefreshControl/index.ts        | 16 +++++
 .../createBottomSheetScrollableComponent.tsx  | 67 ++++++++++++++++++-
 .../bottomSheetScrollable/types.d.ts          |  8 +--
 src/components/view/View.tsx                  | 13 +---
 src/constants.ts                              |  6 +-
 src/contexts/internal.ts                      |  1 +
 src/hooks/useInteractivePanGestureHandler.ts  | 56 ++++++++++++----
 src/hooks/useScrollable.ts                    |  2 +
 src/hooks/useScrollableInternal.ts            | 23 ++++---
 src/index.ts                                  |  1 +
 38 files changed, 471 insertions(+), 168 deletions(-)
 delete mode 100644 example/src/components/contactListContainer/ContactListContainer.tsx
 delete mode 100644 example/src/components/contactListContainer/index.ts
 rename example/src/components/{handle/Handle.tsx => customHandle/CustomHandle.tsx} (80%)
 create mode 100644 example/src/components/customHandle/index.ts
 delete mode 100644 example/src/components/handle/index.ts
 create mode 100644 example/src/components/headerHandle/HeaderHandle.tsx
 create mode 100644 example/src/components/headerHandle/index.ts
 create mode 100644 example/src/screens/advanced/PullToRefreshExample.tsx
 create mode 100644 src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx
 create mode 100644 src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.tsx
 create mode 100644 src/components/bottomSheetRefreshControl/index.ts

diff --git a/example/src/components/contactList/ContactList.tsx b/example/src/components/contactList/ContactList.tsx
index 7ab6f2751..76287b25f 100644
--- a/example/src/components/contactList/ContactList.tsx
+++ b/example/src/components/contactList/ContactList.tsx
@@ -20,6 +20,7 @@ export interface ContactListProps {
   count?: number;
   style?: ViewStyle;
   onItemPress?: () => void;
+  onRefresh?: () => void;
 }
 
 const keyExtractor = (item: any, index: number) => `${item.name}.${index}`;
@@ -29,6 +30,7 @@ const handleGetCount = (data: any[]) => data.length;
 const ContactList = ({
   type,
   count = 25,
+  onRefresh,
   style,
   onItemPress,
 }: ContactListProps) => {
@@ -97,6 +99,8 @@ const ContactList = ({
     return (
       <BottomSheetFlatList
         data={data}
+        refreshing={false}
+        onRefresh={onRefresh}
         keyExtractor={keyExtractor}
         initialNumToRender={5}
         bounces={true}
@@ -182,7 +186,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   contentContainer: {
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
     overflow: 'visible',
   },
 });
diff --git a/example/src/components/contactListContainer/ContactListContainer.tsx b/example/src/components/contactListContainer/ContactListContainer.tsx
deleted file mode 100644
index 6c5b0334a..000000000
--- a/example/src/components/contactListContainer/ContactListContainer.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { StyleSheet, Text, View, ViewStyle } from 'react-native';
-import ContactList, { ContactListProps } from '../contactList';
-
-interface ContactListContainerProps extends Omit<ContactListProps, 'header'> {
-  title: string;
-  headerStyle?: ViewStyle;
-}
-
-const ContactListContainerComponent = ({
-  count,
-  type,
-  title,
-  headerStyle: _headerStyle,
-  onItemPress,
-}: ContactListContainerProps) => {
-  const headerStyle = useMemo(
-    () => [styles.headerContainer, _headerStyle],
-    [_headerStyle]
-  );
-  return (
-    <>
-      <View style={headerStyle}>
-        <Text style={styles.title}>{title}</Text>
-      </View>
-      <ContactList
-        key={`${type}.list`}
-        type={type}
-        count={count}
-        onItemPress={onItemPress}
-      />
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 36,
-    lineHeight: 46,
-    fontWeight: '800',
-  },
-  headerContainer: {
-    padding: 24,
-    backgroundColor: 'white',
-    zIndex: 99999,
-  },
-});
-
-const ContactListContainer = memo(ContactListContainerComponent);
-
-export default ContactListContainer;
diff --git a/example/src/components/contactListContainer/index.ts b/example/src/components/contactListContainer/index.ts
deleted file mode 100644
index 67c9f0411..000000000
--- a/example/src/components/contactListContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ContactListContainer';
diff --git a/example/src/components/handle/Handle.tsx b/example/src/components/customHandle/CustomHandle.tsx
similarity index 80%
rename from example/src/components/handle/Handle.tsx
rename to example/src/components/customHandle/CustomHandle.tsx
index e416b78b2..bb16e45fd 100644
--- a/example/src/components/handle/Handle.tsx
+++ b/example/src/components/customHandle/CustomHandle.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import Animated, {
   Extrapolate,
@@ -10,11 +10,16 @@ import Animated, {
 import { toRad } from 'react-native-redash';
 import { transformOrigin } from '../../utilities/transformOrigin';
 
-interface HandleProps extends BottomSheetHandleProps {
+interface CustomHandleProps extends BottomSheetHandleProps {
+  title: string;
   style?: StyleProp<ViewStyle>;
 }
 
-const Handle: React.FC<HandleProps> = ({ style, animatedIndex }) => {
+const CustomHandle: React.FC<CustomHandleProps> = ({
+  title,
+  style,
+  animatedIndex,
+}) => {
   //#region animations
 
   const indicatorTransformOriginY = useDerivedValue(() =>
@@ -23,7 +28,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedIndex }) => {
   //#endregion
 
   //#region styles
-  const containerStyle = useMemo(() => [styles.header, style], [style]);
+  const containerStyle = useMemo(() => [styles.container, style], [style]);
   const containerAnimatedStyle = useAnimatedStyle(() => {
     const borderTopRadius = interpolate(
       animatedIndex.value,
@@ -100,23 +105,25 @@ const Handle: React.FC<HandleProps> = ({ style, animatedIndex }) => {
       <Animated.View
         style={[rightIndicatorStyle, rightIndicatorAnimatedStyle]}
       />
+      <Text style={styles.title}>{title}</Text>
     </Animated.View>
   );
 };
 
-export default Handle;
+export default CustomHandle;
 
 const styles = StyleSheet.create({
-  header: {
+  container: {
     alignContent: 'center',
     alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-    paddingVertical: 14,
+    paddingBottom: 12,
+    paddingHorizontal: 16,
     borderBottomWidth: 1,
-    borderBottomColor: '#fff',
+    borderBottomColor: 'rgba(0,0,0,0.125)',
+    zIndex: 99999,
   },
   indicator: {
+    marginTop: 10,
     position: 'absolute',
     width: 10,
     height: 4,
@@ -130,4 +137,11 @@ const styles = StyleSheet.create({
     borderTopEndRadius: 2,
     borderBottomEndRadius: 2,
   },
+  title: {
+    marginTop: 26,
+    fontSize: 20,
+    lineHeight: 20,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
 });
diff --git a/example/src/components/customHandle/index.ts b/example/src/components/customHandle/index.ts
new file mode 100644
index 000000000..c9d91b754
--- /dev/null
+++ b/example/src/components/customHandle/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomHandle';
diff --git a/example/src/components/handle/index.ts b/example/src/components/handle/index.ts
deleted file mode 100644
index 1b3992686..000000000
--- a/example/src/components/handle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Handle';
diff --git a/example/src/components/headerHandle/HeaderHandle.tsx b/example/src/components/headerHandle/HeaderHandle.tsx
new file mode 100644
index 000000000..64770713f
--- /dev/null
+++ b/example/src/components/headerHandle/HeaderHandle.tsx
@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import {
+  BottomSheetHandle,
+  BottomSheetHandleProps,
+} from '@gorhom/bottom-sheet';
+
+interface HeaderHandleProps extends BottomSheetHandleProps {
+  children?: string | React.ReactNode | React.ReactNode[];
+}
+
+const HeaderHandle = ({ children, ...rest }: HeaderHandleProps) => {
+  return (
+    <BottomSheetHandle
+      style={styles.container}
+      indicatorStyle={styles.indicator}
+      {...rest}
+    >
+      {typeof children === 'string' ? (
+        <Text style={styles.title}>{children}</Text>
+      ) : (
+        children
+      )}
+    </BottomSheetHandle>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0,0,0,0.125)',
+    zIndex: 99999,
+  },
+  title: {
+    marginTop: 16,
+    fontSize: 20,
+    lineHeight: 20,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  indicator: {
+    height: 4,
+    opacity: 0.5,
+  },
+});
+
+export default memo(HeaderHandle);
diff --git a/example/src/components/headerHandle/index.ts b/example/src/components/headerHandle/index.ts
new file mode 100644
index 000000000..036408a2c
--- /dev/null
+++ b/example/src/components/headerHandle/index.ts
@@ -0,0 +1 @@
+export { default } from './HeaderHandle';
diff --git a/example/src/screens/advanced/BackdropExample.tsx b/example/src/screens/advanced/BackdropExample.tsx
index 0eb829481..45039012c 100644
--- a/example/src/screens/advanced/BackdropExample.tsx
+++ b/example/src/screens/advanced/BackdropExample.tsx
@@ -2,7 +2,8 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle';
 
 const BackdropExample = () => {
   // state
@@ -45,6 +46,10 @@ const BackdropExample = () => {
     ),
     [backdropPressBehavior]
   );
+  const renderHeaderHandle = useCallback(
+    props => <HeaderHandle {...props} children="Backdrop Example" />,
+    []
+  );
   return (
     <View style={styles.container}>
       <Button
@@ -58,8 +63,9 @@ const BackdropExample = () => {
         ref={bottomSheetRef}
         snapPoints={snapPoints}
         backdropComponent={renderBackdrop}
+        handleComponent={renderHeaderHandle}
       >
-        <ContactListContainer type="View" count={4} title="Backdrop Example" />
+        <ContactList type="FlatList" count={10} />
       </BottomSheet>
     </View>
   );
diff --git a/example/src/screens/advanced/CustomBackgroundExample.tsx b/example/src/screens/advanced/CustomBackgroundExample.tsx
index 2555d44ba..1ffb9ee90 100644
--- a/example/src/screens/advanced/CustomBackgroundExample.tsx
+++ b/example/src/screens/advanced/CustomBackgroundExample.tsx
@@ -3,7 +3,8 @@ import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import CustomBackground from '../../components/customBackground';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle';
 
 const CustomBackgroundExample = () => {
   // hooks
@@ -25,6 +26,12 @@ const CustomBackgroundExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
+
+  // render
+  const renderHeaderHandle = useCallback(
+    props => <HeaderHandle {...props} children="Custom Background Example" />,
+    []
+  );
   return (
     <View style={styles.container}>
       <Button label="Snap To 450" onPress={() => handleSnapPress(1)} />
@@ -34,17 +41,12 @@ const CustomBackgroundExample = () => {
       <Button label="Close" onPress={handleClosePress} />
       <BottomSheet
         ref={bottomSheetRef}
-        index={1}
         snapPoints={snapPoints}
         animateOnMount={true}
+        handleComponent={renderHeaderHandle}
         backgroundComponent={CustomBackground}
       >
-        <ContactListContainer
-          type="View"
-          count={3}
-          title="Custom Background Example"
-          headerStyle={styles.headerContainer}
-        />
+        <ContactList type="View" count={5} />
       </BottomSheet>
     </View>
   );
diff --git a/example/src/screens/advanced/CustomHandleExample.tsx b/example/src/screens/advanced/CustomHandleExample.tsx
index c93d25ede..10acf643b 100644
--- a/example/src/screens/advanced/CustomHandleExample.tsx
+++ b/example/src/screens/advanced/CustomHandleExample.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
-import Handle from '../../components/handle';
+import CustomHandle from '../../components/customHandle';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
 
 const CustomHandleExample = () => {
   // hooks
@@ -27,6 +27,10 @@ const CustomHandleExample = () => {
   }, []);
 
   // renders
+  const renderCustomHandle = useCallback(
+    props => <CustomHandle title="Custom Handle Example" {...props} />,
+    []
+  );
   return (
     <View style={styles.container}>
       <Button label="Snap To 450" onPress={() => handleSnapPress(2)} />
@@ -37,15 +41,10 @@ const CustomHandleExample = () => {
       <Button label="Close" onPress={handleClosePress} />
       <BottomSheet
         ref={bottomSheetRef}
-        index={1}
         snapPoints={snapPoints}
-        handleComponent={Handle}
+        handleComponent={renderCustomHandle}
       >
-        <ContactListContainer
-          count={10}
-          type="FlatList"
-          title="Custom Handle Example"
-        />
+        <ContactList count={10} type="FlatList" />
       </BottomSheet>
     </View>
   );
diff --git a/example/src/screens/advanced/DynamicSnapPointExample.tsx b/example/src/screens/advanced/DynamicSnapPointExample.tsx
index 11fa1472a..3104e5e0f 100644
--- a/example/src/screens/advanced/DynamicSnapPointExample.tsx
+++ b/example/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -66,7 +66,6 @@ const DynamicSnapPointExample = () => {
         index={1}
         snapPoints={snapPoints}
         animateOnMount={true}
-        animationDuration={250}
       >
         <BottomSheetView
           style={contentContainerStyle}
diff --git a/example/src/screens/advanced/FooterExample.tsx b/example/src/screens/advanced/FooterExample.tsx
index 9e65dea92..a85e474bb 100644
--- a/example/src/screens/advanced/FooterExample.tsx
+++ b/example/src/screens/advanced/FooterExample.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import BottomSheet, { BottomSheetFooter } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import SearchHandle from '../../components/searchHandle';
 import Button from '../../components/button';
 import ContactList from '../../components/contactList';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const FooterExample = () => {
   // state
diff --git a/example/src/screens/advanced/KeyboardHandlingExample.tsx b/example/src/screens/advanced/KeyboardHandlingExample.tsx
index 822dbb545..34d360b17 100644
--- a/example/src/screens/advanced/KeyboardHandlingExample.tsx
+++ b/example/src/screens/advanced/KeyboardHandlingExample.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
-import SearchHandle from '../../components/searchHandle';
+import SearchHandle, {
+  SEARCH_HANDLE_HEIGHT,
+} from '../../components/searchHandle';
 import Button from '../../components/button';
 import ContactList from '../../components/contactList';
 
@@ -16,7 +18,7 @@ const KeyboardHandlingExample = () => {
   const bottomSheetRef = useRef<BottomSheet>(null);
 
   // variables
-  const snapPoints = useMemo(() => [100, 300], []);
+  const snapPoints = useMemo(() => [SEARCH_HANDLE_HEIGHT, 300], []);
 
   // callbacks
   const handleToggleKeyboardBehavior = useCallback(() => {
diff --git a/example/src/screens/advanced/PullToRefreshExample.tsx b/example/src/screens/advanced/PullToRefreshExample.tsx
new file mode 100644
index 000000000..b8f081db0
--- /dev/null
+++ b/example/src/screens/advanced/PullToRefreshExample.tsx
@@ -0,0 +1,58 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+import Button from '../../components/button';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle/HeaderHandle';
+
+const PullToRefreshExample = () => {
+  // hooks
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  // variables
+  const snapPoints = useMemo(() => ['25%', '50%'], []);
+
+  // callbacks
+  const handleRefresh = useCallback(() => {
+    // eslint-disable-next-line no-console
+    console.log('handleRefresh');
+  }, []);
+  const handleExpandPress = useCallback(() => {
+    bottomSheetRef.current?.expand();
+  }, []);
+  const handleCollapsePress = useCallback(() => {
+    bottomSheetRef.current?.collapse();
+  }, []);
+  const handleClosePress = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  // renders
+  const renderHeaderHandle = useCallback(
+    props => <HeaderHandle {...props} children="Pull To Refresh Example" />,
+    []
+  );
+  return (
+    <View style={styles.container}>
+      <Button label="Expand" onPress={handleExpandPress} />
+      <Button label="Collapse" onPress={handleCollapsePress} />
+      <Button label="Close" onPress={handleClosePress} />
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        handleComponent={renderHeaderHandle}
+      >
+        <ContactList type="FlatList" count={15} onRefresh={handleRefresh} />
+      </BottomSheet>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});
+
+export default PullToRefreshExample;
diff --git a/example/src/screens/advanced/ShadowExample.tsx b/example/src/screens/advanced/ShadowExample.tsx
index 4f016fb89..e18acc5e0 100644
--- a/example/src/screens/advanced/ShadowExample.tsx
+++ b/example/src/screens/advanced/ShadowExample.tsx
@@ -3,7 +3,8 @@ import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import { useShowcaseTheme } from '@gorhom/showcase-template';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle';
 
 const ShadowExample = () => {
   // hooks
@@ -34,6 +35,10 @@ const ShadowExample = () => {
   }, []);
 
   // renders
+  const renderHeaderHandle = useCallback(
+    props => <HeaderHandle {...props} children="Shadow Example" />,
+    []
+  );
   return (
     <View style={styles.container}>
       <Button label="Expand" onPress={handleExpandPress} />
@@ -43,9 +48,11 @@ const ShadowExample = () => {
       <BottomSheet
         ref={bottomSheetRef}
         snapPoints={snapPoints}
+        animateOnMount={true}
+        handleComponent={renderHeaderHandle}
         style={sheetStyle}
       >
-        <ContactListContainer type="View" count={4} title="Shadow Example" />
+        <ContactList type="View" count={3} />
       </BottomSheet>
     </View>
   );
@@ -65,7 +72,7 @@ const styles = StyleSheet.create({
       width: 0,
       height: 12,
     },
-    shadowOpacity: 0.58,
+    shadowOpacity: 0.75,
     shadowRadius: 16.0,
 
     elevation: 24,
diff --git a/example/src/screens/basic/BasicExamples.tsx b/example/src/screens/basic/BasicExamples.tsx
index 832c9e4c8..52e0aa097 100644
--- a/example/src/screens/basic/BasicExamples.tsx
+++ b/example/src/screens/basic/BasicExamples.tsx
@@ -118,15 +118,6 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 24,
   },
-  title: {
-    fontSize: 46,
-    lineHeight: 46,
-    fontWeight: '800',
-  },
-  headerContainer: {
-    paddingVertical: 24,
-    backgroundColor: 'white',
-  },
 });
 
 export const FlatListExampleScreen = createExampleScreen({
diff --git a/example/src/screens/modal/BackdropExample.tsx b/example/src/screens/modal/BackdropExample.tsx
index 8b770b3fb..2e4fcfe68 100644
--- a/example/src/screens/modal/BackdropExample.tsx
+++ b/example/src/screens/modal/BackdropExample.tsx
@@ -6,7 +6,8 @@ import {
   BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle';
 import withModalProvider from '../withModalProvider';
 
 const BackdropExample = () => {
@@ -56,6 +57,11 @@ const BackdropExample = () => {
     ),
     [backdropPressBehavior]
   );
+
+  const renderHeaderHandle = useCallback(
+    props => <HeaderHandle {...props} children="Modal With Backdrop Example" />,
+    []
+  );
   return (
     <View style={styles.container}>
       <Button label="Present Modal" onPress={handlePresentPress} />
@@ -70,9 +76,10 @@ const BackdropExample = () => {
         ref={bottomSheetRef}
         snapPoints={snapPoints}
         onDismiss={handleDismiss}
+        handleComponent={renderHeaderHandle}
         backdropComponent={renderBackdrop}
       >
-        <ContactListContainer title="Modal View" type="View" />
+        <ContactList type="View" count={5} />
       </BottomSheetModal>
     </View>
   );
diff --git a/example/src/screens/modal/SimpleExample.tsx b/example/src/screens/modal/SimpleExample.tsx
index d0bdb2c4c..98f9e3340 100644
--- a/example/src/screens/modal/SimpleExample.tsx
+++ b/example/src/screens/modal/SimpleExample.tsx
@@ -2,7 +2,8 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle';
 import withModalProvider from '../withModalProvider';
 
 const SimpleExample = () => {
@@ -50,6 +51,10 @@ const SimpleExample = () => {
   //#endregion
 
   // renders
+  const renderHeaderHandle = useCallback(
+    props => <HeaderHandle {...props} children="Modal Example" />,
+    []
+  );
   return (
     <View style={styles.container}>
       <Button label="Present Modal" onPress={handlePresentPress} />
@@ -72,13 +77,13 @@ const SimpleExample = () => {
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        animationDuration={250}
         enablePanDownToClose={enablePanDownToClose}
         enableDismissOnClose={enableDismissOnClose}
         onDismiss={handleDismiss}
         onChange={handleChange}
+        handleComponent={renderHeaderHandle}
       >
-        <ContactListContainer title="Modal FlatList" count={3} type="View" />
+        <ContactList count={4} type="View" />
       </BottomSheetModal>
     </View>
   );
diff --git a/example/src/screens/modal/StackExample.tsx b/example/src/screens/modal/StackExample.tsx
index 55736c39d..2d6e5d615 100644
--- a/example/src/screens/modal/StackExample.tsx
+++ b/example/src/screens/modal/StackExample.tsx
@@ -2,7 +2,8 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
-import ContactListContainer from '../../components/contactListContainer';
+import ContactList from '../../components/contactList';
+import HeaderHandle from '../../components/headerHandle';
 import withModalProvider from '../withModalProvider';
 
 const StackExample = () => {
@@ -56,14 +57,13 @@ const StackExample = () => {
   }, [dismiss]);
 
   // renders
+  const renderHeaderHandle = useCallback(
+    (title: string) => (props: any) =>
+      <HeaderHandle {...props} children={title} />,
+    []
+  );
   const renderBottomSheetContent = useCallback(
-    (title, onPress) => (
-      <ContactListContainer
-        title={title}
-        type="FlatList"
-        onItemPress={onPress}
-      />
-    ),
+    onPress => <ContactList type="FlatList" onItemPress={onPress} />,
     []
   );
   return (
@@ -81,14 +81,16 @@ const StackExample = () => {
         name="A"
         ref={bottomSheetModalARef}
         snapPoints={snapPoints}
-        children={renderBottomSheetContent('Modal A', handlePresentBPress)}
+        handleComponent={renderHeaderHandle('Modal A')}
+        children={renderBottomSheetContent(handlePresentBPress)}
       />
 
       <BottomSheetModal
         name="B"
         ref={bottomSheetModalBRef}
         snapPoints={snapPoints}
-        children={renderBottomSheetContent('Modal B', handlePresentCPress)}
+        handleComponent={renderHeaderHandle('Modal B')}
+        children={renderBottomSheetContent(handlePresentCPress)}
       />
 
       <BottomSheetModal
@@ -97,7 +99,8 @@ const StackExample = () => {
         index={1}
         snapPoints={snapPoints}
         enablePanDownToClose={false}
-        children={renderBottomSheetContent('Modal C', handleDismissCPress)}
+        handleComponent={renderHeaderHandle('Modal C')}
+        children={renderBottomSheetContent(handleDismissCPress)}
       />
     </View>
   );
diff --git a/example/src/screens/screens.ts b/example/src/screens/screens.ts
index 0999455ba..5d7be6003 100644
--- a/example/src/screens/screens.ts
+++ b/example/src/screens/screens.ts
@@ -92,6 +92,11 @@ export const screens = [
         slug: 'Advanced/ShadowExample',
         getScreen: () => require('./advanced/ShadowExample').default,
       },
+      {
+        name: 'Pull To Refresh',
+        slug: 'Advanced/PullToRefreshExample',
+        getScreen: () => require('./advanced/PullToRefreshExample').default,
+      },
       {
         name: 'Footer',
         slug: 'Advanced/FooterExample',
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index fb960ce96..9f6cd55ef 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -39,7 +39,7 @@ import BottomSheetBackgroundContainer from '../bottomSheetBackgroundContainer';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
 // import BottomSheetDebugView from '../bottomSheetDebugView';
 import {
-  GESTURE,
+  GESTURE_SOURCE,
   ANIMATION_STATE,
   KEYBOARD_STATE,
   KEYBOARD_BEHAVIOR,
@@ -242,6 +242,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region hooks variables
     // scrollable variables
     const {
+      isScrollableRefreshable,
       scrollableContentOffsetY,
       setScrollableRef,
       removeScrollableRef,
@@ -596,7 +597,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region gesture interaction hooks
     const [contentPanGestureHandler, contentPanGestureState] =
       useInteractivePanGestureHandler({
-        type: GESTURE.CONTENT,
+        type: GESTURE_SOURCE.SCROLLABLE,
         enableOverDrag,
         enablePanDownToClose,
         overDragResistanceFactor,
@@ -607,12 +608,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedSnapPoints,
         animatedContainerHeight,
         isInTemporaryPosition,
+        isScrollableRefreshable,
         scrollableContentOffsetY,
         animateToPoint: animateToPosition,
       });
     const [handlePanGestureHandler, handlePanGestureState] =
       useInteractivePanGestureHandler({
-        type: GESTURE.HANDLE,
+        type: GESTURE_SOURCE.HANDLE,
         enableOverDrag,
         enablePanDownToClose,
         overDragResistanceFactor,
@@ -623,6 +625,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedSnapPoints,
         animatedContainerHeight,
         isInTemporaryPosition,
+        isScrollableRefreshable,
         scrollableContentOffsetY,
         animateToPoint: animateToPosition,
       });
@@ -855,6 +858,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedContainerHeight,
         scrollableContentOffsetY,
         isInTemporaryPosition,
+        isScrollableRefreshable,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
         waitFor: _providedWaitFor,
@@ -885,6 +889,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         shouldHandleKeyboardEvents,
         animatedScrollableState,
         scrollableContentOffsetY,
+        isScrollableRefreshable,
         isInTemporaryPosition,
         enableContentPanningGesture,
         _providedSimultaneousHandlers,
@@ -1270,6 +1275,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               // bottomInset,
               animatedSheetState,
               animatedScrollableState,
+              isScrollableRefreshable,
               scrollableContentOffsetY,
               // keyboardState,
               // animatedIndex,
diff --git a/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx b/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
index 5aa397db2..da236d71c 100644
--- a/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
+++ b/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
@@ -7,6 +7,7 @@ import { styles } from './styles';
 
 const BottomSheetDraggableViewComponent = ({
   nativeGestureRef,
+  refreshControlGestureRef,
   style,
   children,
   ...rest
@@ -34,6 +35,10 @@ const BottomSheetDraggableViewComponent = ({
       refs.push(nativeGestureRef);
     }
 
+    if (refreshControlGestureRef) {
+      refs.push(refreshControlGestureRef);
+    }
+
     if (_providedSimultaneousHandlers) {
       if (Array.isArray(_providedSimultaneousHandlers)) {
         refs.push(..._providedSimultaneousHandlers);
@@ -43,7 +48,11 @@ const BottomSheetDraggableViewComponent = ({
     }
 
     return refs;
-  }, [_providedSimultaneousHandlers, nativeGestureRef]);
+  }, [
+    _providedSimultaneousHandlers,
+    nativeGestureRef,
+    refreshControlGestureRef,
+  ]);
 
   // styles
   const containerStyle = useMemo(() => {
diff --git a/src/components/bottomSheetDraggableView/types.d.ts b/src/components/bottomSheetDraggableView/types.d.ts
index 6d85a9349..b69bc4f2a 100644
--- a/src/components/bottomSheetDraggableView/types.d.ts
+++ b/src/components/bottomSheetDraggableView/types.d.ts
@@ -1,9 +1,10 @@
 import type { ViewProps as RNViewProps } from 'react-native';
 import type { NativeViewGestureHandler } from 'react-native-gesture-handler';
-import type { GESTURE } from '../../constants';
+import type { GESTURE_SOURCE } from '../../constants';
 
 export type BottomSheetDraggableViewProps = RNViewProps & {
   children: React.ReactNode[] | React.ReactNode;
-  gestureType?: keyof typeof GESTURE;
+  gestureType?: GESTURE_SOURCE;
   nativeGestureRef?: Ref<NativeViewGestureHandler> | null;
+  refreshControlGestureRef?: Ref<NativeViewGestureHandler> | null;
 };
diff --git a/src/components/bottomSheetHandle/BottomSheetHandle.tsx b/src/components/bottomSheetHandle/BottomSheetHandle.tsx
index db131212a..b58573048 100644
--- a/src/components/bottomSheetHandle/BottomSheetHandle.tsx
+++ b/src/components/bottomSheetHandle/BottomSheetHandle.tsx
@@ -1,12 +1,26 @@
-import React, { memo } from 'react';
-import { View } from 'react-native';
+import React, { memo, useMemo } from 'react';
+import Animated from 'react-native-reanimated';
 import { styles } from './styles';
+import type { BottomSheetDefaultHandleProps } from './types';
 
-const BottomSheetHandleComponent = () => {
+const BottomSheetHandleComponent = ({
+  style,
+  indicatorStyle: _indicatorStyle,
+  children,
+}: BottomSheetDefaultHandleProps) => {
+  // styles
+  const containerStyle = useMemo(() => [styles.container, style], [style]);
+  const indicatorStyle = useMemo(
+    () => [styles.indicator, _indicatorStyle],
+    [_indicatorStyle]
+  );
+
+  // render
   return (
-    <View style={styles.container}>
-      <View style={styles.indicator} />
-    </View>
+    <Animated.View style={containerStyle}>
+      <Animated.View style={indicatorStyle} />
+      {children}
+    </Animated.View>
   );
 };
 
diff --git a/src/components/bottomSheetHandle/types.d.ts b/src/components/bottomSheetHandle/types.d.ts
index b80113f2b..2f643d645 100644
--- a/src/components/bottomSheetHandle/types.d.ts
+++ b/src/components/bottomSheetHandle/types.d.ts
@@ -1,3 +1,27 @@
+import type React from 'react';
+import type { ViewStyle } from 'react-native';
+import type Animated from 'react-native-reanimated';
 import type { BottomSheetVariables } from '../../types';
 
 export interface BottomSheetHandleProps extends BottomSheetVariables {}
+
+export interface BottomSheetDefaultHandleProps extends BottomSheetHandleProps {
+  /**
+   * View style to be applied to the handle container.
+   * @type Animated.AnimateStyle<ViewStyle> | ViewStyle
+   * @default undefined
+   */
+  style?: ViewStyle | Animated.AnimateStyle<ViewStyle>;
+  /**
+   * View style to be applied to the handle indicator.
+   * @type Animated.AnimateStyle<ViewStyle> | ViewStyle
+   * @default undefined
+   */
+  indicatorStyle?: ViewStyle | Animated.AnimateStyle<ViewStyle>;
+  /**
+   * Content to be added below the indicator.
+   * @type React.ReactNode | React.ReactNode[];
+   * @default undefined
+   */
+  children?: React.ReactNode | React.ReactNode[];
+}
diff --git a/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx b/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx
new file mode 100644
index 000000000..be502259c
--- /dev/null
+++ b/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef, memo } from 'react';
+import { RefreshControl, RefreshControlProps } from 'react-native';
+import { NativeViewGestureHandler } from 'react-native-gesture-handler';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { SCROLLABLE_STATE } from '../../constants';
+import { useBottomSheetInternal } from '../../hooks';
+
+const AnimatedRefreshControl = Animated.createAnimatedComponent(RefreshControl);
+
+const BottomSheetRefreshControlComponent = forwardRef<
+  NativeViewGestureHandler,
+  RefreshControlProps
+>(({ onRefresh, ...rest }, ref) => {
+  // hooks
+  const { animatedScrollableState } = useBottomSheetInternal();
+
+  // variables
+  const animatedProps = useAnimatedProps(() => ({
+    enabled: animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED,
+  }));
+
+  // render
+  return (
+    <NativeViewGestureHandler ref={ref} shouldCancelWhenOutside={false}>
+      <AnimatedRefreshControl
+        {...rest}
+        onRefresh={onRefresh}
+        animatedProps={animatedProps}
+      />
+    </NativeViewGestureHandler>
+  );
+});
+
+const BottomSheetRefreshControl = memo(BottomSheetRefreshControlComponent);
+BottomSheetRefreshControl.displayName = 'BottomSheetRefreshControl';
+
+export default BottomSheetRefreshControl;
diff --git a/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.tsx b/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.tsx
new file mode 100644
index 000000000..461f67a0a
--- /dev/null
+++ b/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.tsx
@@ -0,0 +1 @@
+export default () => null;
diff --git a/src/components/bottomSheetRefreshControl/index.ts b/src/components/bottomSheetRefreshControl/index.ts
new file mode 100644
index 000000000..ac07963d2
--- /dev/null
+++ b/src/components/bottomSheetRefreshControl/index.ts
@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { RefreshControlProps } from 'react-native';
+import type { NativeViewGestureHandlerProps } from 'react-native-gesture-handler';
+import BottomSheetRefreshControl from './BottomSheetRefreshControl';
+
+export default BottomSheetRefreshControl as any as React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    RefreshControlProps & {
+      children: React.ReactNode | React.ReactNode[];
+    } & React.RefAttributes<
+        React.ComponentType<
+          NativeViewGestureHandlerProps & React.RefAttributes<any>
+        >
+      >
+  >
+>;
diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
index 5ee1ea164..ec79fe768 100644
--- a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
+++ b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -8,8 +8,10 @@ import React, {
 import { useAnimatedStyle } from 'react-native-reanimated';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
+import BottomSheetRefreshControl from '../bottomSheetRefreshControl';
 import { useScrollableInternal, useBottomSheetInternal } from '../../hooks';
 import { styles } from './styles';
+import { Platform } from 'react-native';
 
 export function createBottomSheetScrollableComponent<T, P>(
   ScrollableComponent: any
@@ -20,11 +22,17 @@ export function createBottomSheetScrollableComponent<T, P>(
       focusHook: useFocusHook = useEffect,
       overScrollMode = 'never',
       style,
+      // refresh control
+      refreshing,
+      onRefresh,
+      progressViewOffset,
+      refreshControl,
       ...rest
     }: any = props;
 
     //#region refs
     const nativeGestureRef = useRef<NativeViewGestureHandler>(null);
+    const refreshControlGestureRef = useRef<NativeViewGestureHandler>(null);
     //#endregion
 
     //#region hooks
@@ -33,7 +41,7 @@ export function createBottomSheetScrollableComponent<T, P>(
       scrollableAnimatedProps,
       handleScrollEvent,
       handleSettingScrollable,
-    } = useScrollableInternal();
+    } = useScrollableInternal(onRefresh !== undefined);
     const { enableContentPanningGesture, animatedFooterHeight } =
       useBottomSheetInternal();
     //#endregion
@@ -58,6 +66,59 @@ export function createBottomSheetScrollableComponent<T, P>(
     //#endregion
 
     //#region render
+    if (Platform.OS === 'android') {
+      return (
+        <BottomSheetDraggableView
+          nativeGestureRef={nativeGestureRef}
+          refreshControlGestureRef={refreshControlGestureRef}
+          style={styles.container}
+        >
+          {onRefresh ? (
+            <BottomSheetRefreshControl
+              ref={refreshControlGestureRef}
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              progressViewOffset={progressViewOffset}
+              style={styles.container}
+            >
+              <NativeViewGestureHandler
+                ref={nativeGestureRef}
+                enabled={enableContentPanningGesture}
+                shouldCancelWhenOutside={false}
+              >
+                <ScrollableComponent
+                  {...rest}
+                  // @ts-ignore
+                  ref={scrollableRef}
+                  overScrollMode={overScrollMode}
+                  scrollEventThrottle={16}
+                  onScroll={handleScrollEvent}
+                  animatedProps={scrollableAnimatedProps}
+                  style={containerStyle}
+                />
+              </NativeViewGestureHandler>
+            </BottomSheetRefreshControl>
+          ) : (
+            <NativeViewGestureHandler
+              ref={nativeGestureRef}
+              enabled={enableContentPanningGesture}
+              shouldCancelWhenOutside={false}
+            >
+              <ScrollableComponent
+                {...rest}
+                // @ts-ignore
+                ref={scrollableRef}
+                overScrollMode={overScrollMode}
+                scrollEventThrottle={16}
+                onScroll={handleScrollEvent}
+                animatedProps={scrollableAnimatedProps}
+                style={containerStyle}
+              />
+            </NativeViewGestureHandler>
+          )}
+        </BottomSheetDraggableView>
+      );
+    }
     return (
       <BottomSheetDraggableView
         nativeGestureRef={nativeGestureRef}
@@ -74,6 +135,10 @@ export function createBottomSheetScrollableComponent<T, P>(
             ref={scrollableRef}
             overScrollMode={overScrollMode}
             scrollEventThrottle={16}
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            progressViewOffset={progressViewOffset}
+            refreshControl={refreshControl}
             onScroll={handleScrollEvent}
             animatedProps={scrollableAnimatedProps}
             style={containerStyle}
diff --git a/src/components/bottomSheetScrollable/types.d.ts b/src/components/bottomSheetScrollable/types.d.ts
index 68c7caf67..08686b9eb 100644
--- a/src/components/bottomSheetScrollable/types.d.ts
+++ b/src/components/bottomSheetScrollable/types.d.ts
@@ -29,7 +29,7 @@ export type ScrollableProps<T> =
 //#region FlatList
 export type BottomSheetFlatListProps<T> = Omit<
   Animated.AnimateProps<FlatListProps<T>>,
-  'decelerationRate' | 'onScrollBeginDrag' | 'scrollEventThrottle'
+  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetFlatListMethods>;
@@ -107,7 +107,7 @@ export interface BottomSheetFlatListMethods {
 //#region ScrollView
 export type BottomSheetScrollViewProps = Omit<
   Animated.AnimateProps<ScrollViewProps>,
-  'decelerationRate' | 'onScrollBeginDrag' | 'scrollEventThrottle'
+  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetScrollViewMethods>;
@@ -172,7 +172,7 @@ export interface BottomSheetScrollViewMethods {
 //#region SectionList
 type BottomSheetSectionListProps<ItemT, SectionT> = Omit<
   Animated.AnimateProps<SectionListProps<ItemT, SectionT>>,
-  'decelerationRate' | 'onScrollBeginDrag' | 'scrollEventThrottle'
+  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetSectionListMethods>;
@@ -215,7 +215,7 @@ export interface BottomSheetSectionListMethods {
 //#region
 export type BottomSheetVirtualizedListProps<T> = Omit<
   Animated.AnimateProps<VirtualizedListProps<T>>,
-  'decelerationRate' | 'onScrollBeginDrag' | 'scrollEventThrottle'
+  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetVirtualizedListMethods>;
diff --git a/src/components/view/View.tsx b/src/components/view/View.tsx
index 261f8a98e..3e73c1e49 100644
--- a/src/components/view/View.tsx
+++ b/src/components/view/View.tsx
@@ -8,20 +8,13 @@ const BottomSheetViewComponent = ({
   style,
   focusHook: useFocusHook = useEffect,
   children,
-  ...reset
+  ...rest
 }: BottomSheetViewProps) => {
   // hooks
   const { scrollableContentOffsetY } = useBottomSheetInternal();
 
   // styles
-  const containerStyle = useMemo(
-    () => ({
-      ...styles.container,
-      // @ts-ignore
-      ...style,
-    }),
-    [style]
-  );
+  const containerStyle = useMemo(() => [styles.container, style], [style]);
 
   // callback
   const handleSettingScrollable = useCallback(() => {
@@ -33,7 +26,7 @@ const BottomSheetViewComponent = ({
 
   //render
   return (
-    <RNView style={containerStyle} {...reset}>
+    <RNView style={containerStyle} {...rest}>
       {children}
     </RNView>
   );
diff --git a/src/constants.ts b/src/constants.ts
index e2a71ff01..72d35bf18 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -2,8 +2,8 @@ import { Dimensions, Platform } from 'react-native';
 
 const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window');
 
-enum GESTURE {
-  CONTENT = 0,
+enum GESTURE_SOURCE {
+  SCROLLABLE = 0,
   HANDLE,
 }
 
@@ -71,7 +71,7 @@ const KEYBOARD_INPUT_MODE = {
 };
 
 export {
-  GESTURE,
+  GESTURE_SOURCE,
   SHEET_STATE,
   ANIMATION_STATE,
   SCROLLABLE_STATE,
diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
index 3c589a01a..ffdb83331 100644
--- a/src/contexts/internal.ts
+++ b/src/contexts/internal.ts
@@ -39,6 +39,7 @@ export interface BottomSheetInternalContextType
   animatedFooterHeight: Animated.SharedValue<number>;
   animatedHandleHeight: Animated.SharedValue<number>;
   animatedKeyboardHeight: Animated.SharedValue<number>;
+  isScrollableRefreshable: Animated.SharedValue<boolean>;
   scrollableContentOffsetY: Animated.SharedValue<number>;
   shouldHandleKeyboardEvents: Animated.SharedValue<boolean>;
 
diff --git a/src/hooks/useInteractivePanGestureHandler.ts b/src/hooks/useInteractivePanGestureHandler.ts
index 9980f6ee8..a0d269cde 100644
--- a/src/hooks/useInteractivePanGestureHandler.ts
+++ b/src/hooks/useInteractivePanGestureHandler.ts
@@ -11,7 +11,7 @@ import {
 } from 'react-native-gesture-handler';
 import { clamp, snapPoint } from 'react-native-redash';
 import {
-  GESTURE,
+  GESTURE_SOURCE,
   KEYBOARD_BEHAVIOR,
   KEYBOARD_DISMISS_THRESHOLD,
   KEYBOARD_STATE,
@@ -19,7 +19,7 @@ import {
 } from '../constants';
 
 export interface useInteractivePanGestureHandlerConfigs {
-  type: GESTURE;
+  type: GESTURE_SOURCE;
   enableOverDrag: boolean;
   enablePanDownToClose: boolean;
   overDragResistanceFactor: number;
@@ -31,6 +31,7 @@ export interface useInteractivePanGestureHandlerConfigs {
   animatedPosition: Animated.SharedValue<number>;
   animatedContainerHeight: Animated.SharedValue<number>;
   scrollableContentOffsetY: Animated.SharedValue<number>;
+  isScrollableRefreshable: Animated.SharedValue<boolean>;
   animateToPoint: (point: number, velocity: number) => void;
 }
 
@@ -53,6 +54,7 @@ export const useInteractivePanGestureHandler = ({
   animatedSnapPoints,
   animatedContainerHeight,
   scrollableContentOffsetY,
+  isScrollableRefreshable,
   animateToPoint,
 }: useInteractivePanGestureHandlerConfigs): [
   (event: PanGestureHandlerGestureEvent) => void,
@@ -120,6 +122,17 @@ export const useInteractivePanGestureHandler = ({
         ? animatedContainerHeight.value
         : animatedSnapPoints.value[0];
 
+      /**
+       * if scrollable is refreshable and sheet position at the highest
+       * point, then do not interact with current gesture.
+       */
+      if (
+        type === GESTURE_SOURCE.SCROLLABLE &&
+        isScrollableRefreshable.value &&
+        animatedPosition.value === highestSnapPoint
+      ) {
+        return;
+      }
       /**
        * a negative scrollable content offset to be subtracted from accumulated
        * current position and gesture translation Y to allow user to drag the sheet,
@@ -128,7 +141,7 @@ export const useInteractivePanGestureHandler = ({
        */
       const negativeScrollableContentOffset =
         (context.startPosition === highestSnapPoint &&
-          type === GESTURE.CONTENT) ||
+          type === GESTURE_SOURCE.SCROLLABLE) ||
         !context.isScrollablePositionLocked
           ? scrollableContentOffsetY.value * -1
           : 0;
@@ -162,7 +175,7 @@ export const useInteractivePanGestureHandler = ({
        */
       if (
         context.isScrollablePositionLocked &&
-        type === GESTURE.CONTENT &&
+        type === GESTURE_SOURCE.SCROLLABLE &&
         animatedPosition.value === highestSnapPoint
       ) {
         context.isScrollablePositionLocked = false;
@@ -187,7 +200,10 @@ export const useInteractivePanGestureHandler = ({
        * over-drag implementation.
        */
       if (enableOverDrag) {
-        if (type === GESTURE.HANDLE && draggedPosition <= highestSnapPoint) {
+        if (
+          type === GESTURE_SOURCE.HANDLE &&
+          draggedPosition < highestSnapPoint
+        ) {
           const resistedPosition =
             highestSnapPoint -
             Math.sqrt(1 + (highestSnapPoint - draggedPosition)) *
@@ -196,7 +212,10 @@ export const useInteractivePanGestureHandler = ({
           return;
         }
 
-        if (type === GESTURE.HANDLE && draggedPosition > lowestSnapPoint) {
+        if (
+          type === GESTURE_SOURCE.HANDLE &&
+          draggedPosition > lowestSnapPoint
+        ) {
           const resistedPosition =
             lowestSnapPoint +
             Math.sqrt(1 + (draggedPosition - lowestSnapPoint)) *
@@ -206,7 +225,7 @@ export const useInteractivePanGestureHandler = ({
         }
 
         if (
-          type === GESTURE.CONTENT &&
+          type === GESTURE_SOURCE.SCROLLABLE &&
           draggedPosition + negativeScrollableContentOffset > lowestSnapPoint
         ) {
           const resistedPosition =
@@ -227,6 +246,20 @@ export const useInteractivePanGestureHandler = ({
     },
     onEnd: ({ state }, context) => {
       gestureState.value = state;
+      let highestSnapPoint =
+        animatedSnapPoints.value[animatedSnapPoints.value.length - 1];
+
+      /**
+       * if scrollable is refreshable and sheet position at the highest
+       * point, then do not interact with current gesture.
+       */
+      if (
+        type === GESTURE_SOURCE.SCROLLABLE &&
+        isScrollableRefreshable.value &&
+        animatedPosition.value === highestSnapPoint
+      ) {
+        return;
+      }
 
       /**
        * if the sheet is in a temporary position and the gesture ended above
@@ -286,15 +319,14 @@ export const useInteractivePanGestureHandler = ({
         return;
       }
 
-      let highestSnapPoint =
-        animatedSnapPoints.value[animatedSnapPoints.value.length - 1];
-
       /**
        * if gesture was picked by scrollable and did not move the sheet,
        * then exit the method to prevent snapping.
        */
       if (
-        (type === GESTURE.CONTENT ? scrollableContentOffsetY.value : 0) > 0 &&
+        (type === GESTURE_SOURCE.SCROLLABLE
+          ? scrollableContentOffsetY.value
+          : 0) > 0 &&
         context.startPosition === highestSnapPoint &&
         animatedPosition.value === highestSnapPoint
       ) {
@@ -306,7 +338,7 @@ export const useInteractivePanGestureHandler = ({
        * then exit the method to prevent snapping.
        */
       if (
-        type === GESTURE.CONTENT &&
+        type === GESTURE_SOURCE.SCROLLABLE &&
         scrollableContentOffsetY.value > 0 &&
         animatedPosition.value === highestSnapPoint
       ) {
diff --git a/src/hooks/useScrollable.ts b/src/hooks/useScrollable.ts
index 9fddb0bdf..9cead4fd5 100644
--- a/src/hooks/useScrollable.ts
+++ b/src/hooks/useScrollable.ts
@@ -14,6 +14,7 @@ export const useScrollable = () => {
     SCROLLABLE_STATE.LOCKED
   );
   const scrollableContentOffsetY = useSharedValue<number>(0);
+  const isScrollableRefreshable = useSharedValue<boolean>(false);
 
   // callbacks
   const setScrollableRef = useCallback((ref: ScrollableRef) => {
@@ -86,6 +87,7 @@ export const useScrollable = () => {
     scrollableRef,
     scrollableState,
     scrollableContentOffsetY,
+    isScrollableRefreshable,
     setScrollableRef,
     removeScrollableRef,
     flashScrollableIndicators,
diff --git a/src/hooks/useScrollableInternal.ts b/src/hooks/useScrollableInternal.ts
index def0f4889..fcd0eae73 100644
--- a/src/hooks/useScrollableInternal.ts
+++ b/src/hooks/useScrollableInternal.ts
@@ -5,7 +5,6 @@ import {
   useAnimatedScrollHandler,
   useSharedValue,
   scrollTo,
-  runOnUI,
   useAnimatedProps,
 } from 'react-native-reanimated';
 import { useBottomSheetInternal } from './useBottomSheetInternal';
@@ -22,7 +21,7 @@ type HandleScrollEventContextType = {
   shouldLockInitialPosition: boolean;
 };
 
-export const useScrollableInternal = () => {
+export const useScrollableInternal = (refreshable: boolean) => {
   // refs
   const scrollableRef = useAnimatedRef<Scrollable>();
   const scrollableContentOffsetY = useSharedValue<number>(0);
@@ -32,7 +31,8 @@ export const useScrollableInternal = () => {
     animatedSheetState,
     animatedScrollableState,
     animatedAnimationState,
-    scrollableContentOffsetY: _rootScrollableContentOffsetY,
+    scrollableContentOffsetY: rootScrollableContentOffsetY,
+    isScrollableRefreshable,
     setScrollableRef,
     removeScrollableRef,
   } = useBottomSheetInternal();
@@ -48,7 +48,7 @@ export const useScrollableInternal = () => {
     useAnimatedScrollHandler<HandleScrollEventContextType>({
       onBeginDrag: ({ contentOffset: { y } }: NativeScrollEvent, context) => {
         scrollableContentOffsetY.value = y;
-        _rootScrollableContentOffsetY.value = y;
+        rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
 
         /**
@@ -99,7 +99,7 @@ export const useScrollableInternal = () => {
         }
         if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
           scrollableContentOffsetY.value = y;
-          _rootScrollableContentOffsetY.value = y;
+          rootScrollableContentOffsetY.value = y;
         }
       },
       onMomentumEnd: ({ contentOffset: { y } }: NativeScrollEvent, context) => {
@@ -114,15 +114,14 @@ export const useScrollableInternal = () => {
         }
         if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
           scrollableContentOffsetY.value = y;
-          _rootScrollableContentOffsetY.value = y;
+          rootScrollableContentOffsetY.value = y;
         }
       },
     });
   const handleSettingScrollable = useCallback(() => {
     // set current content offset
-    runOnUI(() => {
-      _rootScrollableContentOffsetY.value = scrollableContentOffsetY.value;
-    })();
+    rootScrollableContentOffsetY.value = scrollableContentOffsetY.value;
+    isScrollableRefreshable.value = refreshable;
 
     // set current scrollable ref
     const id = findNodeHandle(scrollableRef.current);
@@ -140,11 +139,13 @@ export const useScrollableInternal = () => {
       removeScrollableRef(scrollableRef);
     };
   }, [
-    _rootScrollableContentOffsetY,
-    removeScrollableRef,
+    refreshable,
+    isScrollableRefreshable,
+    rootScrollableContentOffsetY,
     scrollableContentOffsetY,
     scrollableRef,
     setScrollableRef,
+    removeScrollableRef,
   ]);
 
   return {
diff --git a/src/index.ts b/src/index.ts
index 03b84cb9a..99b7cd705 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,7 @@ export {
   BottomSheetFlatList,
   BottomSheetVirtualizedList,
 } from './components/bottomSheetScrollable';
+export { default as BottomSheetHandle } from './components/bottomSheetHandle';
 export { default as BottomSheetDraggableView } from './components/bottomSheetDraggableView';
 export { default as BottomSheetView } from './components/view';
 export { default as BottomSheetTextInput } from './components/bottomSheetTextInput';