diff --git a/example/src/App.tsx b/example/src/App.tsx
index 49d58c656..005947d19 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -7,16 +7,12 @@ const Stack = createStackNavigator<AppStackParamsList>();
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="BasicExample">
+      <Stack.Navigator initialRouteName="Root">
         <Stack.Screen
           name="Root"
           getComponent={() => require('./screens/Root').default}
           options={{ headerShown: false }}
         />
-        <Stack.Screen
-          name="BasicExample"
-          getComponent={() => require('./screens/BasicExample').default}
-        />
         {/* basic examples */}
         <Stack.Screen
           name="FlatListExample"
diff --git a/example/src/components/contactList/ContactList.tsx b/example/src/components/contactList/ContactList.tsx
index ea64d987d..2e659ad85 100644
--- a/example/src/components/contactList/ContactList.tsx
+++ b/example/src/components/contactList/ContactList.tsx
@@ -11,14 +11,15 @@ import {
 import {
   createContactListMockData,
   createContactSectionsMockData,
-} from '../../utils';
+} from '../../utilities';
 import ContactItem from '../contactItem';
 
 interface ContactListProps {
   type: 'FlatList' | 'SectionList' | 'ScrollView' | 'View';
   count?: number;
-  header?: (() => JSX.Element) | null;
   style?: ViewStyle;
+  header?: (() => JSX.Element) | null;
+  onLayout?: () => void;
 }
 
 const ContactList = ({
@@ -26,6 +27,7 @@ const ContactList = ({
   count = 50,
   header = null,
   style,
+  onLayout,
 }: ContactListProps) => {
   // hooks
   const { bottom: bottomSafeArea } = useSafeArea();
@@ -136,6 +138,7 @@ const ContactList = ({
       <BottomSheetView style={styles.contentContainer}>
         {header && header()}
         {data.map(renderScrollViewItem)}
+        <View onLayout={onLayout} />
       </BottomSheetView>
     );
   }
diff --git a/example/src/components/handle/Handle.tsx b/example/src/components/handle/Handle.tsx
index c0ffb8c40..7c59618ac 100644
--- a/example/src/components/handle/Handle.tsx
+++ b/example/src/components/handle/Handle.tsx
@@ -2,51 +2,39 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import Animated, {
-  interpolate,
   Extrapolate,
+  interpolate,
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
+import { toRad } from 'react-native-redash';
+import { transformOrigin } from '../../utilities/transformOrigin';
 
 interface HandleProps extends BottomSheetHandleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const toRad = (degrees: number) => {
-  'worklet';
-  return degrees * (Math.PI / 180);
-};
-
-export const transformOrigin = ({ x, y }, ...transformations) => {
-  'worklet';
-  return [
-    { translateX: x },
-    { translateY: y },
-    ...transformations,
-    { translateX: x * -1 },
-    { translateY: y * -1 },
-  ];
-};
-
 const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
   //#region animations
 
   const indicatorTransformOriginY = useDerivedValue(() =>
-    interpolate(animatedPositionIndex.value, [0, 1, 2], [-1, 0, 1])
+    interpolate(
+      animatedPositionIndex.value,
+      [0, 1, 2],
+      [-1, 0, 1],
+      Extrapolate.CLAMP
+    )
   );
   //#endregion
 
   //#region styles
-  const containerStyle = useMemo(
-    () => [styles.header, style],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [style]
-  );
+  const containerStyle = useMemo(() => [styles.header, style], [style]);
   const containerAnimatedStyle = useAnimatedStyle(() => {
     const borderTopRadius = interpolate(
       animatedPositionIndex.value,
       [1, 2],
-      [20, 0]
+      [20, 0],
+      Extrapolate.CLAMP
     );
     return {
       borderTopLeftRadius: borderTopRadius,
@@ -64,13 +52,14 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
     const leftIndicatorRotate = interpolate(
       animatedPositionIndex.value,
       [0, 1, 2],
-      [toRad(-30), 0, toRad(30)]
+      [toRad(-30), 0, toRad(30)],
+      Extrapolate.CLAMP
     );
     return {
       transform: transformOrigin(
         { x: 0, y: indicatorTransformOriginY.value },
         {
-          rotate: leftIndicatorRotate,
+          rotate: `${leftIndicatorRotate}rad`,
         },
         {
           translateX: -5,
@@ -89,13 +78,14 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
     const rightIndicatorRotate = interpolate(
       animatedPositionIndex.value,
       [0, 1, 2],
-      [toRad(30), 0, toRad(-30)]
+      [toRad(30), 0, toRad(-30)],
+      Extrapolate.CLAMP
     );
     return {
       transform: transformOrigin(
         { x: 0, y: indicatorTransformOriginY.value },
         {
-          rotate: rightIndicatorRotate,
+          rotate: `${rightIndicatorRotate}rad`,
         },
         {
           translateX: 5,
diff --git a/example/src/screens/BasicExample.tsx b/example/src/screens/BasicExample.tsx
index 561619fd7..9b9536d3e 100644
--- a/example/src/screens/BasicExample.tsx
+++ b/example/src/screens/BasicExample.tsx
@@ -1,11 +1,8 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/stack';
-import { useValue, concat } from 'react-native-reanimated';
 import BottomSheet from '@gorhom/bottom-sheet';
-import Handle from '../components/handle';
 import Button from '../components/button';
-import { ReText } from 'react-native-redash';
 import ContactList from '../components/contactList';
 
 const BasicExample = () => {
@@ -14,14 +11,10 @@ const BasicExample = () => {
   const headerHeight = useHeaderHeight();
 
   // variables
-  const snapPoints = useMemo(() => [150, 450], []);
-  const position = useValue<number>(0);
+  const snapPoints = useMemo(() => [150, 300, 450], []);
 
   // styles
   // callbacks
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log('handleSheetChanges', index);
-  }, []);
   const handleSnapPress = useCallback(index => {
     bottomSheetRef.current?.snapTo(index);
   }, []);
@@ -39,6 +32,11 @@ const BasicExample = () => {
     );
   }, []);
 
+  const renderSheetContent = useCallback(
+    () => <ContactList type="FlatList" count={50} header={renderHeader} />,
+    [renderHeader]
+  );
+
   return (
     <View style={styles.container}>
       <Button
@@ -61,15 +59,16 @@ const BasicExample = () => {
         style={styles.buttonContainer}
         onPress={() => handleClosePress()}
       />
-      <ReText text={concat('Position from bottom: ', position)} />
+      {/* <ReText text={concat('Position from bottom: ', position)} /> */}
       <BottomSheet
         ref={bottomSheetRef}
         snapPoints={snapPoints}
         initialSnapIndex={0}
         // handleComponent={Handle}
         topInset={headerHeight}
-      >
-        {/* <View
+        children={renderSheetContent}
+      />
+      {/* <View
           style={{
             position: 'absolute',
             left: 0,
@@ -127,13 +126,12 @@ const BasicExample = () => {
           }}
         /> */}
 
-        {/* <Button
+      {/* <Button
           label="Open"
           style={styles.buttonContainer}
           onPress={() => handleSnapPress(1)}
-        /> */}
-        <ContactList type="ScrollView" count={50} header={renderHeader} />
-      </BottomSheet>
+        /> 
+      </BottomSheet>*/}
     </View>
   );
 };
diff --git a/example/src/screens/MapExample.tsx b/example/src/screens/MapExample.tsx
index bfc786816..8d077f8f8 100644
--- a/example/src/screens/MapExample.tsx
+++ b/example/src/screens/MapExample.tsx
@@ -18,7 +18,7 @@ import { useSafeArea } from 'react-native-safe-area-context';
 import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import SearchHandle from '../components/searchHandle';
 import LocationItem from '../components/locationItem';
-import { createLocationListMockData } from '../utils';
+import { createLocationListMockData } from '../utilities';
 import { clamp } from 'react-native-redash';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
diff --git a/example/src/screens/Perf.tsx b/example/src/screens/Perf.tsx
new file mode 100644
index 000000000..6db9a1d17
--- /dev/null
+++ b/example/src/screens/Perf.tsx
@@ -0,0 +1,118 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { SafeAreaView, StyleSheet, Text } from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+import ContactList from '../components/contactList';
+import Button from '../components/button';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+const App = () => {
+  // state
+  const [mount, setMount] = useState(false);
+  const [showResult, setShowResult] = useState(false);
+
+  // ref
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  // variables
+  const snapPoints = useMemo(() => [150, 300, 450], []);
+  const initialSnapPoint = useRef(0);
+  const startPerfTime = useRef(0);
+  const endPerfTime = useRef(0);
+
+  // callbacks
+  const finishPerformanceTest = useCallback(() => {
+    endPerfTime.current = Date.now();
+    setShowResult(true);
+  }, []);
+
+  const handleMountPress = useCallback(() => {
+    startPerfTime.current = Date.now();
+    setMount(state => !state);
+  }, []);
+
+  const handleAutoAnimatePress = useCallback(() => {
+    initialSnapPoint.current = -1;
+    handleMountPress();
+    let index = 0;
+    let loop = 1;
+
+    const timer = setInterval(() => {
+      if (loop === 4) {
+        clearInterval(timer);
+        return;
+      }
+
+      if (index > snapPoints.length - 1) {
+        index = 0;
+        loop++;
+      }
+
+      bottomSheetRef.current?.snapTo(index++);
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [snapPoints, handleMountPress]);
+
+  // render
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Button
+          label="Mount"
+          style={styles.buttonContainer}
+          onPress={handleMountPress}
+        />
+        <Button
+          label="Auto Animate"
+          style={styles.buttonContainer}
+          onPress={handleAutoAnimatePress}
+        />
+        <Text style={styles.version}>Reanimated v2 alpha-6</Text>
+
+        {showResult && (
+          <Text style={styles.measure}>
+            {endPerfTime.current - startPerfTime.current}ms
+          </Text>
+        )}
+
+        {mount && (
+          <BottomSheet
+            ref={bottomSheetRef}
+            initialSnapIndex={initialSnapPoint.current}
+            snapPoints={snapPoints}
+          >
+            <ContactList
+              type="View"
+              count={5}
+              onLayout={finishPerformanceTest}
+            />
+          </BottomSheet>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  buttonContainer: {
+    marginHorizontal: 24,
+    marginBottom: 6,
+  },
+  measure: {
+    marginHorizontal: 24,
+    fontSize: 64,
+    fontWeight: 'bold',
+  },
+  version: {
+    marginHorizontal: 24,
+    marginTop: 12,
+    fontSize: 20,
+  },
+});
+
+export default App;
diff --git a/example/src/utils/index.ts b/example/src/utilities/createMockData.ts
similarity index 100%
rename from example/src/utils/index.ts
rename to example/src/utilities/createMockData.ts
diff --git a/example/src/utilities/index.ts b/example/src/utilities/index.ts
new file mode 100644
index 000000000..8b9c15b89
--- /dev/null
+++ b/example/src/utilities/index.ts
@@ -0,0 +1,6 @@
+export {
+  createContactListMockData,
+  createContactSectionsMockData,
+  createLocationListMockData,
+} from './createMockData';
+export { transformOrigin } from './transformOrigin';
diff --git a/example/src/utilities/transformOrigin.ts b/example/src/utilities/transformOrigin.ts
new file mode 100644
index 000000000..a0d2c3811
--- /dev/null
+++ b/example/src/utilities/transformOrigin.ts
@@ -0,0 +1,11 @@
+// @ts-ignore
+export const transformOrigin = ({ x, y }, ...transformations) => {
+  'worklet';
+  return [
+    { translateX: x },
+    { translateY: y },
+    ...transformations,
+    { translateX: x * -1 },
+    { translateY: y * -1 },
+  ];
+};