0

Describe the bug

In my case Map is not displaying in release APK(Marker is showing properly). However debug build is ok.

I also have tested creating different token.

Example

import React, {Component} from 'react';
import Mapbox, {MapView, Camera} from '@react-native-mapbox-gl/maps';
import {Dimensions, Alert, View, Image, Platform} from 'react-native';
const appConfig = require('../../../app.json');
Mapbox.setAccessToken(appConfig.mapboxAccessToken);

const {height, width} = Dimensions.get('window');

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      basicSetup: {
        showUserLocation: true,
        centerCoordinate: [],
        zoomLevel: 12,
        maxZoomLevel: 19,
        compassEnabled: true,
        logoEnabled: false,
        attributionEnabled: false,
      },
      disable: {
        zoomEnabled: false,
        scrollEnabled: false,
        pitchEnabled: false,
        rotateEnabled: false,
      },
    };
  }
  render() {

    return (
      <View style={[styles.map, style]}>
        <MapView
          styleURL={appConfig['someconfigname']}
          style={{flex: 1}}
          ref={(ref) => {
            this.control = ref;
          }}>
          <Camera ref={(c) => (this.camera = c)} zoomLevel={14} />
          {children}
        </MapView>

        {hideLogo ? null : (
          <View style={[styles.logo, logoStyle]}>
            <Image
              resizeMode={'contain'}
              source={require('../../../resources/images/map_logo.png')}
              style={{flex: 1}}
            />
          </View>
        )}
      </View>
    );
  }
}

export default Map;

const styles = {
  map: {
    width,
    height,
  },
  logo: {
    position: 'absolute',
    bottom: Platform.OS == 'ios' ? 20 : 40,
    left: 20,
    shadowColor: '#37474f',
    shadowOpacity: 0.24,
    shadowOffset: {height: 2, width: 0},
    elevation: 3,
    shadowRadius: 3,
  },
  circle: {
    position: 'absolute',
    borderWidth: 1,
    borderColor: '#111',
    backgroundColor: '#03111111',
    justifyContent: 'center',
    alignItems: 'center',
  },
  circleCenter: {
    height: 4,
    width: 4,
    borderRadius: 4,
    backgroundColor: '#a1a5d1',
  },
  radiusText: {
    fontSize: 13.47,
    color: '#a1a5d1',
  },
};

Expected behavior

It should display map even though it is in release mode

Screenshots

======= Debug mode ======= enter image description here

======= Release Mode ======= enter image description here

Platform: [Android]

Device: [One Plus 7T]

Emulator/ Simulator: [no]

OS: [Android 9]

react-native-mapbox-gl Version [8.1.0-rc.1]

React Native Version [0.62.2]

nazmul
  • 367
  • 2
  • 14

1 Answers1

0

Problem is solved now. Android was blocking custom style url, thats why the map was not loading. Just had to add some network rule to bypass that. In android manifest file under application tag added this ,

android:networkSecurityConfig="@xml/network_security_config"

And , in that xml file added the network rule that we need to implement,

    <?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">custom style url</domain>
        <domain includeSubdomains="false">localhost</domain>
        <domain includeSubdomains="false">10.0.2.2</domain>
        <domain includeSubdomains="false">10.0.3.2</domain>
    </domain-config>
</network-security-config>
nazmul
  • 367
  • 2
  • 14