maplibre-react-native icon indicating copy to clipboard operation
maplibre-react-native copied to clipboard

[Bug] [Android] fitBounds, setCamera, re-render on style update does not work properly on Android (v11.0.0-alpha.5)

Open huylocit14054 opened this issue 3 months ago • 1 comments

Describe and reproduce the Bug

Hi I notice some functions are unstable while using Android

  1. fitBounds: I have a list of MarkerView, whose category can be filtered. On filter, I call the fitBounds function to fit all the filtered MarkerViews on the screen. However, this does not always work, for example, after zooming in, the fitBounds cannot update the zoom, hence cannot fit all the MarkerViews.

  2. setCamera: The MarkerView can be selected. On selecting, I call the setCamera function to focus, move, and zoom in on the MarkerView. I have noticed that on Android, only setCamera with animationMode "moveTo" works properly; other animations do not work as expected. For example, the flyTo animation only works once or twice. Furthermore, even when working, the flyTo animation cannot set the map zoom.

  3. MarkerView does not reflect or re-render on styling prop change. Since we have many MarkerViews in the map, it is better to hide the MarkerView using the opacity, display style logic, instead of removing and recreating the MarkerView component. I have a state to control the MarkerView visibility. On visible, I set the style opacity to 1, otherwise 0. However, on Android, the state change can not trigger the MarkerView to re-render. Hence, the MarkerView always shows on the map.

These issues are on these versions:

  • 10.1.0 (tested with Expo 52)
  • 10.2.1 (tested with Expo 53)
  • 11.0.0-alpha.5 (tested with Expo 53)

Please note that IOS works well with all the scenarios above in all 3 versions. The only difference is that iOS is using PointAnnotation instead of MarkerView, which I do not think is an issue.

@maplibre/maplibre-react-native Version

11.0.0-alpha.5, 10.2.1, 10.1.0

Which platforms does this occur on?

Android Emulator, Android Device

Which frameworks does this occur on?

Expo

Which architectures does this occur on?

New Architecture, Old Architecture

Environment

expo-env-info 1.3.4 environment info:
    System:
      OS: macOS 15.6.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.5.1 - ~/.nvm/versions/node/v22.5.1/bin/node
      Yarn: 4.9.1 - ~/.nvm/versions/node/v22.5.1/bin/yarn
      npm: 10.8.2 - ~/.nvm/versions/node/v22.5.1/bin/npm
      Watchman: 2025.02.17.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.4, iOS 18.4, macOS 15.4, tvOS 18.4, visionOS 2.4, watchOS 11.4
    IDEs:
      Android Studio: 2025.1 AI-251.25410.109.2511.13665796
      Xcode: 16.3/16E140 - /usr/bin/xcodebuild
    npmPackages:
      expo: 53.0.22 => 53.0.22
      expo-router: ~5.1.5 => 5.1.5
      react: 19.0.0 => 19.0.0
      react-dom: 19.0.0 => 19.0.0
      react-native: 0.79.6 => 0.79.6
      react-native-web: ^0.20.0 => 0.20.0
    npmGlobalPackages:
      eas-cli: 16.13.3
    Expo Workflow: bare

huylocit14054 avatar Aug 26 '25 09:08 huylocit14054

Please provide a minimal reproduction.

KiwiKilian avatar Sep 24 '25 05:09 KiwiKilian