react native flatlist not rendering

Question

I've been experimenting with react native and I cannot get my FlatList to render correctly. Here is the component. If it matters, I am using react-navigation to render this component.

class FactoryScreen extends React.Component {
  static navigationOptions = {
    title: 'test test',
  };

  constructor(props) {
    super(props);

    this.state = {
      datasource: [
        {
          id: 21, machine_key: 'f', clamp_id: 'c0',
        },
        {
          id: 22, machine_key: 'f', clamp_id: 'c1',
        },
        {
          id: 23, machine_key: 'f', clamp_id: 'c2',
        },
      ]
    };
  }

  render() {
    const { goBack } = this.props.navigation;
    return (
      <List style={{flex: 1}}>
        <FlatList
          data={this.state.datasource}
          renderItem={({item}) => {
            console.log(item);
            return (<ListItem title={`${item.clamp_id} clamp`} />);
          }}
        />
      </List>
    );
  }
}

I can see my item object get logged to the console but I can't get it to render for whatever reason. Any thoughts as to what I am doing wrong?

Answer 1

The problem isn't React Navigation

First make sure your <LisItem> component can display data. If this component from native-base make sure double check the List component documentation here

Than you need key extractor for this. here's the example

... 

  _keyExtractor = (item, index) => item.id;

  render() {
    return (
      <List style={{flex: 1}}>
        <FlatList
          data={this.state.datasource}
          keyExtractor = {this._keyExtractor} 
          renderItem={({item}) => {
            console.log(item);
            return ( <Text>{`${item.clamp_id} clamp`} clamp</Text>); 
          }}          
        />
      </List>

    );
  }

...