Tyra
Tyra

Reputation: 11

onPress handler not working in marker for react native maps?

I am having trouble with the onPress handler in a marker component. onPress never seems to get called because it never calls onMarkerPress which prints out something to the console. Does anyone have this issue?

Here is my code:

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

{filteredMarkers.map((marker, index) => {
             const scaleStyle={
               transform: [
                 {
                   scale: interpolations[index].scale,
                 }
               ]
             }
             return (
               <View style={styles.container}>
                <MapView
                ref={_map}
                initialRegion={state.region}
                provider={PROVIDER_GOOGLE}>
                  <Marker key={index} coordinate={marker.coordinate}>
                    <AnimatedTouchable style={[styles.markerWrap]} onPress={(e) => console.log(onMarkerPress(e))}>
                      <Animated.Image
                        source={require('../assets/map-marker.png')}
                        style={[styles.marker, scaleStyle]}
                        resizeMode="cover"
                      />
                    </AnimatedTouchable>
                  </Marker>
                  
                </MapView>
              </View>
             );
           })}

onMarkerPress:

const onMarkerPress = (mapEventData : any) => {
      {console.log("PRESSED")}
      const markerID = mapEventData._targetInst.return.key;

      let x = (markerID * CARD_WIDTH) + (markerID * 20); 
      x = x - SPACING_FOR_CARD_INSET;
      

      _scrollView.current.scrollTo({x: x, y: 0, animated: true});
    }

Upvotes: 1

Views: 1044

Answers (0)

Related Questions