React Native FlatList won't render

Question

I'm trying to implement a FlatList in my React Native application, but no matter what I try the darn thing just won't render!

It's intended to be a horizontal list of images that a user can swipe through, but at this point I'd be happy to just get a list of text going.

Here's the relevant code. I can confirm that every render function is called.

render() {
    const cameraScreenContent = this.state.hasAllPermissions;
    const view = this.state.showGallery ? this.renderGallery() : this.renderCamera();
    return (<View style={styles.container}>{view}</View>);
}

renderGallery() { //onPress={() => this.setState({showGallery: !this.state.showGallery})}
    return (
       <GalleryView style={styles.overlaycontainer} onPress={this.toggleView.bind(this)}>
       </GalleryView>
    );
}

render() {
    console.log("LOG: GalleryView render function called");
    console.log("FlatList data: " + this.state.testData.toString());
    return(
            <FlatList
             data={this.state.testData}
             keyExtractor={this._keyExtractor}
             style={styles.container}
             renderItem={
                ({item, index}) => {
                    this._renderImageView(item, index);
                }
             }
             />
        );
    }
}

_keyExtractor = (item, index) => index;

_renderImageView = (item, index) => {
    console.log("LOG: renderItem: " + item);
    return(
        <Text style={{borderColor: "red", fontSize: 30, justifyContent: 'center', borderWidth: 5, flex: 1}}>{item}</Text>
    );
}

//testData: ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9"]

I'm fairly confident this isn't some flex issue, but in case I missed something here's the relevant stylesheets too:

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  overlaycontainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between' 
  },
});

So, what I'm expecting to happen is to see a list of text items.

What's happening instead is I see a white screen with nothing on it.

Why is this list not rendering?

Answer 1

Are you not missing the return on your renderItem?

render() {
    console.log("LOG: GalleryView render function called");
    console.log("FlatList data: " + this.state.testData.toString());
    return(
            <FlatList
             data={this.state.testData}
             keyExtractor={this._keyExtractor}
             style={styles.container}
             renderItem={
                ({item, index}) => {
                    return this._renderImageView(item, index);
                }
             }
             />
        );
    }
}

Answer 2

You can try replicating this if you want, define FlatList inside your return().

 <View>
   <FlatList
    data={Items}
    renderItem={this.renderItems}
    enableEmptySections
    keyExtractor={item => item.id}
    ItemSeparatorComponent={this.renderSeparator}
   />
</View>

Then declare your Items inside constant(array of objects) outside your class like this,

const Items = [
{
id: FIRST,
title: 'item1',
},
{
id: SECOND,
title: 'item2',
},
{
id: THIRD,
title: 'item3',
},
// and so on......
];

After this get your items outside render by calling a function

onSelection = (item) => {
 console.log(item.title)
}

renderItems = ({ item }) => {
return(
  <TouchableOpacity 
    onPress={() => this.onSelection(item)}>
    <View>
      <Text>
          {item.title}
      </Text>
    </View>
  </TouchableOpacity>
)
}