React Native - FlatList Not Rendering

Question

(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?

Cragsman

What is the Printer component look like? How do you export it? How do you import it? Did you tried to put the rendered component in Printer directly into renderItem? Do you get any errors? – Dead

Answer 1

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.

Canonry

Yeah! This is the perfect solution – Delphinium

One of those you spend hours trying to see what's going on, and all you need is another set of eyes... – Coast

To be consistent, keep the braces and inside it do return ( <CustomItemComponent/>); – Murdock

Answer 2

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.

Poetics

Answer 3

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
      />
    )
}

Lepore

This was it for me. Added Width: '100%' in the styling and it worked – Squarrose

Answer 4

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.

Ferial

Answer 5

In my case I accidentally made it a pair tag: <FlatList></FlatList>, which for some reason breaks rendering of list items.

Razorbill

Answer 6

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;
`;

Misadventure