Configuring ViroReact latest version to RN 0.63

Question

Configuring ViroReact latest version to RN 0.63

VizzHub opened this issue 4 years ago · 38 comments

VizzHub commented 4 years ago

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:

Development OS: Windows
Device OS & Version: Android OS
Version: ViroReact version 2.17.0 and React Native version 0.63
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

<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

Answer 1 · 2020-10-28T16:30:58.000Z

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:

Uninstall your current react-viro package ( DO NOT UNLINK IT)
Run npm install --save @akadrimer/react-viro
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')

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.

Answer 2 · 2020-10-29T06:39:25.000Z

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

Answer 3 · 2020-10-31T07:26:20.000Z

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

Answer 4 · 2020-10-31T17:23:04.000Z

@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.

Answer 5 · 2020-10-31T23:42:00.000Z

@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

Answer 6 · 2020-11-02T14:54:18.000Z

@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?

Answer 7 · 2020-11-02T16:16:15.000Z

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

Answer 8 · 2020-11-03T16:56:27.000Z

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:

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

Answer 9 · 2020-11-03T17:14:39.000Z

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

Answer 10 · 2020-11-03T17:51:22.000Z

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: OBJC_CLASS$_WKWebView

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

Answer 11 · 2020-11-03T20:30:50.000Z

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

Answer 12 · 2020-11-03T20:31:29.000Z

haider792 commented 4 years ago

Answer 13 · 2020-11-03T20:32:36.000Z

but it isn't working. still. giving error

Answer 14 · 2020-11-03T20:32:54.000Z

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

Answer 15 · 2020-11-03T20:36:54.000Z

haider792 commented 4 years ago

Answer 16 · 2020-11-04T20:48:52.000Z

@haider792 Did you manage to build with success?

Answer 17 · 2020-11-05T11:46:54.000Z

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

Symbol not found: OBJC_CLASS$_WKWebView

Answer 18 · 2020-11-05T15:14:49.000Z

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

Answer 19 · 2020-11-05T20:23:44.000Z

yes i did. but its not working.

Answer 20 · 2020-11-05T20:41:50.000Z

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

Answer 21 · 2020-11-05T22:55:00.000Z

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:

Remove the GVR feature (it uses UIWebView) - there is a branch with this approach.

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.

Answer 22 · 2020-11-05T23:28:06.000Z

@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.

Answer 23 · 2020-11-06T23:04:23.000Z

@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

Answer 24 · 2020-11-07T01:31:12.000Z

@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?

Answer 25 · 2020-11-07T01:47:32.000Z

react-viro is not getting the WKWebView .

Answer 26 · 2020-11-07T02:39:27.000Z

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?

Answer 27 · 2020-11-07T03:09:37.000Z

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

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

Answer 28 · 2020-11-08T08:45:30.000Z

@doranteseduardo yes sure

Answer 29 · 2020-11-16T20:13:29.000Z

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:

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

Run npm install --save @akadrimer/react-viro

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')
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 ?

Answer 30 · 2020-11-16T21:07:25.000Z

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?

Answer 31 · 2020-11-16T21:23:41.000Z

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

Answer 32 · 2020-11-17T16:06:32.000Z

@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?

Answer 33 · 2020-11-23T13:52:54.000Z

@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

Answer 34 · 2021-01-12T05:07:26.000Z

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.

Answer 35 · 2021-01-20T07:13:28.000Z

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

Answer 36 · 2021-01-20T11:34:51.000Z

@whalemare Can you test with the community fork?

Answer 37 · 2021-01-29T06:45:35.000Z

@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.

Answer 38 · 2021-02-08T16:46:03.000Z

When I build for iOS, I get this error.

Could you help me for this?
RN - 63.4