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:
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>
)
}
}