Switch to react-native default animation tools for composer and post controls

src/view/shell/mobile/Composer.tsx

@@ -1,15 +1,9 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, View} from 'react-native'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  interpolate,
-  Easing,
-} from 'react-native-reanimated'
+import {Animated, Easing, StyleSheet, View} from 'react-native'
 import {ComposePost} from '../../com/composer/ComposePost'
 import {ComposerOpts} from '../../../state/models/shell-ui'
+import {useAnimatedValue} from '../../lib/useAnimatedValue'
 
 export const Composer = observer(
   ({
@@ -25,21 +19,30 @@ export const Composer = observer(
     onPost?: ComposerOpts['onPost']
     onClose: () => void
   }) => {
-    const initInterp = useSharedValue<number>(0)
+    const initInterp = useAnimatedValue(0)
 
     useEffect(() => {
       if (active) {
-        initInterp.value = withTiming(1, {
+        Animated.timing(initInterp, {
+          toValue: 1,
           duration: 300,
           easing: Easing.out(Easing.exp),
-        })
+          useNativeDriver: true,
+        }).start()
       } else {
-        initInterp.value = 0
+        initInterp.setValue(0)
       }
     }, [initInterp, active])
-    const wrapperAnimStyle = useAnimatedStyle(() => ({
-      top: interpolate(initInterp.value, [0, 1.0], [winHeight, 0]),
-    }))
+    const wrapperAnimStyle = {
+      transform: [
+        {
+          translateY: initInterp.interpolate({
+            inputRange: [0, 1],
+            outputRange: [winHeight, 0],
+          }),
+        },
+      ],
+    }
 
     // events
     // =