how can I solve this problem, I'm facing an error that said

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

when I want to show my JSON file in my screen of List (CurrenciesList.js) the code is here

import React from 'react' 
import { FlatList, View } from 'react-native'
import RowItem from '../../components/RowItem'
import currencies from '../../data/currencies.json'

export default () => {
    <View>
        <FlatList 
            data={currencies} 
            renderItem={({item}) => {
                return <RowItem title={item}/>
            }} />
    </View>
}

RowItem is the reusable component and it's passing a text param only.

const RowItem = ({title, onPress}) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <Text style={styles.title}>{title}</Text>
        </TouchableOpacity>
    )
}

export default RowItem

and my file JSON (currencies.json) is like this

[
    "AUD",
    "BGN",
    "BRL",
    "CAD",
    "CHF",
    "CNY",
    "CZK",
    "etc.."
  ]

CodePudding user response：

Your function does not return anything

change

export default () => {
    <View>

    </View>
}

to:

export default () => {
    return <View>
      ...
    </View>
}

or to

// no curly braces
export default () =>
    <View>
     ...
    </View>

CodePudding user response：

You can try this,

import React from 'react' 
import { FlatList, View } from 'react-native'
import RowItem from '../../components/RowItem'
import currencies from '../../data/currencies.json'

export default () => {
return (
    <View>
        <FlatList 
            data={currencies} 
            renderItem={({item}) => {
                return <RowItem title={item}/>
            }} />
    </View>
);
}