Steve North Steve North - 12 days ago 9
Javascript Question

React Native JSON Value of type NSDictionary Cannot be converted to NSString

I have an issue with A React Native (version 0.38.0) app I am trying to develop. I am basically learning as I go.

I am fetching a JSON from a custom API endpoint. I have managed to loop through the JSON and output some data, but the problem is with a

string
linking to an image. I keep getting the error:

JSON Value of { robj = "https://example.com/img.jpg" } type NSDictionary Cannot be converted to NSString.


Having had a scout around google, I can't see to make heads nor tail of the issue.

Could anyone please point me in the right direction?

var api = {
getData() {
var url = 'https://example.com/api/json/'
return fetch(url).then((res) => res.json())
}
}

class GetCategories extends Component {
constructor(props) {
super(props)
this.state = {
categories: []
}
}

componentWillMount() {
api.getData().then((res) => {
this.setState({
categories: res
})
})
}

render() {
var catLoop =this.state.categories.map(function(obj, index){
var catTitle = '',
catImage = '';

catTitle = obj.title;
catImage = obj.image;

return (
<View key={index}>
<Image source={{uri: {catImage}}} style={{width: 400, height: 400}}>
<Text>{catTitle}</Text>
</Image>
</View>
)

});

return <View>{catLoop}</View>
}
}

Answer

This ought to solve your problem...

<Image source={{uri: catImage}} style={{width: 400, height: 400}}>
     <Text>{catTitle}</Text>
</Image>