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.."
]
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>
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>
);
}