Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[marker flicker] Fix flicker of map pins on state change #728

Merged
merged 2 commits into from
Nov 4, 2016

Conversation

mlanter
Copy link
Contributor

@mlanter mlanter commented Oct 25, 2016

Fixes #683 caused by #548.

In #548, MapMarker.js was changed from
const AIRMapMarker = requireNativeComponent('AIRMapMarker', MapMarker); to
const AIRMapMarker = this.getAirComponent();.

AirMapMarker is what is returned in the render method.

The bug was that this.getAirComponent() was returning a new native component each time causing a re-render. This only happened for the default component, not the other ones since they were cached. The fix is to cache the default component.

Note: this seems to affect map markers with arbitrary views inside them the most.

Before:
before 2

After:
after

@mlanter
Copy link
Contributor Author

mlanter commented Oct 25, 2016

athaeryn added a commit to athaeryn/react-native-maps that referenced this pull request Oct 27, 2016
@@ -48,7 +48,7 @@ export default function decorateMapComponent(Component, { componentType, provide
if (components[provider]) return components[provider];

if (provider === PROVIDER_DEFAULT) {
components.default = getDefaultComponent();
if (!components.default) components.default = getDefaultComponent();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for catching this! I wonder if it would be better to do:

components[DEFAULT_PROVIDER] = getDefaultComponent();

instead.... It's just a little weird because the value of DEFAULT_PROVIDER is null.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that's a bit clearer (and can use the existing cache return at the beginning of the function).

carleryd added a commit to carleryd/react-native-maps that referenced this pull request Oct 31, 2016
@@ -48,8 +48,8 @@ export default function decorateMapComponent(Component, { componentType, provide
if (components[provider]) return components[provider];

if (provider === PROVIDER_DEFAULT) {
components.default = getDefaultComponent();
return components.default;
components[PROVIDER_DEFAULT] = getDefaultComponent();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need to check if already set, because it was then it would have been returned earlier.

@mlanter
Copy link
Contributor Author

mlanter commented Nov 1, 2016

@gilbox

@gilbox gilbox merged commit 27f9c30 into react-native-maps:master Nov 4, 2016
@gilbox
Copy link
Contributor

gilbox commented Nov 4, 2016

domo arigatou!

@max-mykhailenko
Copy link

When do you plan to release this?

@max-mykhailenko
Copy link

@gilbox How I can help you with release?

timxyz pushed a commit to 3sidedcube/react-native-maps that referenced this pull request Nov 22, 2016
* commit '3d28a7d9fd005d59219668cf61177fe574170b84': (24 commits)
  examples-setup.md: update android instructions (react-native-maps#743)
  add example for overlay overpress and docs
  iOS google maps custom tile support (react-native-maps#770)
  [Docs] Fix capitalisation of Xcode and CocoaPods (react-native-maps#749)
  Implements animateToRegion to Google Maps iOS (react-native-maps#779)
  [RN][iOS][google] Set region only when view has width&height - Fix type issue in AIRMapManager - Setup Gemfile in example/ios dir to avoid problems with different versions of cocoapods - Update examples-setup.md to use bundler - Change MapView so that we only set the native region prop when there is a width and height. GoogleMaps iOS requires the width and height to properly calculate the map zoom level.
  updates
  [marker flicker]  Fix flicker of map pins on state change (react-native-maps#728)
  add onPress for polygons and polylines on iOS and Android
  Use latest Google Play Services (react-native-maps#731)
  Update installation.md (react-native-maps#742)
  Add latest patch releases to the changelog (react-native-maps#752)
  [ios][google] implement fitToSuppliedMarkers and fitToCoordinates (react-native-maps#750)
  If we've disabled scrolling within the map, then don't capture the touch events (react-native-maps#664)
  Fix dynamic imageSrc removal, fix flicker in react-native-maps#738  (react-native-maps#737)
  Fix Anchor point on Google Maps iOS
  Added ios google maps circle support
  Added google map type only check
  Fixed typo in google maps podspec
  Added ios google maps polygon, polyline, maptype support
  ...
Exilz pushed a commit to archriss/react-native-maps that referenced this pull request Dec 9, 2016
@mlanter mlanter deleted the fix_flicker branch August 18, 2017 22:51
@alvelig
Copy link
Contributor

alvelig commented Dec 15, 2017

Looks like does not happen in recent versions (0.19.0) Let us know if still persists.

@hugoh59
Copy link

hugoh59 commented Mar 2, 2018

Still having this flickering bug.

@byteab
Copy link

byteab commented Jul 14, 2020

still bug exist in version 0.27.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Animate marker blinks on react-native-maps@0.10.1
6 participants