React Native FlatList error: No overload matches this call. Type is missing the following properties

Question

I am new to React Native, and am trying to build a simple chat room application. I want to create a list with elements representing available chat rooms, and I can't for the life of me figure out why the FlatList keeps giving me this error. I have given both a data prop and a renderItem prop to the FlatList. I have tried changing the renderItem prop to something simple that didn't reference const ChatRoom and it made no difference.

"No overload matches this call.
Overload 1 of 2, '(props: FlatListProps<unknown> | Readonly<FlatListProps<unknown>>): FlatList<unknown>', gave the following error.
Type '{ children: (string | { name: string; description: string; }[] | (({ item }: { item: any; }) => Element))[]; }' is missing the following properties from type 'Readonly<FlatListProps<unknown>>': data, renderItem\n  Overload 2 of 2, '(props: FlatListProps<unknown>, context: any): FlatList<unknown>', gave the following error.
Type '{ children: (string | { name: string; description: string; }[] | (({ item }: { item: any; }) => Element))[]; }' is missing the following properties from type 'Readonly<FlatListProps<unknown>>': data, renderItem",
    "source": "ts",
    "startLineNumber": 18,
    "startColumn": 6,
    "endLineNumber": 18,
    "endColumn": 14

const RoomSelectionScreen = props => {
  const rooms = [
    { name: "Room num 1", description: "First room" },
    { name: "Room num 2", description: "Second room" },
    { name: "Room num 3", description: "Third room" }
  ];

  const Item = ({ item }) => {
    return <ChatRoom name={item.name}s description={item.description} />;
  };

  return <View>
    <Text style={styles.text}>Room Selection</Text>
    <FlatList>
      data={rooms}
      renderItem={Item}
    </FlatList>
  </View>;
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30
  }
});

export default RoomSelectionScreen;

const ChatRoom = props => {
    return <View>
        <Text style={styles.roomName}>{props.name}</Text>
        <Text style={styles.roomDescription}>{props.description}</Text>
        <Button
            title="Go to room"
            onPress={() => openChatRoom()}
        />
    </View>;
};

function openChatRoom() {

}

const styles = StyleSheet.create({
    roomName: {
        fontSize: 30
    },
    roomDescription: {
        fontSize: 15
    }
});

export default ChatRoom;

Answer 1

You are currently running the FlatList without its props when you do this

<FlatList>
   data={rooms}
   renderItem={Item}
</FlatList>

Solution:

  <FlatList
      data={rooms}
      renderItem={Item}
  />

or

<FlatList
  data={rooms}
  renderItem={Item}>
</FlatList>