RN 0.61.4 crash - No such method putMap

[cristianoccazinsp]

• Review the documentation: https://docs.viromedia.com/
• Search for existing issues: https://github.com/viromedia/viro
• Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version: Android - any version
3. Version: ViroReact version and React Native version: RN 0.61.4, react-viro 2.17.0
4. Device(s): Any android device

Description

This looks like a bug related to an internal change with maps from RN and also related to #756

Viro just fails to open under RN 0.61.4, but works fine on 0.60

Crash logs:

java.lang.NoSuchMethodError No interface method putMap(Ljava/lang/String;Lcom/facebook/react/bridge/WritableMap;)V in class Lcom/facebook/react/bridge/WritableMap; or its super classes (declaration of 'com.facebook.react.bridge.WritableMap' appears in base.apk) 
    VRTScene.java:229 com.viromedia.bridge.component.node.VRTScene.notifyPlatformInformation
    VRTScene.java:219 com.viromedia.bridge.component.node.VRTScene.setPlatformInformation
    VRT3DSceneNavigator.java:235 com.viromedia.bridge.component.VRT3DSceneNavigator.addView
    ViewGroupManager.java:35 com.facebook.react.uimanager.ViewGroupManager.addView
    NativeViewHierarchyManager.java:512 com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren
    UIViewOperationQueue.java:205 com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute
    UIViewOperationQueue.java:779 com.facebook.react.uimanager.UIViewOperationQueue$1.run
    UIViewOperationQueue.java:888 com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches
    UIViewOperationQueue.java:42 com.facebook.react.uimanager.UIViewOperationQueue.access$2200
    UIViewOperationQueue.java:948 com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded
    GuardedFrameCallback.java:28 com.facebook.react.uimanager.GuardedFrameCallback.doFrame
    ReactChoreographer.java:174 com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame
    ChoreographerCompat.java:84 com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame
    Choreographer.java:984 android.view.Choreographer$CallbackRecord.run
    Choreographer.java:764 android.view.Choreographer.doCallbacks
    Choreographer.java:696 android.view.Choreographer.doFrame
    Choreographer.java:965 android.view.Choreographer$FrameDisplayEventReceiver.run
    Handler.java:873 android.os.Handler.handleCallback
    Handler.java:99 android.os.Handler.dispatchMessage
    Looper.java:214 android.os.Looper.loop
    ActivityThread.java:7073 android.app.ActivityThread.main
    Method.java:-2 java.lang.reflect.Method.invoke
    RuntimeInit.java:493 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run
    ZygoteInit.java:965 com.android.internal.os.ZygoteInit.main

Reproducible Demo

Something similar to this

const Viewer360 = (props) => 
(
  <ViroScene>
    <ViroNode>
      <Viro360Image
        source={{uri: this.props.uri}}
        ref={(c => this._component = c)}
      />
    </ViroNode>

  </ViroScene>
)



<ViroVRSceneNavigator
  vrModeEnabled={false}
  initialScene={{
    scene: Viewer360,
    passProps: {uri: someUri}
  }}
/>

[cristianoccazinsp]

I'm still not sure why viro decided to have a hard-linked react-viro aar file, but I ended up rebuilding it from source (from 2.17 tag) and compiled it against RN 0.61.4.

Seems to be working fine. However, this should really not be needed... react_viro is small and an aar shouldn't be needed, just include the source and let it compile!

Please, update your code so RN is not hard linked like this, this can break very, very easily, and will always blow up at runtime instead of compile time.

[wilgnerpm]

I have the same problem, I do not know how to solve.

[rodri0315]

If I am not mistaken, ViroReact does not support RN >.59.9. Might render just fine but most functionality will not. They have this information on the release docs.

While older or newer versions of react-native may work with Viro, there may be issues or differences that cause ViroReact to not work properly with older or newer versions of react-native.

[egeniegithub]

I am planning to use this for our AR project.
I have two choices either go for UNITY or this.

[thiagoloop4]

Does any one know if they're working on a newer version that supports RN 0.6x.x ? And if so, is there a estimated release date?

[Hless]

The fix to support RN 0.6x.x is actually rather easy, and my team also needed to run on 0.6x.x. So we have deployed a npm package that supports this version. You can use this in the meantime until we get around to push this fix upstream when we find the time. You still have to manually link pods/android project as you are used to with the official version.

https://www.npmjs.com/package/@citychallenge/react-viro

[mstrokin]

@Hless Thanks a lot!

Quick question - Have you done anything about the GVRSDK/UIWebView issue in that repo?

[Hless]

Not yet, but it appears we are able to submit our app without fixing that problem. We will have to take a look at some point. I'm unsure when Apple will actually start rejecting apps using UIWebView...

Edit:
There actually is something we changed about GVRSDK, but that's a different problem where GVR View did not respect the preferred orientation of the Android Activity that encapsulated it. That is the only other change we made to that package.

[mstrokin]

@Hless So you didn't even receive the warning about using deprecated UIWebView? How long ago did you submit the app to the store?

Sorry for hijacking the thread, FYI: https://developer.apple.com/news/?id=12232019ba

[Hless]

We did receive the warning, but we submitted our app anyway last Saturday. It did get rejected because of something entirely unrelated. We are resubmitting after Christmas. Will report back when it's out of review. Edit: Didn't see your edit. Those of us that already released an app should be good for at least a year then, if you submit your app before April. I think the absolute deadline for removing GVRSDK from ViroCore should be start of March... Issue is getting tracked seperately in the ViroCore repo for those willing to participate: viromedia/virocore#320

[ktemby]

Thanks so much for posting the repo @Hless ! With your version, I'm happily running my app in react-native: 0.61.5 on android.

[TrejoCode]

The fix to support RN 0.6x.x is actually rather easy, and my team also needed to run on 0.6x.x. So we have deployed a npm package that supports this version. You can use this in the meantime until we get around to push this fix upstream when we find the time. You still have to manually link pods/android project as you are used to with the official version.

https://www.npmjs.com/package/@citychallenge/react-viro

Hi @Hless How do I implement your version? Is it similar to copy "node_modules\react-viro\bin\files\javascript*" ?

[TrejoCode]

I'm still not sure why viro decided to have a hard-linked react-viro aar file, but I ended up rebuilding it from source (from 2.17 tag) and compiled it against RN 0.61.4.

Seems to be working fine. However, this should really not be needed... react_viro is small and an aar shouldn't be needed, just include the source and let it compile!

Please, update your code so RN is not hard linked like this, this can break very, very easily, and will always blow up at runtime instead of compile time.

Did you manage to run Viro with updated React?
I could not get it
@cristianoccazinsp

[Hless]

@TrejoCode Exactly the same as you would with the official repo, except that you would use the @citychallenge/react-viro package instead of the react-viro package everwhere you use viro in your code or in the iOS pods/Android deps. (Ctrl+F should get you a long way in existing codebases).

I know it's not ideal, but this was purely meant as a quick in-between solution for our app, as we needed to move forward with our app, it would be wise to keep following this thread for when rn 61.x support lands in the official viro repo.

[cristianoccazinsp]

@TrejoCode like I said above, I just re-built the react-viro aar file from source but against RN 0.61.x and then copied that new aar file into my viro's npm folder. Ugly fix, I know, but it worked for my very basic use case.

[Hless]

@cristianoccazinsp Keep in mind that if you only copy the Android aar file, it would not work on iOS

[cristianoccazinsp]

Interesting... I don't know how, but it is working for iOS just fine, but then again, I'm only using a few basic features and not the whole AR stuff.

[matthewgertner]

Hey @Hless, I'm looking at https://github.com/citychallenge/viro (thanks again for this). Shouldn't you also replace the React.xcodeproject files with the ones from the newer RN version (i.e. node_modules/react-native/React, or am I missing something?

[matthewgertner]

Never mind... I see they are built straight from the directory in node_modules.

[AndreaGiulianini]

@cristianoccazinsp sorry but, what do you mean with re-build react-viro aar file from source, i have installed @Hless fork, now i have error with putMap,
what steps are to be done to make everything work on react 0.61.3? Thanks and sorry for the trivial question.

[cristianoccazinsp]

This is what I did, but as said above, this only fixes it for Android, and not for iOS (although I haven't had issues with iOS yet), so use it carefully.

• Download the repo from https://github.com/viromedia/viro
• Edit the packages.json under the folder /test with the right RN version you need
• Edit build.gradle to use the right com.facebook.react:react-native version ( I think this is not needed)
• run ./prepare_release.sh and copy the output from android/react-viro to somewhere in your own project
• Lastly, copy react_viro-release.aar (the one you just built) into node_modules/react-viro/android/react-viro. You will need to do this every time your node module's folder overwrites react-viro

Again, I have no idea why would the viro team include the aar file like that in the npm package instead of just providing the source code and letting it build with RN like above. A simple change to do that would save us from this this headache each time RN is updated.

[creimers]

@Hless (or @ anybody really...)

If you find the time and the patience, could you sketch real quick how to add @citychallenge/react-viro to an existing RN 61.x project?

I'm struggling with the ./setup-ide.sh --ios step (assuming that it is needed). It seems to be messing up the Pods.

Much obliged!

[Hless]

Well, there is not much to sketch. It's just very much the same installation steps as the regular react-viro npm package. Except that you would simply use @citychallenge/react-viro instead of the regular one everywhere it is referenced:
https://docs.viromedia.com/docs/integrating-with-react-native-projects

Edit:
Just fyi, we are talking about a npm package here, you don't have to clone anything. Just npm install --save @citychallenge/react-viro (https://www.npmjs.com/package/@citychallenge/react-viro)

[HedwigAR]

I wanted to also be able to upgrade the react-native version. This is what I had to do:
in viro/package.json change dependencies to

"react": "16.9.0",
"react-native": "0.61.2",

in viro/test/package.json change dependencies to

"react": "16.9.0",
"react-native": "0.61.2",

Then run
viro/prepare_release.sh

After this copy over the packages in viro/android/react_viro to your own project

Follow https://react-native-community.github.io/upgrade-helper/?from=0.59.9&to=0.61.2 to upgrade rest of project.

[cristianoccazinsp]

RN 0.62 is coming soon... Will most likely need to repeat the above with this new version. How hard would it be to remove the aar file dependency and build from source instead?

[Jackyaung]

@Hless Hi Hless, is this package of @citychallenge/react-viro solved the problem about UIWebView ? Until this April, apple will stop accepting the App with using UIWebView. Right now I am facing this problem:(

[cristianoccazinsp]

I've been trying to upgrade react's version to 0.61.5 in this branch (https://github.com/cristianoccazinsp/viro/tree/rn-upgrade-attempt) alongside updating google SDKs for iOS to remove some deprecation warnings. Compilation of the new android aar file seems fine, but the iOS migration step is harder than I thought and I can't seem to make it compile with the new podspec file. If someone is interested in taking it from there... I'm most likely not putting more effort into this and will be searching for another 360 viewer shortly.

[hokaiyipFS]

@rgouzal
sorry I meant android/app/build.gradle

[rgouzal]

@hokaiyipFS

android/app/build.gradle:

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation. If none specified and
 *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
 *   // default. Can be overridden with ENTRY_FILE environment variable.
 *   entryFile: "index.android.js",
 *
 *   // https://reactnative.dev/docs/performance#enable-the-ram-format
 *   bundleCommand: "ram-bundle",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore.
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US.  Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Whether to enable the Hermes VM.
 *
 * This should be set on project.ext.react and mirrored here.  If it is not set
 * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
 * and the benefits of using Hermes will therefore be sharply reduced.
 */
def enableHermes = project.ext.react.get("enableHermes", false);

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.mapnav"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }

    // Viro React needed dependencies ...
    implementation 'com.android.support:appcompat-v7:25.0.0'
    implementation project(':gvr_common')
    implementation project(path: ':react_viro')
    implementation project(path: ':viro_renderer')
    implementation 'com.google.android.exoplayer:exoplayer:r2.2.0'
    implementation 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'
    implementation 'com.amazonaws:aws-android-sdk-core:2.2.+'
    implementation 'com.amazonaws:aws-android-sdk-ddb:2.2.+'
    implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.2.+'
    implementation 'com.amazonaws:aws-android-sdk-cognito:2.2.+'
    implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.2.+'

}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

App's android/build.gradle:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 23
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

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://www.jitpack.io' }
    }
}

[hokaiyipFS]

can you try
minSdkVersion = 26

[Hless]

Still getting notifications from this thread, so to quickly help you out, setting the minSdkVersion is not going to solve it.

To be precise, pretty sure you did not correctly build and/or copy an .aar file that was linked against RN 0.61.x+. I suppose you didn't follow all steps carefully.

[Hless]

Furthermore, if you want an easy fix and still want to use Viro you could use my fork (@citychallenge) or the one in this thread:
#756

I would advise to think twice though, we switched to a different solution. Currently there are just too many problems that need too much effort to fix: UIWebView deprecation being one, and we found out some stuff simply isn't working on iOS14.

[hokaiyipFS]

I second @Hless. I have also switched to @citychallenge

here is my settings.gradle

...
include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'
project(':arcore_client').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/arcore_client')
project(':gvr_common').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/gvr_common')
project(':viro_renderer').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/viro_renderer')
project(':react_viro').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/react_viro')
...

[rgouzal]

can you try
minSdkVersion = 26

@hokaiyipFS I did tried. But no luck.

[hokaiyipFS]

@rgouzal forgot to mention that I have switched to

react-viro/@citychallenge

[rgouzal]

@hokaiyipFS I did used that, but it was crashing throwing the following exception:

10-04 23:15:04.594 20863 20911 E AndroidRuntime: FATAL EXCEPTION: create_react_context
10-04 23:15:04.594 20863 20911 E AndroidRuntime: Process: com.mapnav, PID: 20863
10-04 23:15:04.594 20863 20911 E AndroidRuntime: java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.mapnav-dtEXw_9W0yDS3Ckp1RPt5Q==/base.apk"],nativeLibraryDirectories=[/data/app/com.mapnav-dtEXw_9W0yDS3Ckp1RPt5Q==/lib/arm64, /data/app/com.mapnav-dtEXw_9W0yDS3Ckp1RPt5Q==/base.apk!/lib/arm64-v8a, /system/lib64, /product/lib64]]] couldn't find "libviro_renderer.so"
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at java.lang.Runtime.loadLibrary0(Runtime.java:1067)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at java.lang.Runtime.loadLibrary0(Runtime.java:1007)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at java.lang.System.loadLibrary(System.java:1667)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.viromedia.bridge.module.MaterialManager.<clinit>(MaterialManager.java:37)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.viromedia.bridge.ReactViroPackage.createNativeModules(ReactViroPackage.java:87)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.ReactPackageHelper.getNativeModuleIterator(ReactPackageHelper.java:42)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:42)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1347)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1318)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1225)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.ReactInstanceManager.access$1100(ReactInstanceManager.java:131)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:1016)
10-04 23:15:04.594 20863 20911 E AndroidRuntime: 	at java.lang.Thread.run(Thread.java:919)

and the following exception:

10-05 16:08:42.257 23547 23547 E AndroidRuntime: java.lang.NoSuchMethodError: No interface method putMap(Ljava/lang/String;Lcom/facebook/react/bridge/WritableMap;)V in class Lcom/facebook/react/bridge/WritableMap; or its super classes (declaration of 'com.facebook.react.bridge.WritableMap' appears in /data/app/com.mapnav-5kv_9I9PMO5LRE1zSKUpMw==/base.apk)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.viromedia.bridge.component.node.VRTScene.notifyPlatformInformation(VRTScene.java:229)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.viromedia.bridge.component.node.VRTScene.setPlatformInformation(VRTScene.java:219)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.viromedia.bridge.component.VRT3DSceneNavigator.addView(VRT3DSceneNavigator.java:235)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.viromedia.bridge.component.VRTARSceneNavigator.addView(VRTARSceneNavigator.java:124)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.facebook.react.uimanager.ViewGroupManager.addView(ViewGroupManager.java:37)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:507)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:209)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:917)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1028)
10-05 16:08:42.257 23547 23547 E AndroidRuntime: 	at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:48)

[rgouzal]

@hokaiyipFS I am planing to use react-native mapbox AR navigation which requires viro.

[hokaiyipFS]

@rgouzal.

With some tweak it will work, make sure you have the following, and rebuild your android app.

package.json

...
"@citychallenge/react-viro": "^2.17.4",
...

settings.gradle

include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'
project(':arcore_client').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/arcore_client')
project(':gvr_common').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/gvr_common')
project(':viro_renderer').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/viro_renderer')
project(':react_viro').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/react_viro')

app/build.gradle

...
    implementation project(':arcore_client')
    implementation project(':gvr_common')
    implementation project(path: ':viro_renderer')
    implementation project(path: ':react_viro')
...

[rgouzal]

@hokaiyipFS ok it is not crashing now thank you sir for your help, but I see a black screen and I don't see a camera view with "Hello World" what could be that I am doing wrong here?

[hokaiyipFS]

emulator or real device?

[rgouzal]

@hokaiyipFS real device Samsung M31

[rgouzal]

@rgouzal oh I think I noticed there is an exception thrown:

BTW my project is initialized by react-native and not expo.

10-06 16:50:14.415 20203 20203 E AndroidRuntime: FATAL EXCEPTION: main
10-06 16:50:14.415 20203 20203 E AndroidRuntime: Process: host.exp.exponent, PID: 20203
10-06 16:50:14.415 20203 20203 E AndroidRuntime: java.lang.RuntimeException: Unable to instantiate receiver abi39_0_0.expo.modules.notifications.notifications.service.ScheduledAlarmReceiver: java.lang.ClassNotFoundException: Didn't find class "abi39_0_0.expo.modules.notifications.notifications.service.ScheduledAlarmReceiver" on path: DexPathList[[zip file "/data/app/host.exp.exponent-b5ExvBlnSSVJu7IUBU-Xpw==/base.apk"],nativeLibraryDirectories=[/data/app/host.exp.exponent-b5ExvBlnSSVJu7IUBU-Xpw==/lib/arm64, /data/app/host.exp.exponent-b5ExvBlnSSVJu7IUBU-Xpw==/base.apk!/lib/arm64-v8a, /system/lib64, /product/lib64]]
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at android.app.ActivityThread.handleReceiver(ActivityThread.java:3960)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at android.app.ActivityThread.access$1400(ActivityThread.java:268)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1993)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:107)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:237)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:7814)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1068)
10-06 16:50:14.415 20203 20203 E AndroidRuntime: Caused by: java.lang.ClassNotFoundException: Didn't find class "abi39_0_0.expo.modules.notifications.notifications.service.ScheduledAlarmReceiver" on path: DexPathList[[zip file "/data/app/host.exp.exponent-b5ExvBlnSSVJu7IUBU-Xpw==/base.apk"],nativeLibraryDirectories=[/data/app/host.exp.exponent-b5ExvBlnSSVJu7IUBU-Xpw==/lib/arm64, /data/app/host.exp.exponent-b5ExvBlnSSVJu7IUBU-Xpw==/base.apk!/lib/arm64-v8a, /system/lib64, /product/lib64]]

[rgouzal]

@hokaiyipFS never mind about that exception I think that's older by 2 hours for another app. But I still see black screen.

[hokaiyipFS]

@rgouzal camera permission?

[rgouzal]

@hokaiyipFS exists on manifest and allowed.

[rgouzal]

@hokaiyipFS Reading here #115, I find that the issue of the black screen could be because of no API key intialized, but I think viro does not require API key anymore. So whats the solution for this?

[rgouzal]

@hokaiyipFS

Could it be something I am missing in my code?

App render function:

const App: () => React$Node = () => {
  return (
    <View style={{ width: "100%", height: "100%" }}>
      <ViroARSceneNavigator initialScene={{scene: ViroAR}}>

      </ViroARSceneNavigator>
      <View style={{ justifyContent: "center", alignItems: "center", position: "absolute", bottom: -20, width: "100%", height: "30%", backgroundColor: "red", borderRadius: 20 }}>
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 34 }}>Test</Text>
      </View>
    </View>
      
  );
};

ViroAR scene component:

render() {
   return (
     <ViroARScene onTrackingUpdated={()=>{this.setState({text : "Hello World!"})}}>
       <ViroText text={this.state.text} scale={[.5, .5, .5]} position={[0, 0, -1]} style={styles.helloWorldTextStyle}/>
     </ViroARScene>
   );
 }

[hokaiyipFS]

hm.. it looks fine to me.

can you see test in the view ?

try setting the outer most view like

        style={{flex: 1, position: "absolute", left: 0, right: 0, top: 0, bottom: 0, width: "100%", height: "100%"}}>```

[rgouzal]

@hokaiyipFS Still shows black screen, I actually at first tried returning directly instead of the above:

      <ViroARSceneNavigator initialScene={{scene: ViroAR}}>

      </ViroARSceneNavigator>

So I said to my self maybe I need to wrap it inside View component but no luck.

[hokaiyipFS]

@rgouzal
hm. i am running out of ideas.
maybe try

1. react native camera to see if your app can invoke the camera view 1st?
2. https://github.com/viromedia/viro/tree/master/code-samples <-- try to use exactly the same code?
3. find anything useful from logcat?

I have used viro-react for more than 1 year. initially with react native 0.59.9, now upgrade to 0.63.2
it just takes a bit of debugging and eventually it will work.

[rgouzal]

@hokaiyipFS Just tried to install react-native-camera but still same problem, if camera view is not invoked it should at least show the Hello World text scene. It's not showing that scene at all.
The code examples project worked. So what could be the problem?

I am trying to integrate react-viro which required by react-native-mapbox-ar to my project for AR navigation.

[rgouzal]

@hokaiyipFS I tried adb logcat nothing interesting.

[rgouzal]

@hokaiyipFS Also is this compatible with react-navigation? I mean the ViroSceneARNavigator is it compatible with react-navigation should react-navigation wrap ViroSceneARNavigator or ViroSceneARNavigator should wrap react-navigation navigator?

[rgouzal]

@hokaiyipFS Never mind I found the problem, for anyone that could have it in future I was missing the line in application node in AndroidManifest.xml:

<meta-data android:name="com.google.ar.core" android:value="optional" />

This was mentioned below page, but I could not see line that should be added I had to insepect element on the documentation page to see the line it was hidden:

https://docs.viromedia.com/docs/integrating-existing-projects-android#for-ar

[hokaiyipFS]

@hokaiyipFS Also is this compatible with react-navigation? I mean the ViroSceneARNavigator is it compatible with react-navigation should react-navigation wrap ViroSceneARNavigator or ViroSceneARNavigator should wrap react-navigation navigator?

I think you need to use both, as I am also using both.
in normal navigation, you can use your navigation, however, with AR, you will need to use ViroSceneARNavigator to perform navigation

[rgouzal]

@hokaiyipFS yes but I meant which navigation should be root or top parent navigation react-navigation?

[raouiaMobileDev]

@Hless I tried to use "@citychallenge/react-viro": "^2.17.4", for eather react native 0.61.5 and react native 0.62.2.
and I updated
settings.gradle

include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'
project(':arcore_client').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/arcore_client')
project(':gvr_common').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/gvr_common')
project(':viro_renderer').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/viro_renderer')
project(':react_viro').projectDir = new File(rootProject.projectDir,'../node_modules/@citychallenge/react-viro/android/react_viro')

app/build.gradle

 implementation project(':arcore_client')
    implementation project(':gvr_common')
    implementation project(path: ':viro_renderer')
    implementation project(path: ':react_viro')

App.js

import {
  ViroVRSceneNavigator,
  ViroARSceneNavigator
} 
from '@citychallenge/react-viro';

the app build successful , but when I opened it , it crashed ;(

Could you help me please to resolve this issue