Fix for KAV performance issues on New Arch

Author: mhoran

src/usecase/shared/KeyboardAvoidingView.tsx

@@ -6,6 +6,7 @@ import Animated, {
   runOnUI,
   useAnimatedKeyboard,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -43,30 +44,51 @@ export const KeyboardAvoidingView: React.FC<React.PropsWithChildren<Props>> = ({
     [setCurrentFrame]
   );
 
-  const animatedStyles = useAnimatedStyle(() => {
-    if (!currentFrame.value) return {};
+  const offset = useDerivedValue(() => {
+    const frame = currentFrame.value;
+    if (!frame) return 0;
 
-    const offset = Math.max(
-      currentFrame.value.y +
-        currentFrame.value.height -
+    return Math.max(
+      frame.y +
+        frame.height -
         (screenHeight + topPadding - keyboard.height.value),
       0
     );
+  });
 
+  const offsetStyle = useAnimatedStyle(() => {
     if (behavior === 'padding') {
-      return { paddingBottom: offset };
+      return { paddingBottom: offset.value };
     } else if (behavior === 'transform') {
-      return {
-        transform: [{ translateY: -offset }],
-        paddingTop: keyboard.state.value === KeyboardState.OPEN ? offset : 0
+      const style: ViewStyle = {
+        transform: [{ translateY: -offset.value }]
       };
+      if (keyboard.state.value === KeyboardState.OPEN) {
+        style.paddingTop = offset.value;
+      }
+      return style;
+    } else {
+      return {};
+    }
+  });
+
+  const resetPaddingStyle = useAnimatedStyle(() => {
+    if (behavior === 'transform') {
+      const style: ViewStyle = {};
+      if (keyboard.state.value !== KeyboardState.OPEN) {
+        style.paddingTop = 0;
+      }
+      return style;
     } else {
       return {};
     }
   });
 
   return (
-    <Animated.View onLayout={onLayout} style={[style, animatedStyles]}>
+    <Animated.View
+      onLayout={onLayout}
+      style={[style, offsetStyle, resetPaddingStyle]}
+    >
       {children}
     </Animated.View>
   );