black screen on Android

using it with flatlist

 <Card 
                    containerStyle={{borderColor: 'transparent'}}>

                    <ListItem
                      badge={{ value: 3, badgeTextStyle: { color: 'red' }, badgeContainerStyle: { marginTop: 10, color:'orange' } }}
                      roundAvatar
                      title={`${item.name.first} ${item.name.last}`}
                      subtitle={item.email}
                      avatar={
                        <TouchableOpacity onPress ={ () => this._showModal()  }>
                        <Avatar
                        medium
                       // onPress ={ () => this._showModal()  }
                        rounded
                        source={{ uri: item.picture.thumbnail }} 
                      // style={{borderRadius:25, height:50, width:50 }}
                         />
                         </TouchableOpacity>
                             }
                    
                      containerStyle={{borderBottomWidth: 0, padding:0 }}
                    />
                    <Modal isVisible={this.state.isModalVisible}>
                      <View>
                        <Text>Hello!</Text>
                      </View>
                   </Modal>
                   
      </Card>

[PramodVemulapalli]

I ran into a similar issue and thought this may help other folks who run into such an issue. The backdropOpacity parameter which is defaulted to 0.7 seems to create drastically different background transparencies for android and ios and the android background appears really dark. I ended up fixing it by using a platform specific parameter as shown below.

<View>
  <Modal
          animationIn={'slideInLeft'}
          animationOut={'slideOutRight'}
          style={styles.bottomModal}
          backdropOpacity={Platform.OS === 'android'? 0.5 : 0.7}
        >
          {this.renderModalContent()}
    </Modal>
</View>

[mmazzarolo]

Thanks @PramodVemulapalli, but I guess it might be device-specific 🤔