RN 0.61.4 crash - No such method putMap

[cristianoccazinsp]

• [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
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 https://github.com/viromedia/viro/issues/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: https://github.com/viromedia/virocore/issues/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.

[ManigandanRaamanathan]

@TrejoCode can you please provide detailed setup for android and iOs integration in existing project? I'm facing some hard time in setting this up

[ktemby]

@Hless your citychallenge was super helpful! After doing a bit more scrappy hacking on Viro, I was able to get through the UIWebView issue in my RN 0.62.2 project last night (AR Only) - details here https://github.com/viromedia/viro/issues/852#issuecomment-641810778

[rgouzal]

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.

@cristianoccazinsp I tried your workaround but still no luck, what could be that I am doing wrong?

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