browniefed/map_animated_scrollview

example does not work on android

Opened this issue · 7 comments

marcmo commented

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 commented

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 commented

@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 :
untitled

  • 👍1
constemi commented

@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

android_animate

rootober commented

Same issue @constemi listed above

MishraUdit commented

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

  • 👍2
ZeroCool00 commented

Any success yet ?

azanbinzahid commented

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)',
  },
  • 👍1