rnmapbox / maps

A Mapbox react native module for creating custom maps
MIT License
2.27k stars 849 forks source link

[Bug]: Crash on android when open app and initialising the MapView #3015

Closed LuannguyenAxonActive closed 1 year ago

LuannguyenAxonActive commented 1 year ago

Mapbox Implementation

Mapbox

Mapbox Version

10.13.1

Platform

Android

@rnmapbox/maps version

10.0.8

Standalone component to reproduce

import React from 'react';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken(SecuredConfig.MAPBOX_ACCESS_TOKEN);

      <Mapbox.MapView
        ref={ref}
        style={[styles.map, isMapLoaded && styles.active]}
        onDidFinishLoadingMap={() => {
          onDidFinishLoadingMap && onDidFinishLoadingMap();
          setIsMapLoaded(true);
        }}
        styleURL={MAP_LIGHT_THEME_STYLE}
        onRegionIsChanging={onRegionIsChanging}
        onMapIdle={handleOnMapIdle}
        onTouchStart={onTouchStart}
        logoEnabled={false}
        scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}
        scaleBarEnabled={IS_ANDROID}
        attributionEnabled={displayAttributionButton}
        attributionPosition={ATTRIBUTION_BUTTON_POSITION}
        compassEnabled={false}
        rotateEnabled={false}
        regionDidChangeDebounceTime={100}
        pitchEnabled={false}>
          {props.children}
      </Mapbox.MapView>

Observed behavior and steps to reproduce

Caused by com.mapbox.maps.MapboxConfigurationException Using MapView requires providing a valid access token when inflating or creating the view. Provide the token by either: 1. Initialising the MapView programmatically using 'MapInitOptions' and configure the token using 'MapInitOptions.resourceOptions.accessToken'. 2. Or by passing it using MapView's 'mapbox_resourcesAccessToken' XML attribute. 3. Or by creating a mapbox_access_token string resource. The access token parameter is required when using a Mapbox service. Please see https://www.mapbox.com/help/create-api-access-token/ to learn how to create one. More information in this guide https://www.mapbox.com/help/first-steps-android-sdk/#access-tokens.

Caused by com.mapbox.maps.MapboxConfigurationException: Using MapView requires providing a valid access token when inflating or creating the view.
Provide the token by either:
  1. Initialising the MapView programmatically using 'MapInitOptions' and configure the token using 'MapInitOptions.resourceOptions.accessToken'.
  2. Or by passing it using MapView's 'mapbox_resourcesAccessToken' XML attribute.
  3. Or by creating a mapbox_access_token string resource.
The access token parameter is required when using a Mapbox service.
Please see https://www.mapbox.com/help/create-api-access-token/ to learn how to create one.
More information in this guide https://www.mapbox.com/help/first-steps-android-sdk/#access-tokens.
       at com.mapbox.maps.ResourceOptionsManager$Companion.getDefault(ResourceOptionsManager.kt:71)
       at com.mapbox.maps.ResourceOptionsManager$Companion.getDefault$default(ResourceOptionsManager.kt:50)
       at com.mapbox.maps.MapInitOptions$Companion.getDefaultResourceOptions(MapInitOptions.kt:47)
       at com.mapbox.maps.MapInitOptions.<init>(MapInitOptions.kt:28)
       at com.mapbox.maps.MapView.<init>(MapView.kt:57)
       at com.mapbox.rctmgl.components.mapview.RCTMGLMapView.<init>(RCTMGLMapView.kt:1094)
       at com.mapbox.rctmgl.components.mapview.RCTMGLMapViewManager.createViewInstance(RCTMGLMapViewManager.kt:88)
       at com.mapbox.rctmgl.components.mapview.RCTMGLMapViewManager.createViewInstance(RCTMGLMapViewManager.kt:43)
       at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:139)
       at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:76)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:281)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:194)
       at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:909)
       at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
       at com.facebook.react.uimanager.UIViewOperationQueue.pauseFrameCallback(UIViewOperationQueue.java:1003)
       at com.facebook.react.uimanager.UIImplementation.onHostPause(UIImplementation.java:783)
       at com.facebook.react.uimanager.UIManagerModule.onHostPause(UIManagerModule.java:222)
       at com.facebook.react.bridge.ReactContext.onHostPause(ReactContext.java:290)
       at com.facebook.react.ReactInstanceManager.moveToBeforeResumeLifecycleState(ReactInstanceManager.java:797)
       at com.facebook.react.ReactInstanceManager.onHostPause(ReactInstanceManager.java:586)
       at com.facebook.react.ReactInstanceManager.onHostPause(ReactInstanceManager.java:612)
       at com.facebook.react.ReactDelegate.onHostPause(ReactDelegate.java:63)
       at com.facebook.react.ReactActivityDelegate.onPause(ReactActivityDelegate.java:96)
       at com.facebook.react.ReactActivity.onPause(ReactActivity.java:52)
       at android.app.Activity.performPause(Activity.java:8778)
       at android.app.Instrumentation.callActivityOnPause(Instrumentation.java:1585)
       at android.app.ActivityThread.performPauseActivityIfNeeded(ActivityThread.java:5707)
       at android.app.ActivityThread.performPauseActivity(ActivityThread.java:5668)
       at android.app.ActivityThread.handlePauseActivity(ActivityThread.java:5620)
       at android.app.servertransaction.PauseActivityItem.execute(PauseActivityItem.java:47)
       at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
       at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
       at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
       at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2574)
       at android.os.Handler.dispatchMessage(Handler.java:106)
       at android.os.Looper.loopOnce(Looper.java:226)
       at android.os.Looper.loop(Looper.java:313)
       at android.app.ActivityThread.main(ActivityThread.java:8757)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)

Expected behavior

No response

Notes / preliminary analysis

It was just reported on our Firebase crash analytics, Seems just happens abnormally on some Samsung devices (Galaxy A53 5G, Galaxy S10e, Galaxy A13 5G), other devices still work with the same implementation. I'm not sure about the chip of these devices.

Additional links and references

No response

github-actions[bot] commented 1 year ago

Lint failed :sob:

Please fix the errors in your code example - More info.:


error: 'SecuredConfig' is not defined (no-undef) at example.jsx:5:23:
  3 | import Mapbox from '@rnmapbox/maps';
  4 | 
> 5 | Mapbox.setAccessToken(SecuredConfig.MAPBOX_ACCESS_TOKEN);
    |                       ^
  6 | 
  7 |       <Mapbox.MapView
  8 |         ref={ref}

error: 'ref' is not defined (no-undef) at example.jsx:8:14:
   6 | 
   7 |       <Mapbox.MapView
>  8 |         ref={ref}
     |              ^
   9 |         style={[styles.map, isMapLoaded && styles.active]}
  10 |         onDidFinishLoadingMap={() => {
  11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();

error: 'styles' is not defined (no-undef) at example.jsx:9:17:
   7 |       <Mapbox.MapView
   8 |         ref={ref}
>  9 |         style={[styles.map, isMapLoaded && styles.active]}
     |                 ^
  10 |         onDidFinishLoadingMap={() => {
  11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();
  12 |           setIsMapLoaded(true);

error: 'isMapLoaded' is not defined (no-undef) at example.jsx:9:29:
   7 |       <Mapbox.MapView
   8 |         ref={ref}
>  9 |         style={[styles.map, isMapLoaded && styles.active]}
     |                             ^
  10 |         onDidFinishLoadingMap={() => {
  11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();
  12 |           setIsMapLoaded(true);

error: 'styles' is not defined (no-undef) at example.jsx:9:44:
   7 |       <Mapbox.MapView
   8 |         ref={ref}
>  9 |         style={[styles.map, isMapLoaded && styles.active]}
     |                                            ^
  10 |         onDidFinishLoadingMap={() => {
  11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();
  12 |           setIsMapLoaded(true);

error: 'onDidFinishLoadingMap' is not defined (no-undef) at example.jsx:11:11:
   9 |         style={[styles.map, isMapLoaded && styles.active]}
  10 |         onDidFinishLoadingMap={() => {
> 11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();
     |           ^
  12 |           setIsMapLoaded(true);
  13 |         }}
  14 |         styleURL={MAP_LIGHT_THEME_STYLE}

error: 'onDidFinishLoadingMap' is not defined (no-undef) at example.jsx:11:36:
   9 |         style={[styles.map, isMapLoaded && styles.active]}
  10 |         onDidFinishLoadingMap={() => {
> 11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();
     |                                    ^
  12 |           setIsMapLoaded(true);
  13 |         }}
  14 |         styleURL={MAP_LIGHT_THEME_STYLE}

error: 'setIsMapLoaded' is not defined (no-undef) at example.jsx:12:11:
  10 |         onDidFinishLoadingMap={() => {
  11 |           onDidFinishLoadingMap && onDidFinishLoadingMap();
> 12 |           setIsMapLoaded(true);
     |           ^
  13 |         }}
  14 |         styleURL={MAP_LIGHT_THEME_STYLE}
  15 |         onRegionIsChanging={onRegionIsChanging}

error: 'MAP_LIGHT_THEME_STYLE' is not defined (no-undef) at example.jsx:14:19:
  12 |           setIsMapLoaded(true);
  13 |         }}
> 14 |         styleURL={MAP_LIGHT_THEME_STYLE}
     |                   ^
  15 |         onRegionIsChanging={onRegionIsChanging}
  16 |         onMapIdle={handleOnMapIdle}
  17 |         onTouchStart={onTouchStart}

error: 'onRegionIsChanging' is not defined (no-undef) at example.jsx:15:29:
  13 |         }}
  14 |         styleURL={MAP_LIGHT_THEME_STYLE}
> 15 |         onRegionIsChanging={onRegionIsChanging}
     |                             ^
  16 |         onMapIdle={handleOnMapIdle}
  17 |         onTouchStart={onTouchStart}
  18 |         logoEnabled={false}

error: 'handleOnMapIdle' is not defined (no-undef) at example.jsx:16:20:
  14 |         styleURL={MAP_LIGHT_THEME_STYLE}
  15 |         onRegionIsChanging={onRegionIsChanging}
> 16 |         onMapIdle={handleOnMapIdle}
     |                    ^
  17 |         onTouchStart={onTouchStart}
  18 |         logoEnabled={false}
  19 |         scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}

error: 'onTouchStart' is not defined (no-undef) at example.jsx:17:23:
  15 |         onRegionIsChanging={onRegionIsChanging}
  16 |         onMapIdle={handleOnMapIdle}
> 17 |         onTouchStart={onTouchStart}
     |                       ^
  18 |         logoEnabled={false}
  19 |         scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}
  20 |         scaleBarEnabled={IS_ANDROID}

error: 'IS_ANDROID' is not defined (no-undef) at example.jsx:19:27:
  17 |         onTouchStart={onTouchStart}
  18 |         logoEnabled={false}
> 19 |         scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}
     |                           ^
  20 |         scaleBarEnabled={IS_ANDROID}
  21 |         attributionEnabled={displayAttributionButton}
  22 |         attributionPosition={ATTRIBUTION_BUTTON_POSITION}

error: 'ANDROID_SCALE_BAR_POSITION' is not defined (no-undef) at example.jsx:19:40:
  17 |         onTouchStart={onTouchStart}
  18 |         logoEnabled={false}
> 19 |         scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}
     |                                        ^
  20 |         scaleBarEnabled={IS_ANDROID}
  21 |         attributionEnabled={displayAttributionButton}
  22 |         attributionPosition={ATTRIBUTION_BUTTON_POSITION}

error: 'IS_ANDROID' is not defined (no-undef) at example.jsx:20:26:
  18 |         logoEnabled={false}
  19 |         scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}
> 20 |         scaleBarEnabled={IS_ANDROID}
     |                          ^
  21 |         attributionEnabled={displayAttributionButton}
  22 |         attributionPosition={ATTRIBUTION_BUTTON_POSITION}
  23 |         compassEnabled={false}

error: 'displayAttributionButton' is not defined (no-undef) at example.jsx:21:29:
  19 |         scaleBarPosition={IS_ANDROID ? ANDROID_SCALE_BAR_POSITION : undefined}
  20 |         scaleBarEnabled={IS_ANDROID}
> 21 |         attributionEnabled={displayAttributionButton}
     |                             ^
  22 |         attributionPosition={ATTRIBUTION_BUTTON_POSITION}
  23 |         compassEnabled={false}
  24 |         rotateEnabled={false}

error: 'ATTRIBUTION_BUTTON_POSITION' is not defined (no-undef) at example.jsx:22:30:
  20 |         scaleBarEnabled={IS_ANDROID}
  21 |         attributionEnabled={displayAttributionButton}
> 22 |         attributionPosition={ATTRIBUTION_BUTTON_POSITION}
     |                              ^
  23 |         compassEnabled={false}
  24 |         rotateEnabled={false}
  25 |         regionDidChangeDebounceTime={100}

error: 'props' is not defined (no-undef) at example.jsx:27:12:
  25 |         regionDidChangeDebounceTime={100}
  26 |         pitchEnabled={false}>
> 27 |           {props.children}
     |            ^
  28 |       </Mapbox.MapView>
  29 | 

18 errors found.```