Can’t pull out data from API in React Native

I am using the Open Library API to fetch some books.

The API look something like this:

{
"numFound": 296,
"numFoundExact": true,
"docs": [
{
"key": "/works/OL262758W"
"title": "Harry Potter"

On my React Native app I am trying to pull this and at least iterate through the API using async and componentDidMount:

  constructor(props) {
    super(props);
    this.state = {
      books: [],
      errorMessage: '',
      isFetching: true,
    };
  }


  async fetchRandomBooks() {
    try {
      let response = await fetch(
        'http://openlibrary.org/search.json?author=tolkien',
      );
      let json = await response.json();
      this.setState({books: json.docs, isFetching: false});
    } catch (error) {
      this.setState({errorMessage: error});
    }
  }
  componentDidMount() {
    this.fetchRandomBooks();
  }

  render() {
    let content = <BookItem books={this.state.books} />;
    if (this.state.isFetching) {
      content = <ActivityIndicator size="large" />;
    }
    return (
      <View style={styles.container}>
        {this.state.books.map(item => (
          <Text>{item.title}</Text>
        ))}
    
      </View>
    );
  }
}

However, this doesn’t pull out anything and the mobile emulator remains blank. Any idea what am I doing wrong here?

Answer

The problem here is that iOS does not allow HTTP requests by default, only HTTPS. If you put “https” instead of “http” this might work.