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

Getting 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 …

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 94
  • Comments: 15 (2 by maintainers)

Commits related to this issue

Most upvoted comments

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.

What’s the rationale behind this change? Many apps use an unique number id (eg. user id, item id) as the key. Why require it to be cast to a string?

@ravirajn22 Using index as the key is bad practice. You can use `keyExtractor = (item, index) => ‘list-item-${index}’.

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

The value of keyExtractor must be a string。

It works well.