0

I am trying to retrieve data from an API (https://developers.zomato.com/documentation) and get title of restaurants and an image with it. However when I try to load an image I get a warning source.uri should not be an empty string.

Here is my code as it stands:

async componentDidMount() {
    let id = this.props.navigation.state.params.category
    let result;
    try {
      result = await axios.request({
        method: 'get',
        url: `https://developers.zomato.com/api/v2.1/search?category=${id}`,
        headers: {
          'Content-Type': 'application/json',
          'user-key': "a31bd76da32396a27b6906bf0ca707a2",
        },
      })
    } catch (err) {
      err => console.log(err)
    }
    this.setState({
      isLoading: false,
      data: result.data.restaurants
    })
  }
render() {
    return (
      <View>
        {
          this.state.isLoading ?
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator style={{color:'red'}} />
            </View> :
            (
              this.state.data.length == 0 ?
                <View style={{ flex: 1, padding: 20 }}>
                  <Text style={{ color: '#000', fontWeight: 'bold' }}>No restaurants from selected category</Text>
                </View> :
                <FlatList
                  style={{ marginBottom: 80 }}
                  keyExtractor={item => item.id}
                  data={this.state.data}
                  renderItem={({ item }) =>
                  <TouchableHighlight onPress={()=> console.log(item.restaurant.thumb)}>
         <Card image={item.restaurant.thumb} style={styles.container}>
            <Image resizeMode='contain' source={{ uri: item.restaurant.thumb }}/>
           <Text style={{color:'#000',fontWeight:'bold'}}>{item.restaurant.name} </Text>
         </Card>
         </TouchableHighlight>
                  }
                />
            )
        }
      </View>
    );
  }

as you can see when I touch the any of the cards I am console logging the link of the image uri and it shows up perfectly. Why is that when the app loads the images they are empty strings yet when I load it though console log the link shows up perfectly?

I am using axios to load my API

here is an expo snack link: https://snack.expo.io/r1XTaw4JU

CoolMAn
  • 1,851
  • 2
  • 12
  • 23
  • can you share this code in a working expo snack so that i can check – Gaurav Roy Dec 28 '19 at 05:49
  • @GauravRoy I have updated the question. Also, I am trying to add a parameter for the city of New York, however for some reason the results are only being shown from restaurants from New Delhi Bangalore Singapore Bangalore Mumbai etc. can you please give some input on that if you can, please? for some reason when I `console.log` the url it shows that it is adding New York into the filter, however the results show otherwise – CoolMAn Dec 28 '19 at 05:53
  • okay letme check – Gaurav Roy Dec 28 '19 at 05:59

1 Answers1

1

So i got 2 issues, one is in the card component you were not providing the uri properly it should be image={{uri:item.restaurant.thumb}} and secondly for newyork your entity id must be

To search for 'Italian' restaurants in 'Manhattan, New York City', set cuisines = 55, entity_id = 94741 and entity_type = zone

Its as per zomato docs,so do check out that. and find expo link : expo-snack

import React from 'react';
import { 
    View,
    Text,
    FlatList,
    StyleSheet,
    Button,
    TouchableHighlight,
    ActivityIndicator,
    } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { Card, Image } from 'react-native-elements';
import Constants from 'expo-constants';
import axios from 'axios';

export default class CategoryScreen extends React.Component {

  constructor(props){
    super(props);
        this.state={
      data : [],
      isVisible: true,
      city : '94741'
    }
  }
async componentDidMount() {
    let id = "3"
    let city = this.state.city
    let result;
    try {
      result = await axios.request({
        method: 'get',
        url: `https://developers.zomato.com/api/v2.1/search?entity_id=${city}&entity_type=zone&category=${id}`,
        headers: {
          'Content-Type': 'application/json',
          'user-key': "a31bd76da32396a27b6906bf0ca707a2",
        },
      })
    } catch (err) {
      err => console.log(err)
    }
    this.setState({
      isLoading: false,
      data: result.data.restaurants
    })
    console.log(result)
    console.log(data)
  }
render() {
    return (
      <View>
        {
          this.state.isLoading ?
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator style={{color:'red'}} />
            </View> :
            (
              this.state.data.length == 0 ?
                <View style={{ flex: 1, padding: 20 }}>
                  <Text style={{ color: '#000', fontWeight: 'bold' }}>No restaurants from selected category</Text>
                </View> :
                <FlatList
                  style={{ marginBottom: 80 }}
                  keyExtractor={item => item.id}
                  data={this.state.data}
                  renderItem={({ item }) =>
                  <TouchableHighlight onPress={()=> alert(item.restaurant.location.city)}>
         <Card image={{uri:item.restaurant.thumb}} style={styles.container}>
           <Text style={{color:'#000',fontWeight:'bold'}}>{item.restaurant.name} </Text>
         </Card>
         </TouchableHighlight>
                  }
                />
            )
        }
      </View>
    );
  }

};

const styles = StyleSheet.create({

});
Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45