Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
See original GitHub issueGetting the below warning when I use FlatList and where keyExtractor returns a number.
Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
in CellRenderer (created by VirtualizedList)
in RCTScrollContentView (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by VirtualizedList)
in VirtualizedList (created by FlatList)
Sample Code for reproduction
import React, { Component } from 'react';
import { Text, View, FlatList } from 'react-native';
export default class NotificationSettingsScreen extends Component {
render() {
return (
<View style={{flex: 1, paddingTop: 36}}>
<FlatList
data={[1, 2, 3, 4, 5]}
renderItem={({item}) => (
<View>
<Text>{item}</Text>
</View>
)}
keyExtractor={(item) => item }
/>
</View>
);
}
}
NOTE: Changing keyExtractor={(item) => item.toString()}
makes this warning disappear.
Environment
React-Native: 0.53.0, react: 16.2.0
Expected Behavior
keyExtractor of FlatList must accept number instead of just string
Actual Behavior
Warning when using keyExtractor which returns number
Steps to Reproduce
Check above lines
The above problem could also be due to this commit https://github.com/facebook/react-native/commit/a010a0cebd4afc0d88336c2c265a5d9dbb19918f but not sure …
Issue Analytics
- State:
- Created 6 years ago
- Reactions:94
- Comments:15 (2 by maintainers)
Top Results From Across the Web
Invalid child context 'virtualizedCell.cellKey' of type 'number ...
To fix the error in any list components where a keyExtractor is in use, update the Component (FlatList etc) to have a string...
Read more >Invalid child context `virtualizedCell.cellKey` of type `number`
Warning : Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
Read more >Invalid child context 'virtualizedCell.cellKey' of type 'number ...
Warning : Failed child context type: Invalid child context ... cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'.
Read more >Invalid child context 'virtualizedCell.cellKey' of type - YouTube
iOS : Warning : Failed child context type : Invalid child context ... of type ' number ' supplied to ' CellRenderer ',...
Read more >Invalid child context 'virtualizedCell.cellKey' Solve Error in ...
cellKey ' of type 'number' supplied to 'CellRenderer', expected 'string' is ... React Native Warning Failed child context type: Invalid child ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
keyExtractor = { (item, index) => index.toString() };
The value of keyExtractor must be a string。
The prop expects a string but you’re setting a number. This seems to be working as expected.