Images not loading on Android

The library works perfectly on iOS, but a Swiper of Images on the Android version won’t display its images. The code:

<Swiper showsButtons={false} style={{}} loop={true} height={screenWidth} width={screenWidth}
      dot={<View style={{backgroundColor: 'rgba(255,255,255,.7)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
      activeDot={<View style={{backgroundColor: '#49D2FF', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
      paginationStyle={{bottom: 10,}} >
           {finalPhotos.map((item, key) => {
              return (
               <Image key={key} style={{flex:1,width:screenWidth,height:screenWidth,}} source={key === 0 ? (item == "none" ? require("./img/missing-pic-icon.png") : {uri:item}) : {uri:item.image}} />
              );
      })}
</Swiper>

Other details to note: -Once again, there are no issues on iOS -The swiper is contained in a View that’s contained in another Swiper -The finalPhotos array is made before returning the overall render function

[jackuhan]

same in flatlist on Android. but not in flatlist on iOS.

[arminsal1]

I found a workaround for this bug by following the second answer to this question on StackOverflow: https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate

I used setTimeout for 100 milliseconds in the ComponentDidMount function to execute the setState. The solution will refresh the Swiper so that the images appear on Android without having to re-render everything.