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

[ishigamii]

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.

[thedanielvogelsang]

I have this issue as well, and am unsure how to proceed. Thanks in advance!

[JanErikFoss]

Same issue

[mmmurf]

+1

[jalooc]

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();

[ishigamii]

@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.

[mtrabelsi]

@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**

[ishigamii]

My bad, by adding the toString() on my part of the code it did remove the warning.

Thanks a lot

[iksent]

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

So toString() fixes the issue.

[huy-lv]

This seems a update of react-native's new version, the virtualizedCell.cellKey should be string instead of number 🤔🤔🤔

[feliperaul]

This warning message should be improved.

[The-Code-Monkey]

@feliperaul warning message is fine it clearly says its received a number when it should be receiving a string

[AboudaSadok]

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

[jamaglian]

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