How do I add a carousel to a map that It only pops up when an icon on the map being touched in React Native react-native-snap-carousel

Question

Normally in react native, carousel is nested inside the MapView component when you're trying to add a carousel to a map showing an array of images. But it always there when you load the activity covering some areas of the map. What I want is carousel to pop up only after an icon on the map being touched. How do I do that ?

render() {
return (
    <View style={styles.container} >
    <MapView
     
     Provider= {PROVIDER_GOOGLE}
     ref={map => this._map = map}
     showsUserLocation={true}
     style={styles.map}
     initialRegion={this.state.initialPosition}
     customMapStyle={mapStyle}>

        {
            this.state.coordinates.map((marker, index) => (
                <Marker
                    key={marker.name}
                    ref={ref => this.state.markers[index] = ref}
                    onPress={() => this.onMarkerPressed(marker, index)}
                    coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
                    title={'Technical Support'}>
                
                <Image 
                    source={require('../icons/tec.png')}
                    style={styles.icon}/>
                
                <Callout>
                    <View style={styles.callout}><Text adjustsFontSizeToFit numberOfLines={1}>{marker.name}</Text></View>
                </Callout>        
                
                </Marker>
            ))
        }

   </MapView>

   <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.coordinates}
          containerCustomStyle={styles.carousel}
          renderItem={this.renderCarouselItem}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={300}
          onSnapToItem={(index) => this.onCarouselItemChange(index)}
        />
   </View>
);

} };

Answer 1

Try this way (Updayed)

state = { markerPressed: false };

onMarkerPressed(...){
  this.setState({ markerPressed: true });
}

render() {
return (
    <View style={styles.container} >
    <MapView
     
     Provider= {PROVIDER_GOOGLE}
     ref={map => this._map = map}
     showsUserLocation={true}
     style={styles.map}
     initialRegion={this.state.initialPosition}
     customMapStyle={mapStyle}>

        {
            this.state.coordinates.map((marker, index) => (
                <Marker
                    key={marker.name}
                    ref={ref => this.state.markers[index] = ref}
                    onPress={() => this.onMarkerPressed(marker, index)}
                    coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
                    title={'Technical Support'}>
                
                <TouchableOpacity onPress={() => setMarkerPressed(true)}>
                <Image 
                    source={require('../icons/tec.png')}
                    style={styles.icon}/>
              </TouchableOpacity>   
                
                <Callout>
                    <View style={styles.callout}><Text adjustsFontSizeToFit numberOfLines={1}>{marker.name}</Text></View>
                </Callout>        
                
                </Marker>
            ))
        }

   </MapView>

   {this.state.markerPressed  && <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.coordinates}
          containerCustomStyle={styles.carousel}
          renderItem={this.renderCarouselItem}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={300}
          onSnapToItem={(index) => this.onCarouselItemChange(index)}
        />}
   </View>
);
} };