custom callout image not rendering in android api level 26 react-native-maps?

Question

I am using react-native-maps 0.23.0 version. I am facing image rendering issue in custom callout in android in API level 26 and above. It's working in API 23 but according to google new policy target API level at least 26 to submit apps on play store that's why I can not use API level 23.

<MapView.Callout   tooltip={true}  >

   {this.state.isMarkerCallout === true &&  <View style=  {{width:Dimensions.get('window').width-40,height:110,backgroundColor:WHITE_COLOR,borderRadius:20,borderColor:BLACK_COLOR,borderWidth:1,alignItems:'center',marginLeft:20,flexDirection:'column'}}>
              <View style={{flexDirection:'row',backgroundColor:'white',height:80,marginTop:0,borderRadius:20}}>
                <View style={{backgroundColor:WHITE_COLOR,width:Dimensions.get('window').width/2-20,borderRadius:20}}>
                  <Text style={{marginLeft:15,lineHeight:12,textAlign:'left',fontSize:12,fontFamily:FONT_FAMILY,fontWeight:'bold',marginTop:10}}> <Text>{marker.title}</Text></Text>
                </View>

                <View style={{backgroundColor:'white',width:Dimensions.get('window').width/2-22,borderRadius:20}}>
                <TouchableOpacity  style={{backgroundColor:'white',alignItems:'center',marginTop:10}}> 
       {marker.type === "fixcar"?

       <TouchableOpacity onPress={this.openCarWebsite}><Image   source={require('../images/WCC.png') }  style = {{ width: 112, height: 25,borderRadius:3, resizeMode: "cover", zIndex: 10}}/></TouchableOpacity>

          :
          <TouchableOpacity style={{backgroundColor:LIGHTGRAY_COLOR}} onPress={this.openWebsite}><Image  source={require('../images/spin.png')}  style = {{ width: 112, height: 56,borderRadius:3}}/></TouchableOpacity>

          }
                  <Text style={{lineHeight:15,marginLeft:10,textAlign:'center',fontSize:10,fontFamily:FONT_FAMILY,marginTop:10}}> Please visit our website{"\n"}for more details.</Text>
                  </TouchableOpacity>
                </View>
              </View>
               <View style={{width:30,height:30,alignItems:'center',marginTop:1}}>
               <TouchableOpacity  onPress={this.showNearLocationPopup}>
                 <Image  source={require('../images/Arrow-Up-icon.png')}  style = {{ width: 30, height: 30}}/>
               </TouchableOpacity>
           </View> 

         </View>

        }  
        </MapView.Callout>

Image not showing in callout in android but in iOS is working fine.

Answer 1

如果在 Text 组件中使用 Image Component 将呈现图像。