Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28480

Image not rendering after upgrading react native version

$
0
0

I created a new project in react-native 0.61.5. My old project was runnning on 0.49.5.

My images in my view are no longer rendering, this is what I'm getting:

image of android emulator with no picture rendered where there should be a picture

After porting all my code from my old project to my new project and installing the necessary dependencies everything worked as expected with the exception of the rendering of the image. The image I'm using comes from a URI (URI still working in browser), and I'm fetching a new image every time an event is executing (swiping right)

Here is the code in question:

  renderCard = (card, index) => {
    // https://source.unsplash.com/featured/?{dog}
    return (
      <View style={styles.card}>
        <Text style={styles.text}>card: {card} index: {index}</Text>
        <Image style={{width: 400, height: 400}} source={{uri: 'https://source.unsplash.com/400x400/?dog/' + index}}/>
      </View>
    )
  };

Here is my render method that makes the call to the renderCard method above:

  render () {
    return (

      <View style={styles.container}>
        <View style={[styles.swiper]}>
        <Swiper
          ref={swiper => {
            this.swiper = swiper
          }}
          onSwiped={() => this.onSwiped('general')}
          onSwipedLeft={() => this.onSwiped('left')}
          onSwipedRight={() => this.onSwiped('right')}
          onSwipedTop={() => this.onSwiped('top')}
          onSwipedBottom={() => this.onSwiped('bottom')}
          onTapCard={this.swipeLeft}
          cards={this.state.cards}
          cardIndex={this.state.cardIndex}
          cardVerticalMargin     = {100}
          renderCard={this.renderCard}
          onSwipedAll={this.onSwipedAllCards}
          useViewOverflow    = {false}
          stackSize={3}
          stackSeparation={15}

          overlayLabels={{
            bottom: {
              title: 'BLEAH',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              }
            },
            left: {
              title: 'NOPEE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-end',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: -30
                }
              }
            },
            right: {
              title: 'LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-start',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: 30
                }
              }
            },
            top: {
              title: 'SUPER LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              }
            }
          }}
          animateOverlayLabelsOpacity
          animateCardOpacity
          swipeBackCard
        >


        </Swiper>
        </View>
        <View style={[styles.rateBoxes]}>
          <Slider
            style={{width: 200, height: 40}}
            minimumValue={5}
            maximumValue={10}
          />
        </View>
      </View>
    )
  }
}

Viewing all articles
Browse latest Browse all 28480

Trending Articles