makozlo
makozlo

Reputation: 101

React Native - FlatList Not Rendering

(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

Answers (7)

Mohan Kumar M P
Mohan Kumar M P

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

gpbaculio
gpbaculio

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

Jim
Jim

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

Eskel
Eskel

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

Pavel Zyryanov
Pavel Zyryanov

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

ide
ide

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

Vahid Boreiri
Vahid Boreiri

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

Related Questions