برنامه نویسی react native

با سلام
من قصد دارم یک اپ اندروید با react native , native base و Expo طراحی کنم که در یکی از صفحات برنامه لازم هست که یک صفحه‌ی چت طراحی بشه ، در استفاده از کیبورد توی این صفحه چت به مشکل برخورد کردم ، مشکل این هست که وقتی کیبورد بالا میاد تنظیمات صفحه کاملا بهم می‌خوره و حتی هدر صفحه هم به سمت بالا (بیرون صفحه) حرکت می‌کنه
برای حل این مشکل سرچ زیادی انجام دادم اما هیچ کدوم از روش ها توی برنامه ‌ی من به حل مشکل کمک نکرده

آیا کسی می‌تونه توی حل این مشکل راهنمایی کنه ؟

اینم هم‌کد صفحه‌ی چت هست :

import React, { Component } from 'react';  
import { Pressable } from "react-native"  
import {  
NativeBaseProvider,  
StatusBar,  
VStack,  
HStack,  
Center,  
Menu,  
Divider,  
HamburgerIcon,  
Text,  
ScrollView,  
TextArea,  
Button,  
Box,  
Icon,  
Image,  
} from 'native-base';  
import { reply, alternative, trigger } from "./dataset";  
import { Generateresponses } from './Generate responses';  
import { AntDesign } from '@expo/vector-icons';

export var messagearry = \[\];

class PageaChat extends Component {  
gr = new Generateresponses()

constructor(props) {  
super(props);

this.state = {
    Inputtxt: "",
    arrystate: false,
    InputState: false,
    hightscroll: "83%",
    imenu: 0
};

}

render() {

const { navigation } = this.props;

return (
    <NativeBaseProvider >
        <VStack flex={1} w="100%" >
            <StatusBar backgroundColor="#724878" />

            <HStack h="8%" bgColor="#955e9e" alignItems="center" >
                <Image
                    size={60}
                    resizeMode="cover"
                    source={require('F:/Course/react native/my-app/Image/2.png')}
                    alt={"Alternate Text " + 50}
                />
                <Image
                    w="60%"
                    h="70%"
                    left="30%"
                    resizeMode="cover"
                    source={require('F:/Course/react native/my-app/Image/name.png')}
                    alt={"Alternate Text " + 50}
                />
                <Menu
                    trigger={(triggerProps) => {
                        return (
                            <Pressable accessibilityLabel="More options menu" {...triggerProps}
                                left="90%" top={0}>
                                <HamburgerIcon />
                            </Pressable>
                        )
                    }}

                >
                    <Menu.Item key={1024} onPress={() => {
                        messagearry = []
                        this.setState({
                            arrystate: false,
                        })
                    }} >پاک کردن پیام ها</Menu.Item>
                    <Menu.Item key={this.state.imenu + 2} onPress={() => {
                        this.setState({
                            arrystate: false,
                        })
                        navigation.navigate('sign')
                        messagearry = []
                    }}>تغییر نام</Menu.Item>
                    <Divider />
                    <Menu.Item key={this.state.imenu + 3} onPress={() => {
                        this.setState({
                            arrystate: false,
                        })
                        navigation.navigate('start')
                        messagearry = []

                    }}>خروج</Menu.Item>
                </Menu>
            </HStack>

            <VStack h={this.state.hightscroll}>

                <ScrollView
                    bg="#fff"
                    w="100%"

contentContainerStyle={{  
bg: "#ffff",  
w: "100%",  
}}

> &lt;VStack left={0} bg="#fff" &gt;  
> {messagearry.map((val) =&gt; {  
> if (val.T == "user") {  
> return (  
> &lt;Center maxW="60%" rounded={20} p={4} bg="#e4d3ee" my={5} mb={3} align="flex-end" left="38%" right={2} &gt;  
> &lt;Text flex={1}&gt; {val.M} &lt;/Text&gt;  
> &lt;/Center&gt;

                                )
                            } else {
                                return (
                                    <Center maxW="60%" rounded={20} p={4} bg="#e1fcec" my={5} mb={3} left={2}>
                                        {val.M}
                                    </Center>)
                            }
                        })}
                    </VStack>
                </ScrollView>
            </VStack>

            <HStack h="9%" bgColor="#fff" >
                <TextArea h={12}
                    w="85%"
                    top={1}
                    left={2}
                    rounded={15}
                    borderColor="#955e9e"
                    multiline={true}
                    numberOfLines={5}
                    placeholder="متن خود را وارد کنید"
                    value={this.state.Inputtxt}
                    _focus={{ borderColor: "#955e9e" }}
                    onChangeText={(txt) => {
                        this.setState({
                            Inputtxt: txt
                        })
                    }}
                />

                <Button
                    w={45}
                    h={49}
                    bg="#955e9e"
                    top={1}
                    Bottom={2}
                    left={3}
                    rounded={60}
                    startIcon={<Icon as={AntDesign} name="doubleright" size="xs" />}
                    _pressed={{ bg: "#967499" }}
                    onPress={() => {
                        if (this.state.Inputtxt != "") {
                            var temp = this.state.Inputtxt
                            messagearry.push({ T: "user", M: temp })
                            this.setState({
                                Inputtxt: "",
                                arrystate: true,
                            })
                            var chr = this.gr.comparee(trigger, reply, temp)
                            messagearry.push({ T: "bot", M: chr })
                        }

                    }}></Button>
            </HStack>

        </VStack >
    </NativeBaseProvider >

);

}

}

export default PageaChat;