Image Flicker #209
Description
@antonKalinin @maksimko @nojimage @globchastyy @youniaogu @inspmoore @rajeshde @jzyds
If we update the index of images (imageIndex) using useState images flickers please help
<View style={{flex: 1, backgroundColor: 'white'}}>
<ImageView
visible={showImageViewer}
backgroundColor={'white'}
HeaderComponent={i => {
return (
<SafeAreaView style={{alignItems: 'flex-end'}}>
<TouchableOpacity
onPress={() => {
setshowImageViewer(false);
setClickedImage(0);
}}
style={{
marginRight: RF(10),
marginTop: RF(10),
padding: RF(3),
backgroundColor: Colors.WHITE,
borderColor: Colors.WHITE6,
borderWidth: RF(1),
shadowColor: Colors.VERY_LIGHT_PINK,
shadowOffset: {width: 0, height: 1},
shadowRadius: 4,
shadowOpacity: 0.3,
borderRadius: RF(25),
elevation: 8,
}}
>
<Ionicons name={'close'} size={RF(25)} color={'black'} />
);
}}
images={getImageViewerArray()}
imageIndex={clickedImage}
swipeToCloseEnabled={false}
FooterComponent={i => {
return (
<View
style={{
width: wp(100),
height: RF(100),
backgroundColor: Colors.WHITE,
elevation: 8,
borderTopLeftRadius: RF(10),
borderTopRightRadius: RF(10),
paddingHorizontal: wp(2.5),
paddingVertical: RF(8),
}}
>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={arrBannerImgs}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => (
<TouchableOpacity
activeOpacity={0.8}
onPress={() => setClickedImage(index)}
>
<FastImage
source={{
uri: item,
priority: FastImage.priority.high,
}}
resizeMode="contain"
style={{
width: RF(55),
height: RF(80),
borderColor:
i.imageIndex === index
? Colors.BORDER_BLUE
: 'transarent',
borderWidth: i.imageIndex === index ? RF(1) : 0,
borderRadius: RF(5),
marginHorizontal: wp(2),
}}
/>
)}
/>
);
}}
onRequestClose={() => {
setshowImageViewer(false);
setClickedImage(0);
}}
/>