chore: updated examples

example/src/components/handle/Handle.tsx

@@ -10,21 +10,33 @@ interface HandleProps extends BottomSheetHandleProps {
 
 const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
   //#region animations
-  const borderTopRadius = interpolate(animatedPositionIndex, {
-    inputRange: [1, 2],
-    outputRange: [20, 0],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const indicatorTransformOriginY = interpolate(animatedPositionIndex, {
-    inputRange: [0, 1, 2],
-    outputRange: [-1, 0, 1],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const leftIndicatorRotate = interpolate(animatedPositionIndex, {
-    inputRange: [0, 1, 2],
-    outputRange: [toRad(-30), 0, toRad(30)],
-    extrapolate: Extrapolate.CLAMP,
-  });
+  const borderTopRadius = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [1, 2],
+        outputRange: [20, 0],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
+  const indicatorTransformOriginY = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [0, 1, 2],
+        outputRange: [-1, 0, 1],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
+  const leftIndicatorRotate = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [0, 1, 2],
+        outputRange: [toRad(-30), 0, toRad(30)],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
   const rightIndicatorRotate = interpolate(animatedPositionIndex, {
     inputRange: [0, 1, 2],
     outputRange: [toRad(30), 0, toRad(-30)],
@@ -42,8 +54,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
         borderTopRightRadius: borderTopRadius,
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [style]
+    [borderTopRadius, style]
   );
   const leftIndicatorStyle = useMemo(
     () => ({
@@ -57,8 +68,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
         }
       ),
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [indicatorTransformOriginY, leftIndicatorRotate]
   );
   const rightIndicatorStyle = useMemo(
     () => ({
@@ -72,8 +82,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
         }
       ),
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [indicatorTransformOriginY, rightIndicatorRotate]
   );
   //#endregion
 

example/src/screens/advanced/CustomHandleExample.tsx

@@ -1,6 +1,5 @@
 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';
 import Handle from '../../components/handle';
 import Button from '../../components/button';
@@ -12,7 +11,6 @@ const CustomHandleExample = () => {
 
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
-  const headerHeight = useHeaderHeight();
 
   // variables
   const snapPoints = useMemo(() => [150, 300, 450], []);
@@ -88,7 +86,6 @@ const CustomHandleExample = () => {
         enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
-        topInset={headerHeight}
         handleComponent={Handle}
       >
         <ContactList type="View" count={3} header={renderHeader} />

example/src/screens/advanced/NavigatorExample.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
-  useHeaderHeight,
   createStackNavigator,
   HeaderBackButton,
   StackNavigationOptions,
@@ -75,7 +74,6 @@ const NavigatorExample = () => {
 
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
-  const headerHeight = useHeaderHeight();
 
   // variables
   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
@@ -146,7 +144,6 @@ const NavigatorExample = () => {
         enabled={enabled}
         snapPoints={snapPoints}
         initialSnapIndex={1}
-        topInset={headerHeight}
         onChange={handleSheetChange}
       >
         <Navigator />

example/src/screens/advanced/OverlayExample.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import { useHeaderHeight } from '@react-navigation/stack';
 import Animated, { interpolate, Extrapolate } from 'react-native-reanimated';
 import { useValue } from 'react-native-redash';
 import BottomSheet from '@gorhom/bottom-sheet';
@@ -10,7 +9,6 @@ import ContactList from '../../components/contactList';
 const OverlayExample = () => {
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
-  const headerHeight = useHeaderHeight();
 
   // variables
   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
@@ -93,7 +91,6 @@ const OverlayExample = () => {
         ref={bottomSheetRef}
         snapPoints={snapPoints}
         initialSnapIndex={1}
-        topInset={headerHeight}
         animatedPositionIndex={animatedPositionIndex}
         onChange={handleSheetChanges}
       >

example/src/screens/modal/SimpleExample.tsx

@@ -25,7 +25,7 @@ const SimpleExample = () => {
   }, []);
   const handlePresentPress = useCallback(() => {
     present(<ContactListContainer title="Modal FlatList" type="FlatList" />, {
-      snapPoints: [300, '50%'],
+      snapPoints: ['25%', '50%'],
       animationDuration: 250,
       onChange: handleChange,
     });

example/src/screens/static/BasicExample.tsx

@@ -77,7 +77,13 @@ const BasicExample = () => {
         animatedPosition={position}
         onChange={handleSheetChanges}
       >
-        <ContactList type="View" />
+        <ContactList type="ScrollView" count={15} />
+        {/* <View
+          style={{
+            height: 450,
+            backgroundColor: 'red'
+          }}
+        /> */}
       </BottomSheet>
     </View>
   );

example/src/screens/static/BasicExamples.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, memo, useRef, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useHeaderHeight } from '@react-navigation/stack';
 import BottomSheet from '@gorhom/bottom-sheet';
 import ContactList from '../../components/contactList';
 import Button from '../../components/button';
@@ -11,14 +10,13 @@ interface ExampleScreenProps {
   count?: number;
 }
 
-const createExampleScreen = ({ type, count = 50 }: ExampleScreenProps) =>
+const createExampleScreen = ({ type, count = 20 }: ExampleScreenProps) =>
   memo(() => {
     // state
     const [enabled, setEnabled] = useState(true);
 
     // hooks
     const bottomSheetRef = useRef<BottomSheet>(null);
-    const headerHeight = useHeaderHeight();
 
     // variables
     const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
@@ -89,7 +87,6 @@ const createExampleScreen = ({ type, count = 50 }: ExampleScreenProps) =>
           snapPoints={snapPoints}
           initialSnapIndex={1}
           animateOnMount={true}
-          topInset={headerHeight}
           onChange={handleSheetChange}
         >
           <ContactList key={`${type}.list`} type={type} count={count} />

example/src/utils/index.ts

@@ -16,18 +16,18 @@ export type Location = {
   photos: string[];
 };
 
-export const createContactListMockData = (count: number = 50): Contact[] => {
+export const createContactListMockData = (count: number = 20): Contact[] => {
   return new Array(count).fill(0).map(() => ({
     name: `${Faker.name.firstName()} ${Faker.name.lastName()}`,
     address: `${Faker.address.city()}, ${Faker.address.country()}`,
     jobTitle: Faker.name.jobTitle(),
   }));
 };
 
-export const createContactSectionsMockData = (count: number = 50) => {
-  return new Array(Math.round(count / 2)).fill(0).map(() => ({
+export const createContactSectionsMockData = (count: number = 20) => {
+  return new Array(Math.round(count / 4)).fill(0).map(() => ({
     title: Faker.address.country(),
-    data: new Array(Math.round(count / 2)).fill(0).map(() => ({
+    data: new Array(Math.round(count / 4)).fill(0).map(() => ({
       name: `${Faker.name.firstName()} ${Faker.name.lastName()}`,
       address: `${Faker.address.city()}, ${Faker.address.country()}`,
       jobTitle: Faker.name.jobTitle(),