background color when rendering is always black

[Maoravitan]

hi, thank you for the library.
i have an issue with the background-color when swapping between images.
the default value of the image that first time rendering is black, and only when the render is finished the background color changed to rgba(0,0,0,0.8), however i want it to be rgba(0,0,0,0.8) all the time.

how can i set the rendering image to be also 'rgba(0,0,0,0.8)'

  const renderHeader = () => (
              <SafeAreaView style={styles.header}>
                <TouchableOpacity style={styles.closeButton} onPress={onClose} > 
                  <Icon size={30} color='white' name="close" type='material'/>
                </TouchableOpacity >
              </SafeAreaView>
              );

  const renderLoader = () => (
              <View style={{width:'100%'}}>
                <ActivityIndicator
                  color={'grey'}
                  size="large"
                    style={{
                    height: Dimensions.get('window').height,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
              /></View>)
  return (
    <Modal visible={isVisible} transparent={true}>
         <ImageViewer backgroundColor='rgba(0,0,0,0.8)' renderHeader={ renderHeader}
                      enablePreload={true}
                      renderIndicator={nullFunction}  
                      index={selectedIndex} onCancel={onClose} enableSwipeDown={true} imageUrls={images}
                      loadingRender={renderLoader} />
    </Modal>  
  )

header:{
    zIndex:100, 
    flexDirection:'row', 
    width:'100%',
    position:'absolute'
  },
  closeButton:{
    height:80,
    justifyContent:'center', 
    alignItems:'center',
    width:80
  }