The warning message error Warning : Failed child context type: Invalid child context ‘virtualizedCell.cellKey’ of type ‘number’ supplied to ‘CellRenderer’, expected ‘string’ is one of the most common error in FlatList component in react native. This error is mostly comes with the newly build react native projects because after some modifications we should use virtualizedCell.cellKey should be String value instead of Number value. This is only an update issue and can be easily fixable. So let’s get started :).
Screenshot of error :
To solve Error-Warning : Failed child context type: Invalid child context ‘virtualizedCell.cellKey’ of type ‘number’ supplied to ‘CellRenderer’, expected ‘string’ in React Native FlatList:
1. We need to only put a single line keyExtractor in our FlatList component.
1
|
keyExtractor={ (item, index) => index.toString() }
|
2. The FlatList component should be look like below code.
1
2
3
4
5
6
7
8
9
10
11
|
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.FlatListItemStyle} onPress={this.GetFlatListItem.bind(this, item.fruit_name)} > {item.fruit_name} </Text>}
keyExtractor={ (item, index) => index.toString() }
/>
|
All we are doing is converting the key extractor index value to string.