feat: added pull to refresh implementaion

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',
   },
 });

example/src/components/handle/Handle.tsx → 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',
+  },
 });

example/src/components/customHandle/index.ts

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

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);

example/src/components/headerHandle/index.ts

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

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>
   );

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>
   );

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>
   );

example/src/screens/advanced/DynamicSnapPointExample.tsx

@@ -66,7 +66,6 @@ const DynamicSnapPointExample = () => {
         index={1}
         snapPoints={snapPoints}
         animateOnMount={true}
-        animationDuration={250}
       >
         <BottomSheetView
           style={contentContainerStyle}

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

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(() => {