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

Question

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 1

This ought to solve your problem...

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

Answer 2

It is because it is expecting a string and you are giving it an object which convert to NSString and NSDictionary respectively when it compiles to native.

Replace

source={{uri: {catImage}}}

with

source={{uri: catImage}}