Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>