React-native-mapbox-gl: Blank Screen With Logo

[fuaditrockz]

I've followed all of the installation guide for React Native Android. And then I make a signup and generate new Token in my Dashboard.

Then, I just got like this... :cry:

What is this? I must pay before using it?

This is my code...

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Mapbox from '@mapbox/react-native-mapbox-gl';

Mapbox.setAccessToken('MY_TOKEN');

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Mapbox.MapView
            styleURL={Mapbox.StyleURL.Street}
            zoomLevel={15}
            centerCoordinate={[11.256, 43.770]}
            style={styles.container}>
        </Mapbox.MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

[fuaditrockz]

Finally, I just set my OpenGL in my emulator to SwiftShader. So, everything is gonna be okay...

Step:

1. Open your emulator
2. Go to Settings on the right side of your phone emulator.
3. Click Advanced tab, and choose the OpenGL ES Renderer to SwiftShader.
4. Restart required, just restart your emulator.
5. Run React Native Android again.

[StanislavMayorov]

@fuaditrockz thank you for sharing your solution. Please rename the issue to add information about android emulator to improve search. Like Map doesn't render on android emulator