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

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import {
+  Image,
+  KeyboardAvoidingView as RNKeyboardAvoidingView,
+  StyleSheet,
+  Switch,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import Animated, { useAnimatedRef } from 'react-native-reanimated';
+
+function getRandomData(numberOfElements: number) {
+  return Array.from(Array(numberOfElements).keys()).map((number) => {
+    const likeSynonims = ['enjoy', 'love', 'am interested in'];
+    const hobbies = [
+      'reading books',
+      'going for long walks in the park',
+      'try new foods',
+      'travel to different places around the world',
+      'spending time with my family and friends',
+      'going on outdoor adventures',
+      'learning new languages',
+      'exploring different cultures',
+    ];
+    const firstNames = ['Emily', 'Alexander', 'Olivia', 'William', 'Sophia'];
+    const lastNames = ['Johnson', 'Lee', 'Hernandez', 'Kim', 'Chen', 'Park'];
+
+    const name = firstNames[number % firstNames.length];
+    const lastName = lastNames[number % lastNames.length];
+    return {
+      text: `I ${likeSynonims[number % likeSynonims.length]} ${
+        hobbies[number % hobbies.length]
+      } and  ${hobbies[(3 * number + 1) % hobbies.length]}`,
+      avatar: `https://i.pravatar.cc/150?img=${number % 7}`,
+      name: `${name} ${lastName}`,
+      username: `${name.toLocaleLowerCase()}${lastName.toLocaleLowerCase()[0]}`,
+    };
+  });
+}
+
+const DATA = getRandomData(20);
+
+const TALL_POPOVER_HEIGHT = 500;
+const SHORT_POPOVER_HEIGHT = 200;
+
+function ListItem({
+  item,
+  onLongPress,
+}: {
+  item: any;
+  onLongPress: (ref: React.RefObject<Animated.View>, height: number) => void;
+}) {
+  const ref = useAnimatedRef<Animated.View>();
+
+  return (
+    <TouchableOpacity
+      style={styles.itemContainer}
+      onPress={() => onLongPress(ref, SHORT_POPOVER_HEIGHT)}
+      onLongPress={() => onLongPress(ref, TALL_POPOVER_HEIGHT)}>
+      <Image source={{ uri: item.avatar + '?u=1' }} style={styles.avatar} />
+      <Animated.View ref={ref} style={styles.item}>
+        <Text style={styles.title}>
+          {item.name} · <Text style={styles.username}>@{item.username}</Text>
+        </Text>
+        <Text>{item.text}</Text>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+}
+
+export default function KeyboardAvoidingViewExample(): React.ReactElement {
+  const [useReanimated, setUseReanimated] = useState(false);
+
+  const [behavior, setBehavior] = useState<
+    'position' | 'height' | 'padding' | undefined
+  >(undefined);
+
+  const KeyboardAvoidingView = useReanimated
+    ? // @ts-ignore
+      Animated.KeyboardAvoidingView
+    : RNKeyboardAvoidingView;
+
+  return (
+    <View style={styles.flexOne}>
+      <View style={styles.header}>
+        <Text>Use Reanimated KeyboardAvoidingView</Text>
+        <Switch
+          value={useReanimated}
+          onChange={(evt) => setUseReanimated(evt.nativeEvent.value)}
+        />
+      </View>
+      <View style={styles.header}>
+        {(['position', 'padding', 'height', undefined] as const).map((key) => {
+          return (
+            <View style={styles.flexOne} key={key || 'undefined'}>
+              <TouchableOpacity
+                style={[
+                  styles.behavior,
+                  behavior === key ? styles.selectedBehavior : undefined,
+                ]}
+                onPress={() => {
+                  setBehavior(key);
+                }}>
+                <Text>{key || 'undefined'}</Text>
+              </TouchableOpacity>
+            </View>
+          );
+        })}
+      </View>
+
+      <KeyboardAvoidingView
+        behavior={behavior}
+        style={styles.flexOne}
+        keyboardVerticalOffset={2 * HEADER_VIEW_HEIGHT}
+        contentContainerStyle={styles.flexOne}>
+        <Animated.FlatList
+          inverted
+          contentContainerStyle={{ flex: 1 }}
+          data={DATA}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item }) => (
+            <ListItem onLongPress={() => {}} item={item} />
+          )}
+        />
+        <View>
+          <TextInput
+            placeholder="Focus me, press or long press on messages"
+            style={styles.textInput}
+            autoCorrect
+          />
+        </View>
+      </KeyboardAvoidingView>
+
+      <View style={styles.additionalView}>
+        <Text>A view below KeyboardAvoidingView</Text>
+      </View>
+    </View>
+  );
+}
+
+const OVERLAY_COLOR = 'rgba(29, 28, 29, 0.13)';
+const HEADER_VIEW_HEIGHT = 40;
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_VIEW_HEIGHT,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    backgroundColor: OVERLAY_COLOR,
+  },
+  additionalView: {
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: OVERLAY_COLOR,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    marginHorizontal: 8,
+    paddingHorizontal: 8,
+    marginVertical: 4,
+  },
+  avatar: {
+    width: 34,
+    height: 34,
+    borderRadius: 25,
+    marginRight: 10,
+  },
+  item: {
+    flex: 1,
+    marginBottom: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '500',
+    textAlignVertical: 'center',
+    marginBottom: 2,
+  },
+  username: {
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  textInput: {
+    borderColor: OVERLAY_COLOR,
+    borderStyle: 'solid',
+    height: 48,
+    borderRadius: 20,
+    marginHorizontal: 10,
+    paddingHorizontal: 10,
+  },
+  selectedBehavior: {
+    padding: 7,
+    borderWidth: 2,
+    borderRadius: 20,
+  },
+  behavior: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

app/src/examples/index.ts

@@ -109,6 +109,7 @@ import WithoutBabelPluginExample from './WithoutBabelPluginExample';
 import WobbleExample from './WobbleExample';
 import WorkletExample from './WorkletExample';
 import WorkletRuntimeExample from './WorkletRuntimeExample';
+import KeyboardAvoidingViewExample from './KeyboardAvoidingView';
 import NestedLayoutAnimationConfig from './LayoutAnimations/NestedLayoutAnimationConfig';
 import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 
@@ -265,6 +266,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Bouncing box',
     screen: BouncingBoxExample,
   },
+  KeyboardAvoidingViewExample: {
+    icon: '⌨️',
+    title: 'KeyboardAvoidingView',
+    screen: KeyboardAvoidingViewExample,
+  },
   AnimatedKeyboardExample: {
     icon: '⌨️',
     title: 'useAnimatedKeyboard',

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/Animated.ts

@@ -22,6 +22,7 @@ export { AnimatedView as View } from './reanimated2/component/View';
 export { AnimatedScrollView as ScrollView } from './reanimated2/component/ScrollView';
 export { AnimatedImage as Image } from './reanimated2/component/Image';
 export { ReanimatedFlatList as FlatList } from './reanimated2/component/FlatList';
+export { ReanimatedKeyboardAvoidingView as KeyboardAvoidingView } from './reanimated2/component/KeyboardAvoidingView';
 export {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,