How to add window to marker?

[ovsiannykov]

Hi, guys! I have on my map some markers, and it works ok. But i need to add window opening when user will press on the market, like in my design (look the screen). How i can do it? My code i attach

import {Camera, default as Mapbox, default as MapboxGL} from '@rnmapbox/maps';
import React, {useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
import {useSelector} from 'react-redux';

import AddButton from 'components/Pages/Map/AddButton/AddButton';
import GeoButton from 'components/Pages/Map/GeoButton/GeoButton';
import {MAPBOX_PUBLIC_TOKEN} from 'constants/env';
import {MAPBOX_STYLE_DARK_V11} from 'constants/theme';
import EventMarker from '../../../components/Pages/Map/EventMarker/EventMarker';
import {testEvents} from '../../../constants/testEvents';
import styles from './MapScreen.styles';

Mapbox.setAccessToken(MAPBOX_PUBLIC_TOKEN);

const INITIAL_CORDS = {
  timestamp: 0,
  latitude: 43.10535,
  longitude: -75.29128,
  altitude: 0.0,
  heading: 0.0,
  accuracy: 0.0,
  speed: 0.0,
};

function MapScreen({navigation}) {
  const {user} = useSelector(state => state.auth);
  const camera = useRef(null);
  const [userLocation, setUserLocation] = useState(INITIAL_CORDS);
  const [isFollowUserLocation, setIsFollowUserLocation] = useState(false);

  useEffect(() => {
    setIsFollowUserLocation(true);
    setTimeout(() => setIsFollowUserLocation(false), 3000);
  }, []);

  function onUserLocationUpdate(location) {
    setUserLocation({
      timestamp: location.timestamp,
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      altitude: location.coords.altitude,
      heading: location.coords.heading,
      accuracy: location.coords.accuracy,
      speed: location.coords.speed,
    });
  }

  const goToUserCords = () => {
    camera.current?.flyTo([userLocation.longitude, userLocation.latitude]);
  };

  return (
    <View style={styles.screen}>
      <View style={styles.container}>
        <AddButton />
        <GeoButton onPress={goToUserCords} />
        <Mapbox.MapView styleURL={MAPBOX_STYLE_DARK_V11} style={styles.map}>
          <MapboxGL.UserLocation
            renderMode="native"
            visible={true}
            onUpdate={onUserLocationUpdate}
          />
          <Camera
            ref={camera}
            followZoomLevel={18}
            followUserLocation={isFollowUserLocation}
          />
          {testEvents.map(event => (
            <MapboxGL.MarkerView
              key={event._id}
              coordinate={[
                event.location.coordinates[0],
                event.location.coordinates[1],
              ]}>
              <EventMarker
                isApproved={event.isApproved}
                eventType={event.eventType}
              />
            </MapboxGL.MarkerView>
          ))}
        </Mapbox.MapView>
      </View>
    </View>
  );
}

export default MapScreen;

[mfazekas]

@ovsiannykov your code looks good. You should be able to add interactive elements into a MarkerView, there are some people who it's not working for. But so far no one told me the conditions under which I can reproduce the issue.

See: #2834

[ovsiannykov]

Hey guys! I found an error and a solution.
Firstly, this bug occurs only on iOS, but on Android it works fine.
onPress alas does not work, but onPressIn and onPressOut in TouchableOpacity work fine. Here's and a lifehack for you.

Dear developers! Please add onPress for MarkerView, because it's a crutch. All the same, when you double-click on the marker, the map approaches. I think this must be immediately from the library box and must be configured already.

If anything, write me to LikedIn)