in my application, i’m building a chat screen. i want my textInput container to take up the height of textInput, but the container is not taking any height i have to manually set the height of container, but on setting fixed container height, it is not growing when textInput size is growing

the problems i’m facing

1. input container is not taking child’s height.
2. flatList is not showing unless i remove flex:1 from flatList and it’s container and set fixed height to flatList.

i have shared my code below
i’m using nativewind also for styling

can anyone give any suggestions to rectify this?

import React from "react";
import {
  FlatList,
  Image,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  SafeAreaView,
  TextInput,
  View,
} from "react-native";
import SpriteIcon from "../components/SpriteIcon";
import { DefaultText } from "../components/wrappers/DefaultText";
import { Ionicons } from "@expo/vector-icons";
type Message = {
  id: string;
  content: string;
  time: string;
  sender: string;
};
const messages: Message[] = [
  {
    id: "1",
    content:
      "Hi! Your profile seems really interesting. Can I find out if it is the same with you?",
    time: "11:10 PM",
    sender: "self",
  },
  { id: "2", content: "Hello", time: "11:12 PM", sender: "other" },
  {
    id: "3",
    content: "What are you doing this weekend?",
    time: "11:15 PM",
    sender: "self",
  },
  {
    id: "4",
    content: "We should meet up for coffee. How about CCD 6pm?",
    time: "11:18 PM",
    sender: "other",
  },
  {
    id: "5",
    content:
      "Hi! Your profile seems really interesting. Can I find out if it is the same with you?",
    time: "11:10 PM",
    sender: "self",
  },
  { id: "6", content: "Hello", time: "11:12 PM", sender: "other" },
  {
    id: "7",
    content: "What are you doing this weekend?",
    time: "11:15 PM",
    sender: "self",
  },
  {
    id: "8",
    content: "We should meet up for coffee. How about CCD 6pm?",
    time: "11:18 PM",
    sender: "other",
  },
];

export default function Conversation() {
  const RenderItem = ({ item: msg }: { item: Message }) => {
    const { id, content, time, sender } = msg;
    const mine = sender === "self";
    return (
      <View
        className={`gap-2 mb-6 ${mine ? "flex-row-reverse self-end" : "flex-row"}`}
      >
        <Image
          className="rounded-full w-11 h-11"
          source={{
            uri: "imageUrl",
          }}
        />
        <View
          className={`${mine ? "bg-[#d9e0fa] border-[#bec8e1]" : "bg-white border-[#e6e7ec]"} border p-2 rounded-[3px] relative min-w-[25%] max-w-[70%]`}
        >
          <DefaultText className="pb-4">{content}</DefaultText>
          <DefaultText className="text-xs text-[#333] self-end ml-2">
            {time}
          </DefaultText>
        </View>
      </View>
    );
  };

  return (
    <SafeAreaView>
      {/* header */}
      <View className="flex-row justify-between pb-2 px-2 h-14 border-0 border-b border-solid border-b-[#ddd] bg-[#f3f4f9]">
        <View className="flex-row items-center gap-3">
          <Pressable>
            <SpriteIcon
              containerStyle={{ height: 28, width: 16 }}
              imageStyle={{
                width: 330,
                height: 440,
                left: -310,
                top: -146,
              }}
              source={require("../../assets/images/icons_sprite.png")}
            />
          </Pressable>
          <Image
            className="rounded-full w-11 h-11"
            source={{
              uri: "imageUrl",
            }}
          />

          <DefaultText className="text-[#444] text-lg">{"Guru"}</DefaultText>
        </View>
        <View className="flex-row justify-center items-center mr-2">
          <FlatList
            data={[1, 2, 3, 4]}
            numColumns={2}
            columnWrapperStyle={{ justifyContent: "space-between" }}
            keyExtractor={(item) => item.toString()}
            renderItem={() => (
              <View className="h-[6px] w-[6px] mb-[1px] mr-[1px] rounded-full bg-black "></View>
            )}
          />
        </View>
      </View>
      {/* chat section */}
      <KeyboardAvoidingView
        className="bg-['#f3f4f9'] px-3 pt-3 gap-6 flex-1"
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        keyboardVerticalOffset={Platform.OS === "ios" ? 10 : 0}
      >
        <FlatList
          data={messages}
          keyExtractor={(item) => item.id}
          renderItem={RenderItem}
          className="bg-orange-400 flex-1"
        />
        {/* input container */}

        <View className="flex-row border border-[#e6e7ec] rounded-[4px] items-center px-2 gap-2">
          <TextInput
            placeholder="Message"
            multiline={true}
            numberOfLines={3}
            textAlignVertical="top"
            className="flex-1 py-2 min-h-14 max-h-48"
          />
          <Pressable className="w-5 pb-2 justify-center min-h-14 max-h-48">
            <Ionicons name="send" color={"gray"} size={20} />
          </Pressable>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );

output of above code