example does not work on android

[marcmo]

3 issues that I found on Android:

• horizontal scroll does not snap to center selected image (but this is a know missing feature on android)
• ring of markers is not visible
• animation of markers does not seem to work

tested with react-native-maps 0.19.0 and 0.20.0

[browniefed]

Yep some of these are just due to react-native not supporting various features for scrollviews on Android. Would have to utilize another system for snapping on Android.

Markers is likely due to react-native-maps issues. Will take a look later about possibilities.

[nitinsh99]

@browniefed Thanks for great post. I am also unable to make marker ring animation work on android? Would you or @marcmo know the root cause or work around this?

This is where I am :

[constemi]

@nitinsh99 @marcmo I was able to get the ring back by moving 'position': absolute from styles.ring to styles.marker.

No behavior on animation though. The initial opacity on the focused marker can be seen by setting the native driver to false. However, this introduced another issue where it would remove border radius on the focused marker. No movement on the animation unfortunately even though the events are firing.

@browniefed any recommendation on applying the interpolation to something that would show up?

updated snack https://snack.expo.io/BktIbVazm

[rootober]

Same issue @constemi listed above

[MishraUdit]

hey, @browniefed is there any alternative to animate the marker for the Android as it is working on the iOS device in your tutorial.

[ZeroCool00]

Any success yet ?

[azanbinzahid]

I fixed the marker animation on android by moving position: 'absolute' from ring to marker in styles as suggested by @constemi . Additionally changed the scale outputRange to [1,2,1] and set height and width to 50 each in markerWrapper.

  markerWrap: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 50,
    width: 50,
  },
  marker: {
    position: 'absolute', // <-- moved from ring
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'rgba(130,4,150, 0.9)',
  },
  ring: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: 'rgba(130,4,150, 0.3)',
    borderWidth: 1,
    borderColor: 'rgba(130,4,150, 0.5)',
  },