running react-native in android emulator

Question

I'm trying to run the init react-native project, and for some reason I get a 500 error.

here is the console log

Danny@DESKTOP-GIRS9GM /cygdrive/c/Users/Danny/Desktop/TestProject
$ react-native run-android
Scanning 557 folders for symlinks in C:\Users\Danny\Desktop\TestProject\node_modules (29ms)
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Incremental java compilation is an incubating feature.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee101Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore101Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco101Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline101Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase101Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp3101Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0471Library UP-TO-DATE
:app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:incrementalDebugJavaCompilationSafeguard UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:transformClassesWithDexForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Nexus_5X_API_26(AVD) - 8.0.0' for app:debug
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 15.967 secs
Running C:\Users\Danny\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Starting the app on emulator-5554 (C:\Users\Danny\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 shell am start -n com.testproject/com.testproject.MainActivity)...

but on the device I'm getting this error(on a red screen),

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Body:
{"message":"TransformError: C:\\Users\\Danny\\Desktop\\TestProject\\index.android.js: Unexpected token ) (While processing preset: \"C:\\\\Users\\\\Danny\\\\Desktop\\\\TestProject\\\\node_modules\\\\babel-preset-react-native\\\\index.js\")","type":"TransformError","lineNumber":0,"description":"","errors":[{"description":"","lineNumber":0}]}
processBundleResult
    BundleDownloader.java:170
access$100
    BundleDownloader.java:39
onResponse
    BundleDownloader.java:139
execute
    RealCall.java:135
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1162
run
    ThreadPoolExecutor.java:636
run
    Thread.java:764

and this is the message from the window that gets open (when i run react-native run-android)

error: bundling failed: "TransformError: C:\\Users\\Danny\\Desktop\\TestProject\\index.android.js: Unexpected token ) (While processing preset: \"C:\\\\Users\\\\Danny\\\\Desktop\\\\TestProject\\\\node_modules\\\\babel-preset-react-native\\\\index.js\")"

I dont get it, how come the init project of react-native comes with errors ? or I'm doing something wrong ? im not sure anymore, thanks!

Answer 1

I think you are using a new version of babel-preset-react-native library and there is an unsupported trailing commas on that new version.

You can install the previous version of the library:

npm uninstall babel-preset-react-native
npm install babel-preset-react-native@2.1.0

Edit - you can see the problem on playframework repository: issue#15513