React Native: how to build a list without a defined item size? (Item size depending on the content inside it)

Question

I am developing a feature similar to a comment screen. As we know, comments have different lengths in which often require bigger or lesser space to contain itself inside a list item.

But apparently, inside my flatlist I am out of ideas to keep the size of the item scalable/dynamic, except for giving them all a hard-coded height, please help! I am wondering if there is any custom package that does this, or I just have to do some tricks to my list.

Little Demo of My Goal:

P.S: I am using a flatlist because I have a long list of item, in which I can't hard code a list.

Answer 1

You don't need to define height for comment parent component view.

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  Image,
  Dimensions,
} from "react-native";
import Constants from "expo-constants";

const comments = [
  {
    id: 1,
    username: "elonmusk",
    message:
      "If I dig my grave deep enough, maybe it comes out other side of Earth ",
    avatar:
      "https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok.jpg",
  },
  {
    id: 2,
    username: "ValaAfshar",
    message: "This incredible animation shows how deep humans have dug.",
    avatar: "https://pbs.twimg.com/profile_images/1259558245/vala_300dpi.jpg",
  },
  {
    id: 3,
    username: "Erdayastronaut",
    message:
      "In my opinion this is you at your best. Getting super deep into really nerdy aspects of rocket science. No agenda, division or trolling. Just pure rocket science. Now THAT is inspiring and uniting! Let’s get humans to Mars!!!",
    avatar:
      "https://pbs.twimg.com/profile_images/1253477073265532928/MmGBMWsQ.jpg",
  },
];

export default function App() {
  const renderItem = ({ item }) => (
    <View
      style={{
        backgroundColor: "white",
        borderRadius: 10,
        borderWidth: 0.3,
        borderColor: "#333",
        marginBottom: 5,
        padding: 10,
      }}
    >
      <View style={{ flexDirection: "row", paddingVertical: 2 }}>
        <Image
          source={{ uri: item.avatar }}
          style={{ width: 30, height: 30, borderRadius: 30 / 2 }}
        />
        <View style={{ paddingHorizontal: 5 }}>
          <Text style={{ fontWeight: "700" }}> {item.username} </Text>
          <Text style={{ width: Dimensions.get("window").width - (60 + 20) }}>
            {item.message}
          </Text>
        </View>
      </View>
    </View>
  );
  return (
    <View style={styles.container}>
      <FlatList
        data={comments}
        renderItem={renderItem}
        keyExtractor={({ id }) => id.toString()}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
});

Live Demo - https://snack.expo.dev/@emmbyiringiro/eea97f