react-native-maps: Marker flat and rotation not working on IOS

Bug

Marker flat and rotation not working on IOS. I’m using the latest version as of this day. And I’m using this library on Expo Managed WorkFlow.

Environment info

React native info output:

System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 7.14 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.3.1/11C505 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0 
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4

Library version: 0.26.1

Steps To Reproduce

Simply use this marker:

                  <Marker
                    coordinate={{
                        latitude : 	51.410755,
                        longitude : -0.218098,
                    }}
                    title='Your Driver'
                    description='Arriving in 2 mins'
                    rotation={50}
                    flat={false}
                >
                    <Image source={require('../assets/uber/car.png')} style={{width : 45,height : 45}}/>
                </Marker>

And run on ios.The flat and rotation for sure have no effect. I also found : https://github.com/react-native-community/react-native-maps/pull/3051 But I guess that pull request hasn’t been added anyway.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 17

Most upvoted comments

I did this @iedmrc. First I tried giving the marker an image prop, and transforming that with CSS. But I found out that the Marker component unloads marker images that are out of view. I am dealing with 1500+ global markers, so any amount of panning led to visible loading.

My solution is to use a child Image component like so.

<Marker
  key={feature.properties.callsign}
  coordinate={{ latitude: coordinates[1], longitude: coordinates[0] }}
>
  <Image
    style={[
      { transform: [{ rotate: `${feature.properties.heading}deg` }] },
      styles.icon,
    ]}
    source={require('~/assets/plane.png')}
  />
</Marker>

Hope this helps!

doylemark on Jun 29, 2020

Definitely not,and I wonder the way react native community hasn’t even replied here.

Stevemoretz on Jun 25, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on Dec 3, 2020

Fabulous thank you,no it’s not supported on expo yet.But I’m thinking using expo managed work flow doesn’t worth it anymore it’s limited and also almost all its features are now available for bare

Stevemoretz on Oct 4, 2020