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

Question

The Error:

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
    in CellRenderer (at VirtualizedList.js:687)
    in AndroidHorizontalScrollContentView (at ScrollView.js:852)
    in AndroidHorizontalScrollView (at ScrollView.js:977)
    in ScrollView (at VirtualizedList.js:1062)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at List.js:100)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in List (at Inicio.js:30)
    in RCTView (at View.js:44)
    in RCTScrollView (at ScrollView.js:977)
    in ScrollView (at Inicio.js:28)
    in Inicio (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in AnimatedComponent (at BottomNavigation.js:576)
    in RCTView (at View.js:44)
    in AnimatedComponent (at BottomNavigation.js:561)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in BottomNavigation (created by Context.Consumer)
    in ThemeProvider (created by Context.Consumer)
    in withTheme(BottomNavigation) (at createMaterialBottomTabNavigator.js:51)
    in BottomNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:62)
    in Navigator (at createAppContainer.js:388)
    in NavigationContainer (at registerRootComponent.js:17)
    in RootErrorBoundary (at registerRootComponent.js:16)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Here is the code:

import React, { Component } from 'react';
import {
    View,
    FlatList,
    Image
} from 'react-native';

const shows_first = [
    {
        key: 1,
        name: 'Suits',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/2432.jpg'
    },
    {
        key: 2,
        name: 'Modern Family',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/628.jpg'
    },
    {
        key: 3,
        name: 'The Flash',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/78/195988.jpg'
    },
]


class List extends Component {

    _renderItem(item) {
        item.toString()
        return(
            <Image style={{width: 120, height: 180}} source={{uri: item.image}} />
        );
    }
    
    render() {
        return(
            <View>
                <FlatList 
                    horizontal={true}
                    ItemSeparatorComponent={() => <View style={{width: 5}} />}
                    renderItem={
                       ({item}) => this._renderItem(item)
                    }
                    data={shows_first}
                />
            </View>
        );
    }
}

Does anyone know how to tell why the Warnig presents?

Answer 1

Is missing the prop keyExtractor in order to extract the key of each item, for example:

<FlatList 
  horizontal={true}
  ItemSeparatorComponent={() => <View style={{width: 5}} />}
  renderItem={
    ({item}) => this._renderItem(item)
  }
  data={shows_first}
  keyExtractor={(item, index) => item.key.toString()}
/>