Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'
ishigamii opened this issue · comments
HI, I am currently using :
"react": "16.2.0"
"react-native": "0.53.0"
I created a brand new project and added the react-native-pdf, the app launch well and the pdf is shown no problem for that but I get the following warning. :
my code is a simple copy and paste of yours :
import Pdf from 'react-native-pdf';
...
render() {
const source = {uri:'http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf',cache:false};
return (
<View style={styles.container}>
<Pdf source={source}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
style={styles.pdf}/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
}
});
Maybe I missed a step or is that an issue ?
Thanks a lot.
Best regards.
I have this issue as well, and am unsure how to proceed. Thanks in advance!
Same issue
+1
You need to create an issue in the react-native-pdf
repo with these hints:
Just cast the key to string within the keyExtractor
prop in https://github.com/wonday/react-native-pdf/blob/master/PdfView.js#L109.:
_keyExtractor = (item, index) => index.toString();
@jalooc I modified the line on my project (on my local version of the PdfView.js) and rerun the app and the problem is still the same.
@jalooc is right
But First of all this problem inherited from React-native and has nothing to do with R-N-PDF ;)
React-native is expecting String keys, you can use transform function to convert it easily :
function transformReports(rawReports) {
return rawReports.map(report => (
{
title: report.title,
key: `${report.id}`, <-- the trick!
}
));
}
just make sure that you have string based keys passed to <List**
My bad, by adding the toString() on my part of the code it did remove the warning.
Thanks a lot
keyExtractor={(item, index) => index.toString()}
So toString()
fixes the issue.
This seems a update of react-native's new version, the virtualizedCell.cellKey
should be string
instead of number
🤔🤔🤔
This warning message should be improved.
@feliperaul warning message is fine it clearly says its received a number when it should be receiving a string
how can i fix this one
<FlatList
keyExtractor={(x, i) => i.toString()} // this line of code is causing the warning
ItemSeparatorComponent={this.renderSeparator}
ListFooterComponent={this.renderFooter}
ListEmptyComponent={this.renderEmptyList}
/>
it still giving the same worning
You can fix that with other way
Before
keyExtractor={(x, i) => i}
After
keyExtractor={(x, i) => i + ''}
Only add '' to your string, this resolve to me