React native package @homee/react-native-mapbox-navigation not showing map (ANDROID)

Question

I am trying to implement a turn by turn navigation in react native, I have used the package '@homee/react-native-mapbox-navigation'. I have used these instructions (https://reactnativeexample.com/smart-mapbox-turn-by-turn-routing-based-on-real-time-traffic-for-react-native/) to set all the gradle.properties / gradle.build and the manifest setting. This is how my app.js looks like:

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import MapboxNavigation from '@homee/react-native-mapbox-navigation';




const App: () => Node = () => {
  // const isDarkMode = useColorScheme() === 'dark';

  // const backgroundStyle = {
  //   backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  // };

  return (

    <View style={styles.container}>
            <MapboxNavigation
              origin={[-97.760288, 30.273566]}
              destination={[-97.918842, 30.494466]}
              shouldSimulateRoute={true}
              onLocationChange={(event) => {
                const { latitude, longitude } = event.nativeEvent;
              }}
              onRouteProgressChange={(event) => {
                const {
                  distanceTraveled,
                  durationRemaining,
                  fractionTraveled,
                  distanceRemaining,
                } = event.nativeEvent;
              }}
              onError={(event) => {
                const { message } = event.nativeEvent;
                console.log('error', event)
              }}
              onCancelNavigation={() => {
                // User tapped the "X" cancel button in the nav UI
                // or canceled via the OS system tray on android.
                // Do whatever you need to here.
              }}
              onArrive={() => {
                // Called when you arrive at the destination.
              }}
            />
      
    </View>

  );
};

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

});

export default App;

This is what my simulator is showing:

Is there someone who knows why I am getting an empty screen and how to fix this?

Thx guys!

Answer 1

The code works fine the mistake was that I put the meta-data tag in the wrong section of the androidManifest.xml. I fixed this and it worked