Add KeyboardAvoidingView

Example/ios/Podfile.lock

@@ -382,7 +382,7 @@ PODS:
     - React-Core
   - react-native-pager-view (5.4.25):
     - React-Core
-  - react-native-safe-area-context (4.7.2):
+  - react-native-safe-area-context (4.7.4):
     - React-Core
   - react-native-slider (4.4.3):
     - React-Core
@@ -775,7 +775,7 @@ SPEC CHECKSUMS:
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
   react-native-box2d: a5126c70227755b79a1b5b8d867e3932041631b3
   react-native-pager-view: da490aa1f902c9a5aeecf0909cc975ad0e92e53e
-  react-native-safe-area-context: 7aa8e6d9d0f3100a820efb1a98af68aa747f9284
+  react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
   react-native-slider: 1cdd6ba29675df21f30544253bf7351d3c2d68c4
   React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
@@ -798,7 +798,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: f7c74478c83c4fdfc5cf4df51f80c0dd5cf125c6
   RNCPicker: 529d564911e93598cc399b56cc0769ce3675f8c8
   RNGestureHandler: bb86e378287f7713baf3ca205423eb8109790022
-  RNReanimated: 7032c33fc6caf259b4872375342b72183c688fc3
+  RNReanimated: 31c2181e76a33a8f04ae0420b00540c3e27861b7
   RNScreens: 85d3880b52d34db7b8eeebe2f1a0e807c05e69fa
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
@@ -807,4 +807,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: f37cea0ea1b6dc523fb88a9c2bdb9993f4b567ce
 
-COCOAPODS: 1.14.0
+COCOAPODS: 1.14.2

Example/package.json

@@ -24,7 +24,7 @@
     "react-native-gesture-handler": "^2.13.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-reanimated": "link:../",
-    "react-native-safe-area-context": "^4.7.2",
+    "react-native-safe-area-context": "4.7.4",
     "react-native-screens": "^3.25.0",
     "react-native-svg": "^13.14.0"
   },

Example/yarn.lock

@@ -5983,10 +5983,10 @@ react-native-pager-view@^5.4.25:
   version "0.0.0"
   uid ""
 
-react-native-safe-area-context@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.2.tgz#1673aa99b6a9235e7faaf5a248e69795d6e54e07"
-  integrity sha512-5fy/hRNJ7bI/U2SliOeKf0D80J4lXPc1NsRiNS7Xaz8YTnqlzWib1ViItkwKPfufe54YKzVBMmM32RpdzvO2gg==
+react-native-safe-area-context@4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz#3dd8438971e70043d76f2428ede75b8a9639265e"
+  integrity sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==
 
 react-native-screens@^3.25.0:
   version "3.25.0"

NextExample/next.config.js

@@ -6,6 +6,8 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE_BUNDLE === '1',
 });
 
+const path = require('path');
+
 // this can be used to obtain a more readable bundle for debugging
 const disableMinification = process.env.DISABLE_MINIFICATION === '1';
 
@@ -21,12 +23,11 @@ module.exports = withPlugins([withBundleAnalyzer, withExpo], {
     if (disableMinification) {
       config.optimization.minimizer = [];
     }
-    config.resolve.alias.react = require('path').resolve(
-      __dirname,
-      '.',
-      'node_modules',
-      'react'
-    );
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      react: path.resolve(__dirname, '.', 'node_modules', 'react'),
+      'react-dom': path.resolve(__dirname, '.', 'node_modules', 'react-dom'),
+    };
     return config;
   },
 });

app/package.json

@@ -26,7 +26,6 @@
     "react-native-gesture-handler": "^2.13.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-reanimated": "link:../",
-    "react-native-safe-area-context": "^4.7.2",
     "react-native-screens": "^3.25.0",
     "react-native-svg": "^13.14.0",
     "react-native-web": "~0.18.12"

app/src/examples/KeyboardAvoidingView.tsx

@@ -71,7 +71,7 @@ function ListItem({
 }
 
 export default function KeyboardAvoidingViewExample(): React.ReactElement {
-  const [useReanimated, setUseReanimated] = useState(true);
+  const [useReanimated, setUseReanimated] = useState(false);
 
   const [behavior, setBehavior] = useState<
     'position' | 'height' | 'padding' | undefined
@@ -113,7 +113,7 @@ export default function KeyboardAvoidingViewExample(): React.ReactElement {
       <KeyboardAvoidingView
         behavior={behavior}
         style={styles.flexOne}
-        keyboardVerticalOffset={48 + 10}
+        keyboardVerticalOffset={80}
         contentContainerStyle={styles.flexOne}>
         <Animated.FlatList
           inverted
@@ -132,6 +132,10 @@ export default function KeyboardAvoidingViewExample(): React.ReactElement {
           />
         </View>
       </KeyboardAvoidingView>
+
+      <View style={styles.additionalView}>
+        <Text>A view below KeyboardAvoidingView</Text>
+      </View>
     </View>
   );
 }
@@ -150,6 +154,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     backgroundColor: OVERLAY_COLOR,
   },
+  additionalView: {
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: OVERLAY_COLOR,
+  },
   itemContainer: {
     flexDirection: 'row',
     marginHorizontal: 8,

app/yarn.lock

@@ -1559,11 +1559,6 @@ react-native-pager-view@^5.4.25:
   version "0.0.0"
   uid ""
 
-react-native-safe-area-context@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.2.tgz#1673aa99b6a9235e7faaf5a248e69795d6e54e07"
-  integrity sha512-5fy/hRNJ7bI/U2SliOeKf0D80J4lXPc1NsRiNS7Xaz8YTnqlzWib1ViItkwKPfufe54YKzVBMmM32RpdzvO2gg==
-
 react-native-screens@^3.25.0:
   version "3.25.0"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.25.0.tgz#cf45e271ce733c9cf782fef8c9b3eb9e53faf01d"

package.json

@@ -117,6 +117,8 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/types": "^7.20.0",
     "@react-native/eslint-config": "^0.72.2",
+    "@react-navigation/elements": "^1.3.21",
+    "@react-navigation/native": "^6.1.9",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
@@ -157,6 +159,8 @@
     "react-native": "0.72.6",
     "react-native-builder-bob": "^0.18.3",
     "react-native-gesture-handler": "^2.13.2",
+    "react-native-safe-area-context": "^4.7.4",
+    "react-native-screens": "^3.27.0",
     "react-native-web": "~0.18.12",
     "react-test-renderer": "17.0.2",
     "shelljs": "^0.8.5",

src/reanimated2/component/KeyboardAvoidingView.tsx

@@ -10,11 +10,18 @@ import { AnimatedView as ReanimatedView } from './View';
 import {
   useAnimatedKeyboard,
   useAnimatedStyle,
-  useWorkletCallback,
   runOnUI,
   useSharedValue,
 } from '../';
 
+let useHeaderHeight: () => number;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  useHeaderHeight = require('@react-navigation/elements').useHeaderHeight;
+} catch (e) {
+  useHeaderHeight = () => 0;
+}
+
 type Props = ViewProps & KeyboardAvoidingViewProps;
 
 /**
@@ -36,22 +43,18 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
     ref
   ) => {
     const initialFrame = useSharedValue<LayoutRectangle | null>(null);
-
-    const currentFrame = useSharedValue<LayoutRectangle | null>(null);
-
     const keyboard = useAnimatedKeyboard();
     const { height: screenHeight } = useWindowDimensions();
+    const headerHeight = useHeaderHeight();
 
     const onLayoutWorklet = useCallback(
       (layout: LayoutRectangle) => {
         'worklet';
         if (initialFrame.value == null) {
           initialFrame.value = layout;
         }
-
-        currentFrame.value = layout;
       },
-      [currentFrame, initialFrame] 
+      [initialFrame]
     );
 
     const handleOnLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
@@ -62,34 +65,42 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
           onLayout(event);
         }
       },
-      [onLayout]
+      [onLayout, onLayoutWorklet]
     );
 
     const getBackwardCompatibleBottomHeight = useCallback(
       (keyboardHeight: number) => {
         'worklet';
-        if (currentFrame.value == null || initialFrame.value == null) {
+        if (initialFrame.value == null) {
           return 0;
         }
 
-        const keyboardY =
-          screenHeight - keyboardHeight - keyboardVerticalOffset;
+        /*
+        We calculate how much of the view to move by taking sum of keyboard's and view's heights
+        (keyboardHeight + initialFrame.value.height) and substracting how much space they both should actually
+        occupy (screenHeight - headerHeight - keyboardVerticalOffset). If the result is less than 0 - it means
+        that keyboard doesn't cover the view and we don't need to tinker with it.
+        */
+        const amountToMove = Math.max(
+          keyboardHeight +
+            initialFrame.value.height -
+            (screenHeight - headerHeight - keyboardVerticalOffset),
+          0
+        );
 
         if (behavior === 'height') {
-          return Math.max(initialFrame.value.height - keyboardHeight, 0);
+          // in case of changing height, it is just the view height without the amount to move
+          return Math.max(initialFrame.value.height - amountToMove);
         }
 
-        return Math.max(
-          currentFrame.value.y + currentFrame.value.height - keyboardY,
-          0
-        );
+        return Math.max(amountToMove);
       },
       [
-        behavior,
-        currentFrame,
         initialFrame,
-        keyboardVerticalOffset,
+        behavior,
         screenHeight,
+        headerHeight,
+        keyboardVerticalOffset,
       ]
     );