Close Menu
  • Home
  • AI
  • Big Data
  • Cloud Computing
  • iOS Development
  • IoT
  • IT/ Cybersecurity
  • Tech
    • Nanotechnology
    • Green Technology
    • Apple
    • Software Development
    • Software Engineering

Subscribe to Updates

Get the latest technology news from Bigteetechhub about IT, Cybersecurity and Big Data.

    What's Hot

    How to run RAG projects for better data analytics results

    October 13, 2025

    MacBook Air deal: Save 10% Apple’s slim M4 notebook

    October 13, 2025

    Part 1 – Energy as the Ultimate Bottleneck

    October 13, 2025
    Facebook X (Twitter) Instagram
    Facebook X (Twitter) Instagram
    Big Tee Tech Hub
    • Home
    • AI
    • Big Data
    • Cloud Computing
    • iOS Development
    • IoT
    • IT/ Cybersecurity
    • Tech
      • Nanotechnology
      • Green Technology
      • Apple
      • Software Development
      • Software Engineering
    Big Tee Tech Hub
    Home»iOS Development»javascript – Marker not rendering on first map tap — only appears after second tap, zoom, or any interaction (Expo SDK 53, RN 0.79.5, react-native-maps 1.20.1)
    iOS Development

    javascript – Marker not rendering on first map tap — only appears after second tap, zoom, or any interaction (Expo SDK 53, RN 0.79.5, react-native-maps 1.20.1)

    big tee tech hubBy big tee tech hubJuly 28, 20250452 Mins Read
    Share Facebook Twitter Pinterest Copy Link LinkedIn Tumblr Email Telegram WhatsApp
    Follow Us
    Google News Flipboard
    javascript – Marker not rendering on first map tap — only appears after second tap, zoom, or any interaction (Expo SDK 53, RN 0.79.5, react-native-maps 1.20.1)
    Share
    Facebook Twitter LinkedIn Pinterest Email Copy Link


    I’m encountering a strange behavior with the Marker component in react-native-maps when adding markers dynamically.

    When I tap the map after adding a marker to the editingMarkers state, the principalMarker (the green one representing the latest tapped point) doesn’t appear immediately.

    But if I do any interaction afterward — zoom, pan, tap again, open the FAB menu, etc. — then the marker suddenly renders as expected.

    It feels like the first render is being ignored or delayed until a side interaction forces a re-render.


    Setup

    • Expo SDK: ~53.0.20
    • React Native: 0.79.5
    • react-native-maps: 1.20.1

    Hook & Handlers

    const [markersOnEdit, setMarkersOnEdit] = useState([]);
    const [principalMarker, setPrincipalMarker] = useState(null);
    
    const handleMapPress = (event: MapPressEvent) => {
      setPrincipalMarker({
        latitude: event.nativeEvent.coordinate.latitude,
        longitude: event.nativeEvent.coordinate.longitude,
      });
    };
    
    const addNewMarker = () => {
      if (!principalMarker) return;
    
      const epsilon = 0.00001;
      const alreadyExists = markersOnEdit.some(
        (m) =>
          Math.abs(m.latitude - principalMarker.latitude) < epsilon &&
          Math.abs(m.longitude - principalMarker.longitude) < epsilon
      );
    
      if (alreadyExists) {
        // This is for forcing rendering
        setMarkersOnEdit((prev) => [...prev]);
        setPrincipalMarker({ ...principalMarker });
        return;
      }
    
      const newMarker: EditablePoint = {
        id: generateId(),
        latitude: principalMarker.latitude,
        longitude: principalMarker.longitude,
      };
    
      setMarkersOnEdit((prev) => [...prev, newMarker]);
      setPrincipalMarker(null);
    };
    

    MapView + Marker rendering

    
      
      {principalMarker !== null && (
        
      )}
    
      {markersOnEdit.map((point) => (
        
      ))}
    
    

    Expected

    As soon as I set principalMarker, it should render instantly.


    Actual

    It doesn’t render until another interaction happens.


    Tried so far

    • Verified the state updates with console.log
    • Confirmed principalMarker has correct coordinates
    • Forced re-renders with spread ({ ...marker }) or cloning arrays
    • Tried calling setTimeout(() => setPrincipalMarker(...), 0)
    • Tried mapRef.current?.forceUpdate();

    Questions

    • Is this a bug with react-native-maps 1.20.1 or a quirk with React 19 / Expo SDK 53?
    • Is there any known workaround to force the marker to render on first map press?
    • Anyone experienced similar issues or found a reliable fix?

    Thanks in advance 🙏



    Source link

    0.79.5 1.20.1 appears EXPO interaction JavaScript map Marker reactnativemaps rendering SDK tap Zoom
    Follow on Google News Follow on Flipboard
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email Copy Link
    tonirufai
    big tee tech hub
    • Website

    Related Posts

    ios – Apple mapkit route function dose not works in China

    October 12, 2025

    swift – Does UIDevice.current.identifierForVendor change after iCloud backup and restore on another iOS device?

    October 11, 2025

    uitabbarcontroller – How to add custom UIView to floating UITabBarItem in iOS 26 Liquid Glass UITabBar

    October 10, 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Editors Picks

    How to run RAG projects for better data analytics results

    October 13, 2025

    MacBook Air deal: Save 10% Apple’s slim M4 notebook

    October 13, 2025

    Part 1 – Energy as the Ultimate Bottleneck

    October 13, 2025

    From Static Products to Dynamic Systems

    October 13, 2025
    Advertisement
    About Us
    About Us

    Welcome To big tee tech hub. Big tee tech hub is a Professional seo tools Platform. Here we will provide you only interesting content, which you will like very much. We’re dedicated to providing you the best of seo tools, with a focus on dependability and tools. We’re working to turn our passion for seo tools into a booming online website. We hope you enjoy our seo tools as much as we enjoy offering them to you.

    Don't Miss!

    How to run RAG projects for better data analytics results

    October 13, 2025

    MacBook Air deal: Save 10% Apple’s slim M4 notebook

    October 13, 2025

    Subscribe to Updates

    Get the latest technology news from Bigteetechhub about IT, Cybersecurity and Big Data.

      • About Us
      • Contact Us
      • Disclaimer
      • Privacy Policy
      • Terms and Conditions
      © 2025 bigteetechhub.All Right Reserved

      Type above and press Enter to search. Press Esc to cancel.