React-native-mapbox-gl: Error trying to run sample

[ghost]

after installing dependencies with "npm i" and i do a "npm start i get the following errors?

[email protected] start /home/xxxx/code/mapbox/react-native-mapbox-gl/example

node node_modules/react-native/local-cli/cli.js start

Scanning folders for symlinks in /home/xxxx/code/mapbox/react-native-mapbox-gl/example/node_modules (4ms)
Loading dependency graph...npm ERR! code ELIFECYCLE
npm ERR! errno 11
npm ERR! [email protected] start: node node_modules/react-native/local-cli/cli.js start
npm ERR! Exit status 11
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[nitaliano]

@kdupreez did you create your accesstoken file? and is there any more info than this? it just appears to be failing in the react native cli

[kooscode]

Ok, I so I reverted to installing everything on my Mac and got to a point where looks like everything runs and i can get the app on the simulator.. but now I think I am missing the Android specific setup bits from here: https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md

How do I do this, should I create a blank android app project and add these options or something?

I am kind of lost on how to get this running on android and what I need to to in order to get the packages registered etc.?

I may be missing the point of using React Native to build cross platform mobile apps if I still have to create build and deploy a normal android studio native Java app to get the packages registered or something?

Any step by step help to get the sample mapbox react-native app deployed to Android would be super appreciated..

Emulator Screenshot:

undefined is not an object (evaluating 'MapboxGL.UserTrackingModes')
<unknown>
    MapView.js:246:31
loadModuleImplementation
    require.js:212:12
guardedLoadModule
    require.js:146:36
_require
    require.js:130:20
<unknown>
    index.js:6
loadModuleImplementation
    require.js:212:12
guardedLoadModule
    require.js:146:36
_require
    require.js:130:20
<unknown>
    App.js:3
loadModuleImplementation
    require.js:212:12
guardedLoadModule
    require.js:146:36
_require
    require.js:130:20
<unknown>
    index.js:2
loadModuleImplementation
    require.js:212:12
guardedLoadModule
    require.js:139:45
_require
    require.js:130:20
global code

[nitaliano]

Try these steps for creating a blank project.

Create Project

• react-native init ExampleProject
• cd ExampleProject

Link Project
Now follow these steps https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md

there are only three files you need to update

• android/build.gradle https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md#projectbuildgradle
• android/app/build.gradle https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md#appbuildgradle
• MainApplication.java https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md#mainapplicationjava

Add Javascript

• In your App.js import MapboxGL from '@mapbox/react-native-mapbox-gl
• MapboxGL.setAccessToken('<your access token>')
• Add the mapview with whatever props

Run Project

• Connect Android device to laptop, make sure developer mode is enabled and accept the prompt that appears on the device
• run adb reverse tcp:8081 tcp:8081 (make sure your emulator is closed)
• run react-native run-android

[nitaliano]

Going to close this out if you're still having issues post back here or join our developer group https://gitter.im/react-native-mapbox-gl/Lobby for help

[kooscode]

I'm pretty sure I followed all the steps, but still no-go..

`Scanning folders for symlinks in /Users/xxxx/Projects/react-native/mapbox/node_modules (10ms)
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

• Where:
  Build file '/Users/xxxx/Projects/react-native/mapbox/android/build.gradle' line: 16

• What went wrong:
  A problem occurred evaluating root project 'mapbox'.

  Could not find method compile() for arguments [project ':mapbox-react-native-mapbox-gl'] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 1.802 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html`

[kooscode]

not sure if its related, but when i tried to install the node package, i got these warnings:

`
[email protected] /Users/xxxx/Projects/react-native/mapbox
└── @mapbox/[email protected]

npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none was installed.
npm WARN @mapbox/[email protected] requires a peer of react@^16.0.0-alpha || ^16.0.0-beta || ^16.0.0 but none was installed.
`

[nitaliano]

You also need to add this to your settings.gradle https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md#settingsgradle, if you're having problems after that post your project on github so I can look at it

[kooscode]

I did.. I pretty much followed all the instructions..

[kooscode]

The "example" provided is missing the dependency in the build.gradle file?? is that intentional ?

https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/android/build.gradle

Missing this: compile project(':mapbox-react-native-mapbox-gl')

[nitaliano]

you're looking at the wrong gradle file, that's the project level one, you need to look at the one in the app directory https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/android/app/build.gradle

[kooscode]

yaaay! that was it.. it compiles and runs, but the map is blank...

i copy and pasted the sample from https://www.mapbox.com/help/first-steps-react-native-sdk and of course using my token.

[nitaliano]

You might be running into this https://github.com/mapbox/react-native-mapbox-gl/issues/1041#issuecomment-375381751

[kooscode]

yeah, i was getting similar errors in studio - Let me try the advanced gfx settings..

2:40 PM Emulator: android/android-emugl/host/libs/Translator/GLES_V2/GLESv2Imp.cpp:glUniform1f:3268 error 0x502
2:40 PM Emulator: android/android-emugl/host/libs/Translator/GLES_V2/GLESv2Imp.cpp:glUniform1i:3282 error 0x502
2:40 PM Emulator: android/android-emugl/host/libs/Translator/GLES_V2/GLESv2Imp.cpp:glUniform1i:3282 error 0x502
2:40 PM Emulator: android/android-emugl/host/libs/Translator/GLES_V2/GLESv2Imp.cpp:glUniform1f:3268 error 0x502
2:40 PM Emulator: android/android-emugl/host/libs/Translator/GLES_V2/GLESv2Imp.cpp:glUniform4fv:3359 error 0x502
2:40 PM Emulator: android/android-emugl/host/libs/Translator/GLES_V2/GLESv2Imp.cpp:glUniform1i:3282 error 0x502
2:42 PM Emulator: Process finished with exit code 0

[kooscode]

WOOHOO!! Thank you SOOO much!..