android - TextInput and KeyboardAvoidingView are not working correctly

There is a chat application that I developed with React native. I have written a simple version of the main screen of the application below.

A very simple incident took up a lot of my time. This TextInput and the keyboard are not compatible with each other. I just can’t do the logic correctly. What I want to do is this: The user will be able to write a message in a normal height area or write in full screen if they wish.

When I click on TextInput and the keyboard opens, the keyboard input goes up. It’s true so far.

When the user presses the red button in the code below, I want the textInput to extend to the header. If I open the keyboard when I do this, most of the input remains below the keyboard. How can I write logic correctly?

import React, { useState } from "react";
import {
    View,
    TextInput,
    Platform,
    KeyboardAvoidingView,
    Dimensions,
    SafeAreaView,
    Text,
    TouchableOpacity,
} from "react-native";

function Main() {
    const [text, setText] = useState("");
    const [fullScreen, setFullScreen] = useState(false);

    const units = {
        width: Dimensions.get("window").width,
        height: Dimensions.get("window").height,
    };


    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
            <KeyboardAvoidingView
                behavior={Platform.OS == "android" ? "height" : "padding"}
                style={{ flex: 1 }}
            >
                <View style={{ height: 68, width: units.width, backgroundColor: "grey" }}>
                    <Text>Header</Text>
                </View>
                <View style={{ flex: 1, backgroundColor: "cyan" }}>
                    {/* chat messages will then be rendered here */}
                </View>
                <View style={{ backgroundColor: "orange", paddingVertical: 10 }}>
                    <TextInput
                        placeholder="Type here"
                        value={text}
                        onChangeText={setText}
                        placeholderTextColor={"black"}
                        style={{
                            maxHeight: units.height / 6,
                            color: "white",
                            backgroundColor: "green",
                        }}
                        multiline
                    />
                    <TouchableOpacity
                        style={{
                            height: 20,
                            width: 20,
                            backgroundColor: "red",
                            position: "absolute",
                            bottom: 10,
                            right: 0
                        }}
                        onPress={() => setFullScreen(!fullScreen)}
                    />
                </View>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
}

export default Main;