Previously, I was using a React Native FlatLis
like this. Here data
is obtained via a graphql query:
return (<SafeAreaView><View><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text style={styles.searchCancelResetText} onPress={() => { setUserData(null); navigation.goBack(); }}> Cancel</Text></View><View style={styles.listHolder}> {data && (<FlatList data={data.users.nodes} horizontal={false} scrollEnabled renderItem={({ item }) => (<User user={item} originatorId={route.params.originatorId} //onSendRequest={onSendRequest} /> )} keyExtractor={(item) => item.id.toString()} ListEmptyComponent={NoFriendsContainer} /> )}</View></View></View></SafeAreaView> );
This worked fine and didn't give any errors. However, now I am trying to make a separate component FlatList
which returns a FlatList only (under a View
).
export const FlatList: React.FunctionComponent<UserProps> = ({ data, originatorId,}) => { return (<View><FlatList data={data.users.nodes} horizontal={false} scrollEnabled renderItem={({ item }) => (<User user={item} originatorId={originatorId} //onSendRequest={onSendRequest} /> )} keyExtractor={(item) => item.id.toString()} ListEmptyComponent={NoFriendsContainer} /></View> );};
I get errors on the horizontal
property that:
Type '{ data: any; horizontal: boolean; scrollEnabled: true; renderItem: ({ item }: { item: any; }) => Element; keyExtractor: (item: any) => any; ListEmptyComponent: FunctionComponent<{}>; }' is not assignable to type 'IntrinsicAttributes & UserProps & { children?: ReactNode; }'. Property 'horizontal' does not exist on type 'IntrinsicAttributes & UserProps & { children?: ReactNode; }'.ts(2322)
Similarly, I get an error on item
from keyExtractor
and renderItem
that
Parameter 'item' implicitly has an 'any' type.
How can I fix this? I am using the code for the FlatList in both codes then why do I see an error in the second case and not the first one?