KeyboardAccessoryView pushes bottom SafeAreaView above his children

[Brma1048]

What I have done:

I have a KeyboardAccessoryView inside a SafeAreaView. The red and green views are the content from a chat conversation and the yellow part is a text input field to write a new message. The blue part is the SafeAreaView, normally it is orange but the KeyboardAccessoryView (blue) overlaps the SafeAreaView. The green parts are there to show the top and bottom edges of the content, which should be the complete remaining space of the screen all the time (with and without the keyboard).

What I receive:

Keyboard closed	Keyboard opened
The safeAreaView is normally orange but the KeyboardAccessoryView overlays the SafeAreaView so in this picture the safeAreaView is blue	Here we can see that the SafeAreaView get pushed up (orange is above yellow)

What I expected:
I expected that the safeAreaView (orange) is no longer visible and not pushed above the input (yellow) when the keyboard is visible.

Here is my implementation:

  /**
    * Package.json:
    * "react": "16.13.1",
    * "react-native": "0.63.4",
    * "react-native-safe-area-context": "3.2.0",
    * "react-native-keyboard-accessory": "0.1.14",
    */

import React from 'react';
import { View, TextInput } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import {KeyboardAccessoryView} from "react-native-keyboard-accessory";

const TestComponent = () => {
    return (
             <SafeAreaView style={{flex: 1, backgroundColor: 'orange'}}>
                <View style={{flex: 1}}>
                   <View style={{height: 20, backgroundColor: 'green'}}/>
                   <View style={{flex: 1, backgroundColor: 'red'}}/>
                   <View style={{height: 20, backgroundColor: 'green'}}/>
                </View>
                <KeyboardAccessoryView
                   style={{ backgroundColor: 'blue'}}
                   alwaysVisible
                   hideBorder
                   inSafeAreaView
                   androidAdjustResize
                   avoidKeyboard
                >
                   <TextInput style={{ height: 50, borderColor: 'red', borderWidth: 1, backgroundColor: 'blue'}}/>
                </KeyboardAccessoryView>
             </SafeAreaView>
     );
 }

My workaround:
I have patched the package and change the visibleHeight in line 161

react-native-keyboard-accessory/src/KeyboardAccessoryView.js

Line 161 in 4f98a2b

<View style={{ height: (isKeyboardVisible || alwaysVisible ? visibleHeight : 0) }}>

to:

<View style={{ height: (isKeyboardVisible || alwaysVisible ? (visibleHeight - (isKeyboardVisible && applySafeArea ? this.props.bottomInset : 0))  : 0) }}>

and added also the bottomInset Prop to KeyboardAccessoryView.js and then i use the useSafeAreaInsets() from 'react-native-safe-area-context' and set the bottomInset from the KeyboardAccessoryView

Is there any better solution to fix this?