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

0
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 {
    Text,
    View,
    StyleSheet,
    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'
    },
    {
        key: 4,
        name: 'Supergirl',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/83/209955.jpg'
    },
    {
        key: 5,
        name: 'Designated Survivor',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/101/253490.jpg'
    },
    {
        key: 6,
        name: '24: Legacy',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/90/225030.jpg'
    }
]


class List extends Component {

    _renderItem(item) {
        item.toString()
        return(
            <Image style={{width: 120, height: 180}} source={{uri: item.image}} />
        );
    }

    render() {
        return(
            <View style={styles.container}>
                <View>
                    <Text>My List</Text>
                    <FlatList 
                        horizontal={true}
                        ItemSeparatorComponent={() => <View style={{width: 5}} />}
                        renderItem={
                            ({item}) => this._renderItem(item)
                        }
                        data={shows_first}
                    />
                </View>
            </View>
        );
    }
}

export default List;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 5
    }
})

Can anyone tell me why you have warnig?

    
asked by anonymous 05.12.2018 / 18:44

1 answer

0

I think you're missing the keyExtractorTo be able to extract the key from each item to solve you can do so:

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