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

remove marker: Attempt to invoke virtual method 'void com.google.android.gms.maps.model.setIcon(com.google.android.gms.maps.model.BitmapDescription)' on a null object reference #2507

Closed
mehrabadi opened this issue Sep 23, 2018 · 19 comments
Labels

Comments

@mehrabadi
Copy link

I've used react-native-maps in my project. It was working fine. then I added some new components to project, suddenly when I remove custom markers from map, red screen appears:

5d5ec4de-f9e3-4a13-a614-8647ff1c93ed

error:

Attempt to invoke virtual method 'void com.google.android.gms.maps.model.setIcon(com.google.android.gms.maps.model.BitmapDescription)' on a null object reference.

my package.json:

{
  "name": "Parkshin",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "0.0.12",
    "elements": "^0.6.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "moment-jalaali": "^0.7.2",
    "native-base": "^2.3.10",
    "npm": "^5.8.0",
    "prop-types": "^15.6.1",
    "react": "16.3.0-alpha.1",
    "react-box-shadow": "^1.0.1",
    "react-native": "^0.54.4",
    "react-native-animatable": "^1.2.4",
    "react-native-check-box": "^2.0.2",
    "react-native-circular-progress": "^1.0.1",
    "react-native-elements": "^0.19.0",
    "react-native-fcm": "^14.2.1",
    "react-native-google-analytics-bridge": "^6.0.1",
    "react-native-grid-list": "^1.0.6",
    "react-native-image-picker": "^0.26.7",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-local-mongodb": "^2.0.0",
    "react-native-maps": "git+https://github.com/react-community/react-native-maps.git",
    "react-native-maps-directions": "^1.6.0",
    "react-native-modal-dropdown": "^0.6.2",
    "react-native-pushe": "^1.4.1",
    "react-native-send-intent": "^1.0.25",
    "react-native-simple-toast": "0.0.8",
    "react-native-svg": "^6.5.2",
    "react-native-touchable-safe": "^1.0.2",
    "react-native-vector-icons": "^4.5.0",
    "react-navigation": "^1.5.12",
    "react-number-format": "^3.5.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  },
  "jest": {
    "preset": "react-native"
  }
}

this is the usage of custom marker in the map:

renderMarker(marker,index) {
        return (
            <MapView.Marker key={index}
                            id={marker.hash_id}
                            onPress={() => this.markerClick(marker)}
                            coordinate={{
                                latitude: marker.lat,
                                longitude: marker.lng,
                                latitudeDelta: 0.00,
                                longitudeDelta: 0.00
                            }}
            >
                <PriceMarker amount={marker.hour_price / 10} hashId={marker.hash_id} parkingType={marker.type} />
            </MapView.Marker>
        )
    }

when user pan on the map, markers will render.

@zigzactly
Copy link

zigzactly commented Sep 27, 2018

I am having the exact same problem when trying to customise my marker icons. Icons are customized this way:

locations.map((x, i) => {
    return (
        <Marker
            key={i}
            coordinate={{ latitude: x.lat, longitude: x.long }}
            title={x.title}
            description={x.address}
        >
            <View>
            <Icon
                name="map-marker"
                type="FontAwesome"
            />
            </View>
        </Marker>
    );
});

The issue goes away after removing the View + Icon children and leaving it as default icon.

@NicoZamoraU
Copy link

NicoZamoraU commented Sep 28, 2018

in AirMapMarker.java from package, say:

// Let it render one more time to avoid race conditions.
// i.e. Image onLoad ->
//      ViewChangesTracker may not get a chance to render ->
//      setState({ tracksViewChanges: false }) ->
//      image loaded but not rendered.

so, you need add tracksViewChanges and setting to false, into <Marker /> for example:

state = {
    tracksViewChanges: false,
  }

render() {
   return (
   ...
   <MapView.Marker
        tracksViewChanges={this.state.tracksViewChanges}
        zIndex={9}
        coordinate={{
        longitude: location.coordinates[0]
        latitude: location.coordinates[1],
        }}
        centerOffset={{ x: 0, y: -20 }}
        onPress={handlePress}
        title={title}
   >
   ...

This worked for me. I hope for you too.

@bcgoodmate
Copy link

bcgoodmate commented Oct 2, 2018

I've encountered similar issue and no idea of the right solution. Please help.

<Marker.Animated coordinate={arr.coordinate}> <Image source={image} /> </Marker.Animated>

@yalopov
Copy link

yalopov commented Oct 9, 2018

i'm getting this issue too using "react": "16.4.1", "react-native": "0.56.0" and using react-native-maps from master only when using ** tracksViewChanges**, turn it off seems to solve the problem but then marker can no longer update changes

@todorone
Copy link
Contributor

Also experienced this problem on Android, RN 0.56, react-native-maps 0.22

@jerryjj
Copy link

jerryjj commented Oct 22, 2018

The PR fixed the problem for me at least. Is there a timeline when this could get merged and published?
Thanks!

@ghost
Copy link

ghost commented Oct 25, 2018

Thank you for the feedback. Is the any chance to make a release soon?

@DanGDroid
Copy link

i checkedout this fix and it solved the above error but now i get an other error:
The specified child already has a parent. You must call removeView() on the child's parent first

@ZeroCool-85
Copy link

Same issue here, tried the changes by @salah-ghanim , but in my opinion it makes nothing else than setting tracksViewChanges to false.

And then we have the case that the markers will not update.

When I set tracksViewChanges to false, my map will not show any markers on start. They will first appear when I zoom into the map.

"react-native-maps": "^0.22.0",
"react": "16.5.0",
"react-native": "0.57.1",

MarkerCode

const ClusterMarker = ({ coordinate, width, height, image, count, tracksViewChanges }) => {
    return (
        <Marker coordinate={coordinate} tracksViewChanges={tracksViewChanges}>
            <Image width={width} height={height} image={image} asset/>
            <TextWrapper>
                <ClusterText>{count}</ClusterText>
            </TextWrapper>
        </Marker>
    )
}

const MultiMarker = ({ coordinate, width, height, image, count, tracksViewChanges }) => {
    return (
        <Marker coordinate={coordinate} tracksViewChanges={tracksViewChanges}>
            <Image width={width} height={height} image={image} asset/>
            <TextWrapper>
                <MarkerText>{count}</MarkerText>
            </TextWrapper>
        </Marker>
    )
}

const EntityMarker = ({ coordinate, width, height, entity, tracksViewChanges }) => {
    return MARKER_IMAGES[entity] ?
        <Marker coordinate={coordinate} tracksViewChanges={tracksViewChanges}>
            <Image width={width} height={height} image={MARKER_IMAGES[entity]} asset/>
        </Marker> : null
}

MapViewSnippet

<MapView
                        // provider={PROVIDER_GOOGLE}
                        style={[ styles.container, { height: this.state.mapHeight }]}
                        initialRegion={{...region, ...DEFAULT_DELTA}}
                        onRegionChangeComplete={calcBounds}
                    >
                        {
                            !hideRadius &&
                            <Circle
                                center={home}
                                radius={currentUser && currentUser.config && currentUser.config.radius && currentUser.config.radius.distance || 10000 }
                                fillColor={theme.colors.mapRadius}
                                strokeColor={theme.colors.mapRadius}
                                strokeWidth={theme.measures.strokeWidth}
                            />
                        }
                        {home && <HomeMarker coordinate={home} />}
                        {
                            clusters.map((cluster, index) =>
                                !cluster.poi ?
                                    <ClusterMarker
                                        key={cluster.id}
                                        count={cluster.properties.point_count}
                                        coordinate={{ latitude: cluster.geometry.coordinates[1], longitude: cluster.geometry.coordinates[0] }}
                                        tracksViewChanges={tracksViewChanges}
                                    />
                                     : (
                                        cluster.markerID && cluster.properties.point_count > 1 ?
                                            <MultiMarker
                                                key={cluster.markerID}
                                                coordinate={{ latitude: cluster.geometry.coordinates[1], longitude: cluster.geometry.coordinates[0] }}
                                                count={cluster.properties.point_count}
                                                tracksViewChanges={tracksViewChanges}
                                            /> :
                                            <EntityMarker
                                                key={cluster.poi.id}
                                                coordinate={{ latitude: cluster.geometry.coordinates[1], longitude: cluster.geometry.coordinates[0] }}
                                                entity={cluster.poi.type}
                                                tracksViewChanges={tracksViewChanges}
                                            />
                                    )
                            )
                        }
</MapView>

@yalopov
Copy link

yalopov commented Oct 30, 2018

That PR solved my issue, thanks

@jasperkuperus
Copy link

That PR solves it for me too. Any idea when this will be released? I am now pinned on a master commit.

@mangei
Copy link

mangei commented Nov 2, 2018

I have the same error. I am using react-native-maps-super-cluster module and it appears when using a custom marker view.

It was not easy for me to find this issue, therefore I am also adding the stacktrace here:

E/unknown:ReactNative: Exception in native call
    java.lang.NullPointerException: Attempt to invoke virtual method 'void com.google.android.gms.maps.model.Marker.setIcon(com.google.android.gms.maps.model.BitmapDescriptor)' on a null object reference
        at com.airbnb.android.react.maps.AirMapMarker.updateMarkerIcon(AirMapMarker.java:289)
        at com.airbnb.android.react.maps.AirMapMarker.updateTracksViewChanges(AirMapMarker.java:268)
        at com.airbnb.android.react.maps.AirMapMarker.removeFromMap(AirMapMarker.java:401)
        at com.airbnb.android.react.maps.AirMapView.removeFeatureAt(AirMapView.java:606)
        at com.airbnb.android.react.maps.AirMapManager.removeViewAt(AirMapManager.java:415)
        at com.airbnb.android.react.maps.AirMapManager.removeViewAt(AirMapManager.java:29)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:378)
        at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:179)
        at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:821)
        at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:928)
        at com.facebook.react.uimanager.UIViewOperationQueue.access$2100(UIViewOperationQueue.java:46)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:988)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:134)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:105)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:869)
        at android.view.Choreographer.doCallbacks(Choreographer.java:683)
        at android.view.Choreographer.doFrame(Choreographer.java:616)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:857)
        at android.os.Handler.handleCallback(Handler.java:751)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6077)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)

@salah-ghanim
Copy link
Collaborator

@ZeroCool-85 my changes only do a nullability check.

they shouldn't affect any logic in the react-native-maps APIs

as for the crash you're receiving it might have something to do with the way the clustering library handles annotations, If that's your case (you're using a clustering library) I'd suggest you open an issue there.

@vpontis
Copy link

vpontis commented Nov 12, 2018

I am getting the same error on React Native Maps v0.22.1 though I am seeing com.google.android.gms.maps.model.l.a instead of com.google.android.gms.maps.model.setIcon but it looks like this is pointing to the same line AirMapMarker.java:289.

Attempt to invoke virtual method 'void com.google.android.gms.maps.model.l.a(com.google.android.gms.maps.model.a)' on a null object reference
updateMarkerIcon
    AirMapMarker.java:289
updateTracksViewChanges
    AirMapMarker.java:268
removeFromMap
    AirMapMarker.java:401
removeFeatureAt
    AirMapView.java:606
removeViewAt
    AirMapManager.java:415
removeViewAt
    AirMapManager.java:29
manageChildren
    NativeViewHierarchyManager.java:335
execute
    UIViewOperationQueue.java:227
run
    UIViewOperationQueue.java:894
flushPendingBatches
    UIViewOperationQueue.java:1001
access$2400
    UIViewOperationQueue.java:46
doFrameGuarded
    UIViewOperationQueue.java:1061
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:134
doFrame
    ChoreographerCompat.java:105
run
    Choreographer.java:909
doCallbacks
    Choreographer.java:723
doFrame
    Choreographer.java:655
run
    Choreographer.java:897
handleCallback
    Handler.java:790
dispatchMessage
    Handler.java:99
loop
    Looper.java:164
main
    ActivityThread.java:6494
invoke
    Method.java
run
    RuntimeInit.java:438
main
    ZygoteInit.java:807

I updated to the new version of Expo today 31.0.5 which points to expo/react-native-maps#v0.22.1-exp.0.

Here is what my Marker code looks like:

      <MapView.Marker
        onPress={select_marker}
        stopPropagation={true}
        style={{
          zIndex: z_index,
        }}
        coordinate={{
          latitude: vehicle.latitude,
          longitude: vehicle.longitude,
        }}
      >
        <Image
          source={source}
          style={style}
        />
      </MapView.Marker>

expo/expo#2680 mentions that it should fix this issue. But I am still seeing the problem. Any advice on how I can troubleshoot this?

cc @sjchmiela and @tsapeta

@sjchmiela
Copy link

Could you also please ensure you’re testing the behavior with the latest Expo Client (v2.9.2)? It has been 5 hours ago to the Play Store and it is the only version that contains the bugfix. 😊

@vpontis
Copy link

vpontis commented Nov 13, 2018

@sjchmiela updated to the new Expo client and it's working now! For others, I upgraded by uninstalling Expo on my simulator and reinstalling it via the Expo CLI.

Thanks so much for all of your hard work.

I didn't realize that the Expo client packaged in the Expo code. I assumed it was coming from my node modules (which had the correct version of Expo RNM). Is there anything I can read to help my understanding of the architecture of Expo / React Native?

@sjchmiela
Copy link

Hm… 🤔 This looks like a simple starter when it comes to Expo architecture in general — How Expo Works. Apart from that:

One Expo Client app lets you run experiences with multiple different SDK versions. If so, we need to be able to package multiple SDK environments in one codebase. To achieve that, we keep track of two sets of environments:

To be able to compile all this in a single application (with unique class names as a requirement), we prefix class names (on Android we add abiXX_X_X at the beginning of package name example, on iOS we add ABIXX_X_X prefix to class/macro name example). Versioning scripts live in expo/tools.

Every Expo SDK release depends on different sets of external libraries (we pulled in not only react-native-maps, but also -svg, -gesture-handler, -screens, -admob, -view-shot, -reanimated and some more). As we do with React Native and Expo codebase, we need to be able to run different versions of these libraries on different SDKs. To help us do that:

  1. we sometimes maintain our own forks of the repositories (eg. https://github.com/expo/react-native-maps) where we can apply Expo-specific fixes to libraries (eg. c7a55f5...expo:e6f98ff)
  2. we have Gulp tasks to update our copy of the library (update-react-native-maps task). These tasks copy the library code into unversioned part of the codebase, renaming prefixes of the class names/packages. This makes third-party code more similar to Expo codebase in terms of naming, which in turn lets us run versioning script on those classes without many problems and have multiple versions of third-party libraries in one application.

Apart from code that is subject to versioning there is also code that isn't versioned, sort of an entrypoint to the application, which binds these different environments. I won't explain it in much detail as the details aren't important to the discussed aspect of Expo, if you want, you can find it in expo/ios/Exponent/Kernel and expo/android/expoview/…/host.exp).

When you run your experience with Expo Client, kernel fetches the manifest from your computer, checks requested sdkVersion and runs your JS bundle in a corresponding versioned environment. Whole JS bundle is built on your computer and this is where your node_modules kick in. Native code is already in Expo Client, waiting to be run.

I hope I've lifted the veil of secrecy at least a little bit. 🙂

@jugal-newvision
Copy link

in AirMapMarker.java from package, say:

// Let it render one more time to avoid race conditions.
// i.e. Image onLoad ->
//      ViewChangesTracker may not get a chance to render ->
//      setState({ tracksViewChanges: false }) ->
//      image loaded but not rendered.

so, you need add tracksViewChanges and setting to false, into <Marker /> for example:

state = {
    tracksViewChanges: false,
  }

render() {
   return (
   ...
   <MapView.Marker
        tracksViewChanges={this.state.tracksViewChanges}
        zIndex={9}
        coordinate={{
        longitude: location.coordinates[0]
        latitude: location.coordinates[1],
        }}
        centerOffset={{ x: 0, y: -20 }}
        onPress={handlePress}
        title={title}
   >
   ...

This worked for me. I hope for you too.

Can you please provide the complete code?
My code is following here, I want to know, how can we manage marker on MAP by change dropdown value (Lat, Long) of any location?

<MapView style={ styles.mapView }
region={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.1,
longitudeDelta: 0.1
}}
>
<MapView.Marker
tracksViewChanges={this.state.tracksViewChanges}
zIndex={9}
coordinate={{
longitude: this.state.longitude,
latitude: this.state.latitude,
}}
centerOffset={{ x: 0, y: -20 }}
title={"My First Gym"}
/>

@stale
Copy link

stale bot commented Oct 3, 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 stale bot added the stale label Oct 3, 2020
@stale stale bot closed this as completed Oct 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests