Add KeyboardAvoidingView

[Latropos]

Summary

In this PR we are going to keep fixing bugs with our custom KeyboardAvoidingView.
The base of this PR was done by @terrysahaidak (Thank you ❤️)

Test plan

	Position	Padding	Height	Undefined
B E F O R E	Screen.Recording.2023-09-05.at.12.32.02.mov	Screen.Recording.2023-09-05.at.12.29.20.mov	Screen.Recording.2023-09-05.at.12.29.31.mov	Screen.Recording.2023-09-05.at.12.29.41.mov
A F T E R	Screen.Recording.2023-09-05.at.13.48.01.mov	Screen.Recording.2023-09-05.at.13.48.13.mov	Screen.Recording.2023-09-05.at.13.55.13.mov	Screen.Recording.2023-09-05.at.13.55.22.mov

Testing with SafeAreaView and no navigation stack

Testing code

Replace the code in /Example/App.tsx with the following:

import React, {useState} from 'react';
import {
  View,
  TextInput,
  StyleSheet,
  Text,
  Button,
  KeyboardAvoidingView as RNKeyboardAvoidingView,
  Switch,
  TouchableOpacity,
  SafeAreaView as RNSafeAreaView,
} from 'react-native';
import Animated from 'react-native-reanimated';
import {SafeAreaView as RNSACSafeAreaView} from 'react-native-safe-area-context';

export default function App() {
  const [useReanimated, setUseReanimated] = useState(false);
  const [useSafeAreaContext, setUseSafeAreaContext] = useState(false);

  const [behavior, setBehavior] = useState<
    'position' | 'height' | 'padding' | undefined
  >(undefined);

  const KeyboardAvoidingView = useReanimated
    ? // @ts-ignore
      Animated.KeyboardAvoidingView
    : RNKeyboardAvoidingView;

  const SafeAreaView = useSafeAreaContext
    ? // @ts-ignore
      RNSACSafeAreaView
    : RNSafeAreaView;

  return (
    <SafeAreaView style={styles.flexOne}>
      <View style={[styles.upperBar, styles.additionalTopMargin]}>
        <Text>Use safe-area-context SafeAreaView</Text>
        <Switch
          value={useSafeAreaContext}
          onChange={evt => setUseSafeAreaContext(evt.nativeEvent.value)}
        />
      </View>
      <View style={styles.upperBar}>
        <Text>Use Reanimated KeyboardAvoidingView</Text>
        <Switch
          value={useReanimated}
          onChange={evt => setUseReanimated(evt.nativeEvent.value)}
        />
      </View>
      <View style={styles.upperBar}>
        {(['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}
        contentContainerStyle={styles.flexOne}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <TextInput placeholder="Username" style={styles.textInput} />
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </KeyboardAvoidingView>
      <View style={styles.additionalView}>
        <Text>Bottom view</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  flexOne: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  header: {
    fontSize: 36,
    marginBottom: 48,
  },
  textInput: {
    borderColor: '#000000',
    borderBottomWidth: 1,
    marginBottom: 36,
  },
  btnContainer: {
    marginTop: 12,
  },
  additionalView: {
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'gray',
  },
  selectedBehavior: {
    padding: 7,
    borderWidth: 2,
    borderRadius: 20,
  },
  behavior: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  upperBar: {
    height: 40,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    backgroundColor: 'rgba(29, 28, 29, 0.13)',
  },
  additionalTopMargin: {
    marginTop: 50,
  },
});

[efstathiosntonas]

Hey guys, can someone please review this? Thanks!! ❤️

[kirillzyusko]

Hello @tomekzaw @szydlovsky @Latropos,

I hope this message finds you well. I wanted to reach out to discuss the implementation of KeyboardAvoidingView in the REA package. I currently maintain a package known as react-native-keyboard-controller, which has had a KeyboardAvoidingView component for some time now. Both implementations share a significant resemblance, as they were both inspired by the original KeyboardAvoidingView from React Native.

I'm certainly not against the idea of integrating this component into the core of the REA package, but I think it has some drawbacks, such as:

• additional workload for you guys to develop new features, address issues for new component, etc.
• KeyboardAvoidingView is not related directly to core animations and concepts (worklets/shared values) provided by REA. It's the component that depends on this package, and I think it can be moved out of the core library? Maybe you can post it as additional independent component/package?

What do you think guys about it?

[Latropos]

This fixes this issue #4815

Screen.Recording.2023-11-09.at.10.56.37.mov

[bglgwyng]

Is the existing implementation not responsive to changes in the parent view's layout? It seems that way, as it only measures the layout during the initial handling of the onLayout callback. Please correct me if I'm mistaken.

I've independently implemented this alternative KeyboardAvoidingView. In my implementation, I utilized measure to obtain the dimensions of the container element with each animated value change. Have you considered this approach?

[bglgwyng]

I think we need props to configure isStatusBarTranslucentAndroid ofuseAnimatedKeyboard. The usage of KeyboardAvoidingView unset the status bar translucency for now.

I initially believed that isStatusBarTranslucentAndroid was intended for adjustments rather than altering the translucency itself. Is it intended useAnimatedKeyboard to have side-effects on the view?

[Latropos]

@bglgwyng Hi! Why dod you say that "the usage of KeyboardAvoidingView unset the status bar translucency"? I've just tested it and was unable to reproduce.
I've simply used import { StatusBar, } from 'react-native'; and <StatusBar translucent backgroundColor="#11ff1144" />

[bglgwyng]

@Latropos Sorry for the late reply. I'll share the example code soon!

[piaskowyk]

We have two similar implementations of KeyboardAvoidingView - here and here. Both approaches require further work to be completed. Currently, KeyboardAvoidingView is not our top priority, so let's postpone these changes for a more opportune moment. I propose continuing the work on @terrysahaidak's original PR to give credit for the idea. If someone decides to further develop this feature, they can simply combine changes from both PRs to the original one.