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>
);

} };

Nooruddin Lakhani · Accepted Answer · 2020-10-30T04:50:00.527

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>
);
} };

Did not work unfortunately. It said hooks can't be used like that or something. Maybe because of version mismatch. — Kasun Dissanayake, Oct 27 '20 at 18:47
Are you using Hooks in your code? It is said that react-dom (< 16.8.0) or react-native (< 0.59) doesn’t yet support Hooks — Nooruddin Lakhani, Oct 27 '20 at 20:15
The above code I mentioned is nested inside a class. Therefore the useState hook can't be called inside that class I think. I'm using react-native 0.63 I think. The exact error message I receive is "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons" — Kasun Dissanayake, Oct 29 '20 at 16:31
The reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking rules of hooks 3. you might have more than one copy of React in the same app — Kasun Dissanayake, Oct 29 '20 at 16:34
I have updated my answer as converted into class. Please check — Nooruddin Lakhani, Oct 30 '20 at 04:50

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

1 Answers1