0

I am building a simple app in which I take some URLs from a database and display them in an image carousel. I do this via a _renderItem() function, which I created. However, I am having an issue with the image in this function. The image isn't rendering, except the variable I am using as the uri is an actual link and is not undefined. This is because the google books image link is not working. However, I have created a similar app before and nothing has happened.

Adding the book to the db:

          <Button
            //icon="login"
            mode="outlined"
            loading={this.state.loading}
            color="black"
            onPress={async () => {
              if (this.state.search == '' || undefined) {
                alert(
                  'That is not a valid ISBN code. If it is, check if you are connected to the internet and try again.',
                );
              } else {
                await axios
                  .get(
                    `https://www.googleapis.com/books/v1/volumes?q=isbn:${this.state.search}&key=(not going to reveal my key)`,
                  )
                  .then(async res => {
                    this.setState({
                      results: res.data.items,
                    });
                    console.log(this.state.results[0]);
                    console.log(this.props.route.params.email, 'props');
                    await axios
                      .post('http://localhost:3000/books', {
                        title: this.state.results[0].volumeInfo.title,
                        author:
                          this.state.results[0].volumeInfo.authors.toString(),
                        cover:
                          this.state.results[0].volumeInfo.imageLinks.thumbnail,
                        checkedOut: false,
                        lenderEmail: this.props.route.params.email,
                      })
                      .then(res => {
                        alert('Success! Book has been added.');
                        console.log(res);
                      });
                  })
                  .catch(err => {
                    console.log(err);
                    alert(
                      'That is not a valid ISBN code. If it is, check if you are connected to the internet and try again.',
                    );
                  });
              }
            }}
            contentStyle={{
              width: 175,
              height: 50,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            style={{
              marginTop: 30,
            }}>
            Add The Book
          </Button>

My _renderItem() function:

  _renderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        style={{
          marginLeft: 25,
          marginRight: 25,
          borderRadius: 5,
          height: 'auto',
          flex: 1,
          resizeMode: 'cover',
          justifyContent: 'center',
        }}
        onPress={() => {
          this.props.navigation.navigate('Book', {
            image: item.cover,
            title: item.title,
            author: item.author,
            id: item._id,
            checkedOut: item.checkedOut,
          });
        }}>
        <Image
          source={{uri: item.cover}}
          style={{
            borderRadius: 5,
            height: 'auto',
            flex: 1,
            resizeMode: 'cover',
            justifyContent: 'center',
          }}></Image>
      </TouchableOpacity>
    );
  };

Can someone please help me? Thanks.

4

0 回答 0