Configuring ViroReact latest version to RN 0.63

[VizzHub]

• [ ] 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: Windows
2. Device OS & Version: Android OS
3. Version: ViroReact version 2.17.0 and React Native version 0.63
4. Device(s): Samsung S10 plus

I have linked all the Libraries as mentioned in the Docs. These are the lines included in their respective files.

MainApplication.java file

import com.viromedia.bridge.ReactViroPackage; import com.facebook.react.shell.MainReactPackage;

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.AR));
      return packages;
  }

Build.gradle file

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")

}

}

allprojects { repositories { mavenLocal() maven { url("$rootDir/../node_modules/react-native/android") } maven { url("$rootDir/../node_modules/jsc-android/dist") }

    google()
    jcenter()
    maven { url 'https://www.jitpack.io' }
}

} ~

Settings.graddle file

rootProject.name = 'gallery_ar' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' 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')

app/Build.graddle

implementation project(':gvr_common') implementation project(':arcore_client') implementation project(path: ':react_viro') implementation project(path: ':viro_renderer') implementation 'com.google.android.exoplayer:exoplayer:2.7.1' implementation 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7' implementation 'com.amazonaws:aws-android-sdk-core:2.7.7' implementation 'com.amazonaws:aws-android-sdk-ddb:2.7.7' implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.7.7' implementation 'com.amazonaws:aws-android-sdk-cognito:2.7.7' implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.7.7' implementation 'com.android.support:appcompat-v7:28.0.0' implementation fileTree(dir: "libs", include: ["*.jar"])

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.gallery_ar">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:usesCleartextTraffic="true"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  <meta-data android:name="com.google.ar.core" android:value="required" />
</application>

Issues Facing When i run the app in my mobile it asks for "Choose your Experience" Once choosing AR it asks permission to access camera. After granting permission it shows the blank screen only. FYI: In initial scene i have rendered the HelloWorldSceneAR.

When i modified the HelloWorldSceneAR file to display only the ViroText, again i could see only the blank screen. Or sometimes App getting crashed.

And my minSdkVersion 23 targetSdkVersion 29

[doranteseduardo]

Okay, thanks. Now, the react-viro package is not compatible with RN 0.60+ as-is.

What you have to do is to build the react-viro package from source using the latest RN version and install it like usual. I made a fork (because I see no activity on this repo, unfortunately) and compiled it few days ago.

Do the following:

1. Uninstall your current react-viro package ( DO NOT UNLINK IT)
2. Run npm install --save @akadrimer/react-viro
3. In the settings.gradle, point the references to @akadrimer/react-viro instead of react-viro:

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

4. Remove the following implementations from app/build.gradle

   implementation 'com.amazonaws:aws-android-sdk-core:2.7.7'
   implementation 'com.amazonaws:aws-android-sdk-ddb:2.7.7'
   implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.7.7'
   implementation 'com.amazonaws:aws-android-sdk-cognito:2.7.7'
   implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.7.7'

Change all your imports in your JS code from react-viro to @akadrimer/react-viro e.g. import { ViroARSceneNavigator } from '@akadrimer/react-viro';

And that's all, now you can run your project and it should work.

[VizzHub]

Thanks, a lot @doranteseduardo now it's working fine.....

[yashukla47]

@doranteseduardo are you planning to maintain it. Any plans to update the ArCore and ArKit versions also?

[doranteseduardo]

@doranteseduardo are you planning to maintain it. Any plans to update the ArCore and ArKit versions also?

I've been giving a look at viro-core viro-react for a while, tried to contact the developers with no success.

I've been offering myself as maintainer but if no response is given, I'd work in a fork.

[geo-vi]

@doranteseduardo are you planning to maintain it. Any plans to update the ArCore and ArKit versions also?

I've been giving a look at viro-core viro-react for a while, tried to contact the developers with no success.

I've been offering myself as maintainer but if no response is given, I'd work in a fork.

Perhaps I could give you a hand in the process as well if you plan to actively maintain it

[adelarsq]

@doranteseduardo are you planning to maintain it. Any plans to update the ArCore and ArKit versions also?

I've been giving a look at viro-core viro-react for a while, tried to contact the developers with no success. I've been offering myself as maintainer but if no response is given, I'd work in a fork.

Perhaps I could give you a hand in the process as well if you plan to actively maintain it

I also can give a hand. What about to create another organization just for this?

[maxowy]

What about publishing the app to the AppStore? Does your fork use the UIWebView as the main repo do?

ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

[doranteseduardo]

What about publishing the app to the AppStore? Does your fork use the UIWebView as the main repo do?

ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

There are two solutions:

1. Remove the GVR feature (it uses UIWebView) - there is a branch with this approach.
2. Migrate GVR to WKWebView, I'd choose this solution if there is someone that would like to help testing.

[haider792]

@doranteseduardo when i try to use the WKWebView it gives this error. can you tell why it occurs. Symbol not found: _OBJCCLASS$_WKWebView

[adelarsq]

Migrate GVR to WKWebView, I'd choose this solution if there is someone that would like to help testing.

@doranteseduardo I can help on this.

@doranteseduardo when i try to use the WKWebView it gives this error. can you tell why it occurs. Symbol not found: _OBJCCLASS$_WKWebView

This occurs because the binary for WebKit.framework is not linked.

[haider792]

can you please do a favour and tell me how i can achieve that in steps. i tried to link it in the general tab and then Framework , Libraries and then selected the Webkit.Framework. but it didn't worked. how can we do that for the binaries specifically.

@doranteseduardo

[haider792]

[haider792]

but it isn't working. still. giving error

[haider792]

@doranteseduardo please let me know if anything else is needed to do. Or i am missing something.

[haider792]

[adelarsq]

@haider792 Did you manage to build with success?

[haider792]

@adelarsq yes. but he try to run on simulator or device it gives this error.

Symbol not found: OBJC_CLASS$_WKWebView

[adelarsq]

@haider792 Isn't why WebKit.framework is marked as Optional? Did you try to mark as Required?

[haider792]

yes i did. but its not working.

[doranteseduardo]

@haider792 continue this in another thread, one issue at a time.

[geo-vi]

What about publishing the app to the AppStore? Does your fork use the UIWebView as the main repo do? ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

There are two solutions:

1. Remove the GVR feature (it uses UIWebView) - there is a branch with this approach.
2. Migrate GVR to WKWebView, I'd choose this solution if there is someone that would like to help testing.

On the long run the best approach would be the 2nd proposed solution. I'm going to actively test it as well as I'm currently developing AR/VR apps and will also contribute where needed.

[adelarsq]

@CallMeHeisenberg I agree with be 2nd solution. I also can help to test.

We are developing with the latest React Native plus Fable (F# as alternative to JavaScript). I'd like to maintain this lib always updated with our ecosystem.

[haider792]

@CallMeHeisenberg I agree with be 2nd solution. I also can help to test.

We are developing with the latest React Native plus Fable (F# as alternative to JavaScript). I'd like to maintain this lib always updated with our ecosystem.

@adelarsq have you implemented the 2nd solution proposed by the @doranteseduardo . if so can you please share the structure of the project. it would be helpful i am working over it for almost week but no luck. if you can share so it would be helpful

[adelarsq]

@haider792 I still using the current version. I still didn't have time to migrate to the 2nd solution. On the next week I will start to work on that. How far did you go on that?

[haider792]

react-viro is not getting the WKWebView .

[doranteseduardo]

Guys, please, move this talk to another issue or bump an existing one.

Don't you mind if I create a Discord server for active members and development?

[adelarsq]

Don't you mind if I create a Discord server for active members and development?

I don't mind. This will help a lot.

[haider792]

@doranteseduardo yes sure

[VlaurentFr]

Okay, thanks. Now, the react-viro package is not compatible with RN 0.60+ as-is.

What you have to do is to build the react-viro package from source using the latest RN version and install it like usual. I made a fork (because I see no activity on this repo, unfortunately) and compiled it few days ago.

Do the following:

1. Uninstall your current react-viro package ( DO NOT UNLINK IT)
2. Run npm install --save @akadrimer/react-viro
3. In the settings.gradle, point the references to @akadrimer/react-viro instead of react-viro:

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

1. Remove the following implementations from app/build.gradle

implementation 'com.amazonaws:aws-android-sdk-core:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-ddb:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-cognito:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.7.7'

Change all your imports in your JS code from react-viro to @akadrimer/react-viro e.g. import { ViroARSceneNavigator } from '@akadrimer/react-viro';

And that's all, now you can run your project and it should work.

Hi @dorantesedua ! i'm new in React and unfortunately get struggle with Viro. I run the sample-code in react-native 0.59.9 without error, then update what you said and re-run the app but she crash when i chose the AR scene.

I also try this in react-native 0.63.3 but the app crash on launch. Any idea ?

[geo-vi]

Guys, please, move this talk to another issue or bump an existing one.

Don't you mind if I create a Discord server for active members and development?

Hey, have you created the Discord server yet?

[adelarsq]

Its already created at https://discord.gg/H3ksm5NhzT

[doranteseduardo]

@doranteseduardo when I move my device, i want object/text would always be in sight in front of the camera. For this, i have wrapped like below,

Issue Faced: But the app seems crashing(Automatically closes the App). After removing the ViroARCamera app runs perfectly.

Package and version: @akadrimer/react-viro: 2.17.0

       `<ViroARScene>
          <ViroARCamera>
              <ViroNode position={[ 0, 0, -1 ]} dragType="FixedDistance" onDrag={() => {}}>
                  <ViroImage
                      height={0.5}
                      width={1}
                      position={[ 0, 0, -1 ]}
                      placeholderSource={require('./res/sky.jpg')}
                      source={require('./res/sky.jpg')}
                  />
              </ViroNode>
          </ViroARCamera>
      </ViroARScene>`

Could you attach your log here?

[VizzHub]

@doranteseduardo when i try to run the App in iOS facing below issue, Could you please tell me the steps need to be followed for configuring in iOS. Is there any linking issues? FYI: It works fine in Android.

Package and version: @akadrimer/react-viro: 2.17.0

[deepanjandas]

Thanks @doranteseduardo I have been able to implement the update and it is working great. "@akadrimer/react-viro": "^2.17.0", "react-native": "0.63.3",

But there is a problem that I am facing. This works perfectly on some mobiles while it shows some displacements in latest mobiles.

The issue is that the left and right panel for React Viro360Video is getting shifted a bit to the right.

working correctly in this type of mobiles: https://images-na.ssl-images-amazon.com/images/I/51qYMufSArL._SL1000_.jpg

Displacement issue in this type of mobiles: https://img.etimg.com/thumb/msid-69351592,width-650,imgsize-579336,,resizemode-4,quality-100/ets-dualpane-2019-05-16t083605-223.jpg

The amount of shift seems to be same as the height of the area under the camera for the second device image.

The displacement image is here: https://files.slack.com/files-pri/T2VN5EUG5-F01HYMKBR2T/index.jpg See that the line is in the center while the left and right panel has shifted a bit to the right resulting in a cut of the screen.

Remember, the same works well in the first device types where the camera is on top in the rectangle area above the screen area.

Best Deepanjan Das

Okay, thanks. Now, the react-viro package is not compatible with RN 0.60+ as-is.

What you have to do is to build the react-viro package from source using the latest RN version and install it like usual. I made a fork (because I see no activity on this repo, unfortunately) and compiled it few days ago.

Do the following:

1. Uninstall your current react-viro package ( DO NOT UNLINK IT)

2. Run `npm install --save @akadrimer/react-viro`

3. In the settings.gradle, point the references to `@akadrimer/react-viro` instead of `react-viro`:

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

1. Remove the following implementations from `app/build.gradle`

implementation 'com.amazonaws:aws-android-sdk-core:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-ddb:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-cognito:2.7.7'
implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.7.7'

Change all your imports in your JS code from react-viro to @akadrimer/react-viro e.g. import { ViroARSceneNavigator } from '@akadrimer/react-viro';

And that's all, now you can run your project and it should work.

[whalemare]

Not working on iOS even on '@akadrimer/react-viro' fork

[adelarsq]

@whalemare Can you test with the community fork?

[whalemare]

@adelarsq it works for ios, thanks! But not works on android :)

Unable to find a matching configuration of project :react-viro:
          - None of the consumable configurations have attributes.

[Expert0126]

When I build for iOS, I get this error. Could you help me for this? RN - 63.4