Bottom sheet could have an awesome handle animation

[filiptronicek]

During the work on #154, I wanted to implement a custom handle (which I did) but also wanted to have the effect of a caret when the sheet was rolled down.

bottom-sheet-custom-handle-preview.mp4

(This video is from their docs)

Implementation

I tried copying the demo from https://gorhom.github.io/react-native-bottom-sheet/custom-handle#example but failed because I got the following error:

TypeError: undefined is not a function (near '...(0, _reactNativeRedash.transformOrigin)...')    

Stack trace

This error is located at:
    in Handle (at BottomSheetHandleContainer.tsx:49)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:448)
    in AnimatedComponent(View) (at createAnimatedComponent.js:459)
    in ForwardRef(AnimatedComponentWrapper) (at BottomSheetHandleContainer.tsx:70)
    in PanGestureHandler (at BottomSheetHandleContainer.tsx:63)
    in BottomSheetHandleContainerComponent
    in BottomSheetHandleContainerComponent (at BottomSheet.tsx:646)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:448)
    in AnimatedComponent(View) (at createAnimatedComponent.js:459)
    in ForwardRef(AnimatedComponentWrapper) (at BottomSheet.tsx:633)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:448)
    in AnimatedComponent(View) (at createAnimatedComponent.js:459)
    in ForwardRef(AnimatedComponentWrapper) (at BottomSheetContentWrapper.ios.tsx:19)
    in TapGestureHandler (at BottomSheetContentWrapper.ios.tsx:12)
    in ForwardRef
    in ForwardRef (at BottomSheet.tsx:628)
    in RCTView (at View.js:34)
    in View (at BottomSheetContainer.tsx:41)
    in BottomSheetContainerComponent
    in BottomSheetContainerComponent (at BottomSheet.tsx:621)
    in ForwardRef
    in ForwardRef (at HomeScreen.js:270)
    in RCTView (at View.js:34)
    in View (at HomeScreen.js:178)
    in HomeScreen (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at App.js:36)
    in HomePages (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at BottomTabView.tsx:55)
    in SceneContent (at BottomTabView.tsx:172)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at ResourceSavingScene.tsx:30)
    in ResourceSavingScene (at BottomTabView.tsx:166)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at BottomTabView.tsx:146)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at BottomTabView.tsx:145)
    in BottomTabView (at createBottomTabNavigator.tsx:45)
    in BottomTabNavigator (at App.js:88)
    in MyTabs (at App.js:176)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:175)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException        
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException       
at node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:43:2 in showErrorDialog     
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15257:32 in logCapturedError
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15361:20 in logError
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16597:12 in update.callback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7106:2 in callCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7127:20 in commitUpdateQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15801:25 in commitLifeCycles
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 
in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 
in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
at [native code]:null in commitRootImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority        
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority        
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17741:26 in flushSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:6154:13 in scheduleRefresh
at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:218:8 in mountedRoots.forEach$argument_0
at [native code]:null in forEach
at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:210:4 in performReactRefresh
at node_modules\react-native\Libraries\Core\setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
at node_modules\metro\src\lib\polyfills\require.js:627:10 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction     
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0 
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

I am in need of help with this because I have no idea how to proceed further.