React native Chat UI Flatlist or Recyclerlistview?

Question

I design a chat app, and I got the problem. If I click on textInput when my header goes very small my textinput field is small to. Can anyone explain me why ? I have 2 screens , the first if is not focused and the second when I click on textinput.

Not focused:

Focused:

Code:

import * as React from 'react';
import { StyleSheet, Text, View, Pressable, Image, TextInput, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, Entypo } from '@expo/vector-icons';
import ChatRoom from '../components/Chat/ChatRoom';

const Chat = ({ route, navigation }) => {
  const { userID, username, image } = route.params;

  function handleGoBack() {
    navigation.goBack();
  }
  return (
    <View style={s.container}>
      <View style={{flex: 0.1, backgroundColor: 'red'}}>
        <View style={s.header}>
          <Pressable onPress={handleGoBack}>
            <Ionicons name="arrow-back-sharp" size={24} color="#eee" />
          </Pressable>
          <Pressable style={s.userMidHeader}>
            <Image style={s.profile_image} source={{uri: image}} resizeMode="contain" />
            <Text style={s.username}>{username}</Text>
          </Pressable>
          <Pressable>
            <Entypo name="dots-three-horizontal" size={24} color="#eee" />
          </Pressable>
        </View>
      </View>
      <View style={{flex: 0.83}}>
        <ChatRoom />  (Recyclerlistview)
      </View>
      <View style={[s.end, { flex: 0.07 }]}>
        <TextInput value="1" style={{width: 400, flex: 1, backgroundColor: 'blue'}} />
      </View>
    </View>
  )
};

const s = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: 'red',
    paddingTop: 30,
    paddingLeft: 10,
    paddingRight: 10
  },
  profile_image: {
    height: 32,
    width: 32,
    borderRadius: 200
  },
  username: {
    fontFamily: 'montserrat-semibold',
    color: '#eee',
    marginLeft: 6
  },
  userMidHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  }
});

export default Chat;

In the last picture you can see I can not scroll to the bottom to see the latest messages. So I removed "View style={s.container}" and replaced with

But now my header is not fixed and my input is not fixed