Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`

This post is about the Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string` If are working with the FlatList then you can see this warning.

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`

If you check the code that you have written for the FlatList then you can see something similar to the below code.

<FlatList
  keyExtractor={(item, index) => index}
  data={this.state.serverData}
  renderItem={({ item, index }) => (
    <View style={styles.item}>
      <Text style={styles.text}>
        {item.id}
        {'.'}
        {item.title.toUpperCase()}
      </Text>
    </View>
  )}
/>

If the above code is somewhat similar to you code then the problem is keyExtractor prop expects a string but you’re getting a number.

So to solve this issue you need to add toString while setting up the value for keyExtractor.

keyExtractor = { (item, index) => index.toString() }; 

This is how updated code will look like

<FlatList
  keyExtractor={(item, index) => index.toString()}
  data={this.state.serverData}
  renderItem={({ item, index }) => (
    <View style={styles.item}>
      <Text style={styles.text}>
        {item.id}
        {'.'}
        {item.title.toUpperCase()}
      </Text>
    </View>
  )}
/>

This is how you can solve the warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string. If you still have any issue then you can also follow this thread.