Cannot get text input to move up and sit on top of the keyboard when it shows in React Native using react-native-keyboard-controller library

Question

I just cannot get my text input to sit on top of the keyboard when it shows. I can get it to move up as the keyboard appears but there is always this annoying gap and I do not know how to get rid of it.

I did get it sitting on top of the keyboard when using KeyboardAvoidingView - although it stopped working when i added a SafeAreaView so I would need to account for that to get it working again, but anyway apparently KeyboardAvoidingView performs poorly on android so I do not want to use that.

So I have been trying with KeyboardStickyView and KeyboardAwareScrollView from the react-native-keyboard-controller library, yet they just do not work - i consistently just end up with this annoying gap between the top of the keyboard and bottom of the text input with both of those (I will attach an image of this and the code that produces said image).

import { StyleSheet } from "react-native";

import { View } from "@/components/Themed";
import { TextInput } from "react-native";
import {
  KeyboardStickyView,
  KeyboardProvider,
} from "react-native-keyboard-controller";

export default function TabFourScreen() {
  return (
    <KeyboardProvider>
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}></View>
        <KeyboardStickyView>
          <TextInput
            style={styles.textInput}
            placeholder="Type a message..."
          ></TextInput>
        </KeyboardStickyView>
      </View>
    </KeyboardProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    borderColor: "black",
    borderWidth: 5,
    width: "100%",
    padding: 20,
    borderRadius: 10,
  },
});