Ionic react not showing Mapbox map on Android emulator


I was trying to create a simple map application using Ionic React and Mapbox. Everything works as expected in Chrome and Chrome developer tools if I switch it to mobile and choose Pixel 2. However when I create the build and try to run it with Android emulator the map just doesn’t show:

Any idea why?

Ionic info:


   Ionic CLI       : 5.4.1 (C:\Users\JP\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework : @ionic/react 4.8.0-rc.1


   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0


   cordova-res : not installed
   native-run  : not installed


   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

Post the .ts code of the mapbox implementation on your page. In the console, do you see any error messages?

Thanks for replying!

This is the only warning that I got in the console:

index.js:1437 Warning: Received `true` for a non-boolean attribute `text-center`.

If you want to write it to the DOM, pass a string instead: text-center="true" or text-center={value.toString()}.
    in div (at LoginComponent.tsx:54)
    in ion-col (created by IonCol)
    in IonCol (created by ForwardRef(IonCol))
    in ForwardRef(IonCol) (at LoginComponent.tsx:53)
    in ion-row (created by IonRow)
    in IonRow (created by ForwardRef(IonRow))
    in ForwardRef(IonRow) (at LoginComponent.tsx:52)
    in ion-grid (created by IonGrid)
    in IonGrid (created by ForwardRef(IonGrid))
    in ForwardRef(IonGrid) (at LoginComponent.tsx:51)
    in form (at LoginComponent.tsx:50)
    in ion-content (created by IonContent)
    in IonContent (created by ForwardRef(IonContent))
    in ForwardRef(IonContent) (at LoginComponent.tsx:49)
    in Login (created by Context.Consumer)
    in Route (at App.tsx:34)
    in ion-router-outlet (created by IonRouterOutlet)
    in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (at App.tsx:32)
    in div (created by IonPageInternal)
    in IonPageInternal (created by ForwardRef(IonPage))
    in ForwardRef(IonPage) (at App.tsx:31)
    in NavManager (created by RouteManager)
    in RouteManager (created by Context.Consumer)
    in RouteManager (created by IonReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by IonReactRouter)
    in IonReactRouter (at App.tsx:30)
    in ion-app (created by IonApp)
    in IonApp (created by ForwardRef(IonApp))
    in ForwardRef(IonApp) (at App.tsx:29)
    in App (at src/index.tsx:5)

And this is the tsx file of the component:

import React,{ useState } from 'react'
import MapGL, {GeolocateControl } from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const TOKEN= ''

const MapViewer = () => {

  const [viewport, setViewPort ] = useState({
    width: "100%",
    height: 900,
    latitude: 9.957537,
    longitude: -84.196117,
    zoom: 6

  const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 1000 })
  return (
    <div style={{ margin: '0 auto'}}>
      <h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>GeoLocator: Click To Find Your Location or click <a href="/search">here</a> to search for a location</h1>
            float: 'left',
            margin: '50px',
            padding: '10px'
          positionOptions={{enableHighAccuracy: true}}

export default MapViewer;

Thanks in advance!

did you ever fix this issue? I’m having the same problem