Is AndroidX migration complete?

[kevinsperrine]

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

Environment

Please provide the following information about your environment:

1. Development OS: Mac, Windows, Linux

Mac

2. Device OS & Version: What Android OS version (7.0, 8.0, etc.) or iOS version (11.0, 11.2) is your device running on?

Android 9.0

3. Version: ViroReact version and React Native version

viro: 2.16.0 RN: 0.61.2

4. Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc)

Samsung Galaxy S8

Description

When attempting to open the AR screen after upgrading to RN61 the app crashes with this stacktrace:

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.kevinsperrine.test-wHwYG_KoIYqSEUFCslF2Dw==/base.apk!classes217.dex)	
	at com.viromedia.bridge.component.node.VRTScene.notifyPlatformInformation(VRTScene.java:211)	
	at com.viromedia.bridge.component.node.VRTScene.setPlatformInformation(VRTScene.java:201)	
	at com.viromedia.bridge.component.VRT3DSceneNavigator.addView(VRT3DSceneNavigator.java:217)	
	at com.viromedia.bridge.component.VRTARSceneNavigator.addView(VRTARSceneNavigator.java:106)	
	at com.facebook.react.uimanager.ViewGroupManager.addView(ViewGroupManager.java:35)	
	at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:512)	
	at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:205)	
	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:779)	
	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:888)	
	at com.facebook.react.uimanager.UIViewOperationQueue.access$2200(UIViewOperationQueue.java:42)	
	at com.facebook.react.uimanager.UIViewOperationQueue$2.runGuarded(UIViewOperationQueue.java:846)	
	at com.facebook.react.bridge.GuardedRunnable.run(GuardedRunnable.java:29)	
	at android.os.Handler.handleCallback(Handler.java:873)	
	at android.os.Handler.dispatchMessage(Handler.java:99)	
	at android.os.Looper.loop(Looper.java:214)	
	at android.app.ActivityThread.main(ActivityThread.java:7050)	
	at java.lang.reflect.Method.invoke(Native Method)	
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)	
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:964)	

On a hunch, I disabled jetifier for react-viro thinking it might be causing a weird rewrite, but when attempting to open the AR screen now the app still crashes, but with a class not found exception for an old support library.

java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/content/ContextCompat;	
	at com.viro.core.internal.CameraPermissionHelper.hasCameraPermission(CameraPermissionHelper.java:26)	
	at com.viro.core.ViroViewARCore.onActivityResumed(ViroViewARCore.java:769)	
	at com.viromedia.bridge.component.VRT3DSceneNavigator.onHostResume(VRT3DSceneNavigator.java:340)	
	at com.viromedia.bridge.component.VRT3DSceneNavigator.access$000(VRT3DSceneNavigator.java:35)	
	at com.viromedia.bridge.component.VRT3DSceneNavigator$SceneNavigatorLifecycleListener.onHostResume(VRT3DSceneNavigator.java:90)	
	at com.facebook.react.bridge.ReactContext$1.run(ReactContext.java:174)	
	at android.os.Handler.handleCallback(Handler.java:873)	
	at android.os.Handler.dispatchMessage(Handler.java:99)	
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26)	
	at android.os.Looper.loop(Looper.java:214)	
	at android.app.ActivityThread.main(ActivityThread.java:7050)	
	at java.lang.reflect.Method.invoke(Native Method)	
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)	
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:964)	
Caused by: java.lang.ClassNotFoundException: Didn't find class "android.support.v4.content.ContextCompat" on path: DexPathList[[zip file "/system/framework/org.apache.http.legacy.boot.jar", zip file "/data/app/com.kevinsperrine.test-PMe5Uochk0YEG6HPkkGHcw==/base.apk"],nativeLibraryDirectories=[/data/app/com.kevinsperrine.test-PMe5Uochk0YEG6HPkkGHcw==/lib/arm64, /data/app/com.kevinsperrine.test-PMe5Uochk0YEG6HPkkGHcw==/base.apk!/lib/arm64-v8a, /system/lib64, /system/vendor/lib64]]	
	at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:134)	
	at java.lang.ClassLoader.loadClass(ClassLoader.java:379)	
	at java.lang.ClassLoader.loadClass(ClassLoader.java:312)	
	... 14 more

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.

[dmitryhruzin]

have the same error

[Cchumi]

Hi same error for me

[gaetandezeiraud]

Same error here. Any solution?

[gaetandezeiraud]

It seems to be version 61 of react native. Version 61 has different interface for WritableMap, which expects String,ReadableMap instead of String,WritableMap.

[kevinsperrine]

WritableMap extends Readable map, so, IIRC, that should still be fine. FWIW, that change happened in v0.61.0, so in theory it should work fine with v0.60.6; however, I haven't tested it yet as I abandoned the v0.60+ upgrade for a while longer until a couple of my dependencies catch up.

[Iskander508]

I can confirm that in my case on RN v0.60.5 it is still working, while on 0.61.1 and 0.61.2 I encounter the crash mentioned above (with putMap parameters mismatch, introduced with: https://github.com/facebook/react-native/commit/1a2937151b8d36e8741ef9d4fbe7d2ebf65cb775#diff-5c34d514dda20c19b42e599a840ba0a5 ).

I have tried to work a temporary workaround: created a fork from master, rebuilt it against react-native sources of v0.61.2, took viro_renderer aar from current official release (v2.17.0) and managed to get a working package. At least it seems to be working for my used feature subset.

Here's the package, if you want to use it as a temporary workaround before this issue gets fixed properly: yarn add react-viro@npm:@iskander508/[email protected] (edited - github lfs has a bandwidth limit)

[Hless]

@Iskander508 Did you also grab the latest iOS framework? Otherwise you'll still need an API key for iOS. I haven't tested it with your package, as I built my own 0.61.2 version in a private NPM repo as I needed to fix some other problems too. I did forget to include the iOS framework initially.

In case people want to use your workaround, that could be helpful for them.

[Iskander508]

@Iskander508 Did you also grab the latest iOS framework? Otherwise you'll still need an API key for iOS...

Yes, this package probably still needs an API key provided. I noticed that too.

[djpane]

@Iskander508 Did you manage to get Viro Media working on Android and RN0.60.5? We've updated our project some time ago to 0.60.5 and everything's working ok on iOS but Android is a pain in the a$$. Haven't had any luck in getting it working yet. If you have any advice how you actually did that would be awesome.

[Iskander508]

@Iskander508 Did you manage to get Viro Media working on Android and RN0.60.5... Notice: If using react-viro, you cannot run the app on an x86 device (usually android emulators)!

I'm running RN 0.61.2 now, but the integration is probably the same: You should follow steps described here: https://docs.viromedia.com/docs/integrating-existing-projects-android

As far as I can see here are my changes: android/settings.gradle:

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

android/build.gradle:

...
classpath('com.android.tools.build:gradle:3.5.0')

android/app/build.gradle:

android {
    defaultConfig {
        ...
        buildConfigField "String", 'VR_PLATFORM', '"GVR"'
    }
...
}
dependencies {
...
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation project(':arcore_client')
    implementation project(':gvr_common')
    implementation project(path: ':viro_renderer')
    implementation project(path: ':react_viro')
    implementation 'com.google.android.exoplayer:exoplayer:2.9.5'
    implementation 'com.google.protobuf.nano:protobuf-javanano:3.1.0'
    implementation 'com.amazonaws:aws-android-sdk-core:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-ddb:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-cognito:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.16.1'
...
}

android/app/src/main/AndroidManifest.xml:

    <uses-feature android:glEsVersion="0x00030000" android:required="false" tools:replace="required" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" tools:node="remove" />
    <uses-permission android:name="android.permission.NFC" tools:node="remove" />
    <uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" tools:replace="required" />
    <uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" tools:replace="required" /> 
    <uses-feature android:name="android.software.vr.mode" android:required="false" tools:replace="required" />
    <uses-feature android:name="android.hardware.vr.high_performance" android:required="false" tools:replace="required" />

android/app/src/main/java/.../MainApplication.java:

...
import com.viromedia.bridge.ReactViroPackage;
...
    @Override
    protected List<ReactPackage> getPackages() {
      final List<ReactPackage> packages = new PackageList(this).getPackages();
      ...
      packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.valueOf(BuildConfig.VR_PLATFORM)));
      return packages;
    }
...

android/app/proguard-rules.pro:

...
-dontobfuscate
-keep class com.viro.** { *; }

react-native.config.js:

module.exports = {
  dependencies: {
    ...
    'react-viro': {
      platforms: {
        ios: null,
        android: null,
      },
    },
  },
};

[djpane]

@Iskander508 Thanks for sharing your setup! I've been following the steps for integrating with existing projects and got myself in a situation where the app builds fine but when opening a ViroScene it gives me an error Invariant Violation: requireNativeComponent: "VRT360Image" was not found in the UIManager. so for some reason it doesn't properly link the native components with the android build I gues. I'll give this a try and update once I have tried the spells! There's probably plenty of other people that are hoping for a working solution for RN 0.60.+ 😄

[djpane]

It works! I made exactly the above stpes that @Iskander508 suggested and with a quick Viro360Image test it is working. Oh this is so cool! Been trying to get this working for some time now with RN 0.60.+

[cristianoccazinsp]

@Iskander508 this seems to still be crashing on RN 0.61, can you confirm?

[JuliaRakitina]

Same issue "react-native": "0.61.5",

[se09deluca]

@Iskander508 Did you manage to get Viro Media working on Android and RN0.60.5... Notice: If using react-viro, you cannot run the app on an x86 device (usually android emulators)!

I'm running RN 0.61.2 now, but the integration is probably the same: You should follow steps described here: https://docs.viromedia.com/docs/integrating-existing-projects-android

As far as I can see here are my changes: android/settings.gradle:

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

android/build.gradle:

...
classpath('com.android.tools.build:gradle:3.5.0')

android/app/build.gradle:

android {
    defaultConfig {
        ...
        buildConfigField "String", 'VR_PLATFORM', '"GVR"'
    }
...
}
dependencies {
...
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation project(':arcore_client')
    implementation project(':gvr_common')
    implementation project(path: ':viro_renderer')
    implementation project(path: ':react_viro')
    implementation 'com.google.android.exoplayer:exoplayer:2.9.5'
    implementation 'com.google.protobuf.nano:protobuf-javanano:3.1.0'
    implementation 'com.amazonaws:aws-android-sdk-core:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-ddb:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-cognito:2.16.1'
    implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.16.1'
...
}

android/app/src/main/AndroidManifest.xml:

    <uses-feature android:glEsVersion="0x00030000" android:required="false" tools:replace="required" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" tools:node="remove" />
    <uses-permission android:name="android.permission.NFC" tools:node="remove" />
    <uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" tools:replace="required" />
    <uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" tools:replace="required" /> 
    <uses-feature android:name="android.software.vr.mode" android:required="false" tools:replace="required" />
    <uses-feature android:name="android.hardware.vr.high_performance" android:required="false" tools:replace="required" />

android/app/src/main/java/.../MainApplication.java:

...
import com.viromedia.bridge.ReactViroPackage;
...
    @Override
    protected List<ReactPackage> getPackages() {
      final List<ReactPackage> packages = new PackageList(this).getPackages();
      ...
      packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.valueOf(BuildConfig.VR_PLATFORM)));
      return packages;
    }
...

android/app/proguard-rules.pro:

...
-dontobfuscate
-keep class com.viro.** { *; }

react-native.config.js:

module.exports = {
  dependencies: {
    ...
    'react-viro': {
      platforms: {
        ios: null,
        android: null,
      },
    },
  },
};

Hi @Iskander508 , in my case is working correctly in Android and RN 0.60.5. (if needed i'll try in 0.61.2 like you) I've some problem making it works in iOS for things related to use_framewords and double-conversion.. However, did you get it working also in iOS ?

[Iskander508]

Hi @Iskander508 , in my case is working correctly in Android and RN 0.60.5. (if needed i'll try in 0.61.2 like you) I've some problem making it works in iOS for things related to use_framewords and double-conversion.. However, did you get it working also in iOS ?

Yes, we got it working also on iOS. We followed these instructions. Our changes are: react-native.config.js:

module.exports = {
  dependencies: {
    ...
    'react-viro': {
      platforms: {
        ios: null,
        android: null,
      },
    },
  },
};

ios/podfile:

...
  pod 'ViroReact', path: '../node_modules/react-viro/ios/'
  pod 'ViroKit_static_lib', path: '../node_modules/react-viro/ios/dist/ViroRenderer/static_lib'

  use_native_modules!
end

[se09deluca]

@Iskander508 Thank you! 😄 I've missed that part of documentation!

[sankar9659]

react-viro@npm:@iskander508/[email protected]

will it work for react native latest version (0.63.3)

[rgouzal]

I tried it on latest react native version (0.63.3) its crashing and throwing an 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)

[Vednus]

It seems each time rn is upgraded, even if it's minor, you'll need to rebuild react-viro by running the ./prepareRelease.sh file listed in these directions https://github.com/viromedia/viro#building-android-viro-react . @rgouzal I got it working with 0.63.3 doing this.

[jahau]

It seems each time rn is upgraded, even if it's minor, you'll need to rebuild react-viro by running the ./prepareRelease.sh file listed in these directions https://github.com/viromedia/viro#building-android-viro-react . @rgouzal I got it working with 0.63.3 doing this.

Did you clone the project https://github.com/viromedia/viro.git and executed the ./prepareRelease.sh there (after updating the package.json with the corrent react-native versions) and replaced the resulting react_viro-release.aar under \node_modules\react-viro\android\react_viro in your work project?