Reputation: 101
(Note: I'm using Expo for this app)
I'm attempting to render a FlatList
that displays a list of printers. Here's the code:
<FlatList
data={printers}
keyExtractor={printer => printer.id}
renderItem={({ item }) => {
return (
<Printer
printerTitle={item.name}
selected={item.selected}
last={item === last(printers)}
/>
);
}}
/>
Here's the code for the <Printer />
component:
const Printer = props => {
const { last, printerTitle, selected } = props;
return (
<View style={[styles.container, last ? styles.lastContainer : null]}>
<View style={styles.innerContainer}>
<View style={styles.leftContainter}>
{selected ? (
<Image source={selected ? Images.checkedCircle : null} />
) : null}
</View>
<View style={styles.printerDetails}>
<Text style={styles.printerTitle}>{printerTitle}</Text>
</View>
</View>
</View>
);
};
...
export default Printer;
I can't seem to get the <Printer />
component to render. I have tried including a similar custom component (that has worked in a FlatList
in another part of the app) in the renderItem
prop, and it doesn't work either.
However, when I replace the <Printer />
component with <Text>{item.name}</Text>
component, the printer name renders like I would expect it to.
Has anyone run into this issue before, or does anyone have a solution?
Upvotes: 10
Views: 26835
Reputation: 1
We also faced the same issue where only 10 items were rendering. It was resolved when I implemented conditional rendering for the FlatList using a ternary operator:
{notifications?.length ? (
<FlatList
data={notifications}
renderItem={renderItem}
keyExtractor={(item, index) => item?._id + index}
style={{ paddingHorizontal: 5, marginTop: 6 }}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.2}
ListFooterComponent={
loadingMore ? <ActivityIndicator size="large" /> : null
}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
/>
) : null}
Upvotes: 0
Reputation: 5968
in my case Container was not having width of 100%:
const Container = styled.View`
border: 1px solid #ececec;
margin-top: 43px;
padding-top: 36px
padding-bottom: 112px;
width: 100%;
`;
const StyledFlatList = styled(
FlatList as new () => FlatList<SimilarRewards_viewer['merchants']['edges'][0]>
)`
width: 100%;
height: 150px;
flex: 1;
padding-left: 15px;
padding-right: 15px;
`;
Upvotes: 0
Reputation: 2322
In my case, where I'm rendering a custom component for each item in the list, it wasn't rendering because I accidentally had {}
surrounding the return part of the renderItem
prop instead of ()
.
Changing:
<FlatList
data={array}
renderItem={({item, index}) => { <CustomItemComponent /> }}
/>
to this:
<FlatList
data={array}
renderItem={({item, index}) => ( <CustomItemComponent /> )}
/>
Solved my issues.
Upvotes: 29
Reputation: 814
In my case I accidentally made it a pair tag: <FlatList></FlatList>
, which for some reason breaks rendering of list items.
Upvotes: 1
Reputation: 71
I have same problem. Resolve with adding width to FlatList
render() {
const dimensions = Dimensions.get('window');
const screenWidth = dimensions.width;
return(
<FlatList
style={{
flex: 1,
width: screenWidth,
}}
... some code here
/>
)
}
Upvotes: 6
Reputation: 20808
I suspect there are two issues at hand: one is that your FlatList is not filling the screen (namely its parent view) and the other is that your Printer component is not being sized correctly.
For the first issue, put a style with { flex: 1 }
on your FlatList. This way it will fill its parent view.
For the second issue, try adding { borderColor: 'red', borderWidth: 1 }
to your Printer components, just so that you can more easily see where they're being rendered. If they seem like they have no width, make sure you haven't overridden alignSelf
on the Printer component's root view. If they seem like they have no height, add height: 100
temporarily just so you can see what the contents of the Printer components look like.
Within your Printer component, make sure to specify the width and height of your image on the Image component like { width: 40, height: 30 }
or whatever the dimensions of your image is in logical pixels.
Upvotes: 7
Reputation: 3438
You can't use the keyExtractor
in this way, make this function like below. It might solve your problem.
_keyExtractor = (item, index) => index;
If you update your question with you printer component code we can help you better.
Upvotes: 1