Search code examples
react-nativei18nextreact-i18next

Iterating over array in i18next


There is a way I can iterate and render each item of an array of string/objects?

i18n
    .use(languageDetector)
    .use(reactI18nextModule)
    .init({
        fallbackLng: 'en',
        resources: {
            en: {
                home: {
                    data:[
                        {id:1,val:"Item1"},
                        {id:2,val:"Item2"},
                        {id:3,val:"Item3"},
                        {id:4,val:"Item4"}]
                },
            }
        }
});

in component:

<FlatList
        data={t('home:data')} //--cannot do this
        keyExtractor={(item, index) => index}
        renderItem={({item}) => <Item>{item.val}</Item>}
/>

Solution

  • I've found a way

    <FlatList
        data={t('home:data', { returnObjects: true })}
        keyExtractor={(item, index) => index}
        renderItem={ ({item}) => <Text> {item.val}</Text>}
    />
    

    FlatList wraps each element in an item object (https://facebook.github.io/react-native/docs/flatlist.html).