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>

  }

}