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

[sylvainbouxin]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

Since I upgraded from react-native 0.51 to 0.53, I get this warning in the Adenda: Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'

Expected Behavior

What action did you perform, and what did you expect to happen?
I upgraded from react-native 0.51 to 0.53

Observed Behavior

What actually happened when you performed the above actions?
the warning is poping.

If there's an error message, please paste the full terminal output and error message in this code block:
No error, just a warning...

Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.
in CellRenderer (at VirtualizedList.js:681)
in RCTView (at View.js:71)
in View (at ScrollView.js:726)
in RCTScrollView (at ScrollView.js:820)
in ScrollView (at VirtualizedList.js:1009)
in VirtualizedList (at FlatList.js:640)
in FlatList (at index.js:188)
in ReactComp (at index.js:267)
in RCTView (at View.js:71)
in View (at index.js:375)
in RCTView (at View.js:71)
in View (at index.js:374)
in AgendaView (at Calendar.js:96)
in Calendar (created by Connect(Calendar))
in Connect(Calendar) (at Navigation.js:83)
in Provider (at Navigation.js:82)
in _class2 (at renderApplication.js:35)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: `-- [email protected]
• npm ls react-native: `-- [email protected]

Also specify:

1. Phone/emulator/simulator & version:

This is hapenning for both iOS and Android. It seems that react-native is now expecting String keys in ListViews, but not sure how to address this issue.

[hardy-android]

Same issue face.

[chrismllr]

Seeing this as well. A strange update, seeing it in 0.54.0. It seems like common practice to use the index of the array as a key.

[crim3hound]

Facing a similar issue in RN 0.54.1.

UPDATE:
Just fixed the issue by converting the result from my key extractor to a string using the toString() method as follows: _keyExtractor = (item, index) => index.toString();. I hope this helps someone else.

cc: @sylvainbouxin @hardy-android @chrismllr

[donni106]

Thx @anti-nerd, this helped me out.

Changed keyExtractor = (item) => item.id;
to keyExtractor = (item) => `key-${item.id}`;
and the warning disappeared.

[sylvainbouxin]

@anti-nerd actually, updated to 0.54.2 and latest rn-calendars, and this seems to be fixed...

[maxaggedon]

updating both packages also worked for me !

[augustocbx]

Another solution is change
keyExtractor = (item) => item.id
to
keyExtractor = (item) => item.id.toString()

[AbdelkarimGhaouri]

I have the same issue,

i tried to convert my result to string by using : renderEvent={(event) => {event.title.toString()}}

but it doesn't work

[levelingup]

I have the same issue,

i tried to convert my result to string by using : renderEvent={(event) => {event.title.toString()}}

but it doesn't work

I believe you have to use it on the keyExtractor

[ArunDexbytes]

@donni106
Changed = keyExtractor = (item) => item.id;
to= keyExtractor = {(item) => key-${item.id}}
and the warning disappeared.

[re-ali]

keyExtractor={ (item, index) => index.toString() }
Worked for me.Hope it will help others.