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;