homeeondemand / react-native-mapbox-navigation

A navigation UI ready to drop into your React Native application
MIT License
162 stars 123 forks source link

Doesn't render anything #39

Closed ImranFromPoppins closed 3 years ago

ImranFromPoppins commented 3 years ago

I made a build for android but the screen was blank. Couldn't see the map

  return (
    <View style={styles.container}>
      <MapboxNavigation
        origin={[-97.760288, 30.273566]}
        destination={[-97.918842, 30.494466]}
        onLocationChange={event => {
          const { latitude, longitude } = event.nativeEvent
          console.log('UUUUUUUUUUUUUUUUUUUUUUUuu', event.nativeEvent)
        }}
        onMapReady={event => {
          console.log('UUUUUUUUUUUUUUUUUUUUUUUuu', event.nativeEvent)
        }}
        onRouteProgressChange={event => {
          const {
            distanceTraveled,
            durationRemaining,
            fractionTraveled,
            distanceRemaining
          } = event.nativeEvent
          console.log('LLLLLLLLLLLLLLLLLLLLLLLL', event.nativeEvent)
        }}
        onError={event => {
          const { message } = event.nativeEvent
          console.error(message)
        }}
        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>
  )

setup:

android/buid.gradle

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()

        maven { url 'https://maven.google.com' }

        maven { url 'https://www.jitpack.io' }

        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = "mapbox"
                // Use the secret token you stored in gradle.properties as the password
                password = "hardcoded_secret_token" ?: ""
            }
        }
    }
}

main/AndroidManifest.xml

        <!-- This should be a child of the application tag -->
        <meta-data android:name="MAPBOX_ACCESS_TOKEN"
            android:value="hardcoded_public_token" />
ImranFromPoppins commented 3 years ago

Solved by setting specific width & height