Integrating viromedia with React Native Projects

[Ahmednagyyy]

Hello guys,

I'm trying to Integrating viromedia with new React Native Project but the doc. it doesn't help at all here is the Link of the official doc for what I need. https://docs.viromedia.com/docs/integrating-with-react-native-projects

but as you see It's useless.

I Used the samples and its good, but I don't need the sample anymore I want to create my own project without download viromedia app to run my app on it.

All I need is steps about how to install and integrate Viro-media with a new react native project, I'm willing to purchase a license but I can't while I'm not able to use it on my own.

Thanks in advance.

[VikAdvani]

Hi @Ahmednagyyy, you can follow our guide here that shows how do that for Android: https://docs.viromedia.com/docs/integrating-existing-projects-android

And for iOS do the following for a React Native project you set up: 1) Add react-viro to package.json - Make sure react version is 0.49.3 2) run npm install. 3) a. Unzip the following zip file in your project root b. Run chmod +x setup-ide.sh to make it executable. c. Run setup-ide.sh --ios on the project root.

Note: If you have a new RN project you can run setup-ide.sh --android for android as well. I've attached the setup-ide.sh script for you here.

setup-ide.sh.zip

[ttDemon]

Hi @VikAdvani.

I have fully implemented the above steps for android in my native react project. It can not run and error:

Error type 3 Error: Activity class {com.syminarmobileapp / com.syminarmobileapp.MainActivity} does not exist.

Please show me how to solve the issue!

[dam00n]

@ttDemon it is possible you have a RN/Android issue. Check out this thread, there might be some solutions in there that help -> https://github.com/facebook/react-native/issues/14952

[ttDemon]

@dam00n @VikAdvani I tried to create a new project react native, installed under the instructions for Android, but when running the project appears error:

Execution failed for task ':app:transformClassesWithDexForDebug'.

com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexIndexOverflowException: Cannot merge new index 67470 into a non-jumbo instruction!

I have searched for fix but not fix yet, i use Window 10. Pls help me!

[dam00n]

There are a couple stackoverflow threads that provide solutions for similar issues you can try:

https://stackoverflow.com/questions/33717886/errorexecution-failed-for-task-apptransformclasseswithdexfordebug

A more recent thread

https://stackoverflow.com/questions/26093664/dexexception-cannot-merge-new-index-65536-into-a-non-jumbo-instruction

[ttDemon]

@dam00n thank you for confirm! I'm making 360 videos. How can I watch 360 videos without glasses, which means I want to remove the glasses from the screen?

[dam00n]

In ViroSceneNavigator there is a prop vrModeEnabled. To see videos in 360 mode, you want to set this to false which makes the view mono or 360 view.

https://docs.viromedia.com/docs/virovrscenenavigator#section-optional-props

[ttDemon]

@dam00n Thanks for confirm. Have you ever watched watch livestream 360? Will Viro allow watch livestream 360 video witch tag video360?

[dam00n]

Viro utilizes Exoplayer (Android) and AVPlayer (iOS) so it is possible to render HLS Streams in your projects with Viro. We have not ourselves worked with livestreaming video but there are multiple developers on the Viro platform that are working on building apps that include livestreaming.

[mypark]

looking at the setup ide script for ios - is it replacing the podfile and AppDelegate.m? If so it would be overwriting the existing code there no?

[ttDemon]

@dam00n How can I watch 360 ​​when rotating the phone. What props or method can I use?

[dam00n]

@mypark are you still having issues with the setup ide script?

@ttDemon I am not sure what your question is. If you are a 360 video, you just rotate the phone and you will see the different parts of the video. If you are talking about using your finger to rotate the video see these 2 github issues

https://github.com/viromedia/viro/issues/103 https://github.com/viromedia/viro/issues/203

[mypark]

@dam00n not really an issue per se - just a question about whether it overwrites those files - because existing projects might have custom code in there that a developer would have to re-apply. If you can confirm that it overwrites - than it just means that would need to be noted in the instructions for a future time.

[dam00n]

@mypark the setup ide script for iOS does overwrite. But it is intended to be used only for new projects. Thanks for the heads up. We will update our documentation where appropriate.

[ttDemon]

@dam00n I can not watch video 360 when I rotate the phone, I try to run example Hello world of you but also not watch 360. I run on Samsung A8. I do not know why.

[dam00n]

@ttDemon we need more information to repro this issue.

1. Can you share a code snippet for the video?
2. What video are you using? Can you send us the link or file so we can test?
3. Does the video play but you can not rotate the phone to watch other parts of the video?

If you have the Viro testbed app, can you try the third option, Viro Media Player -> Tap No -> tap on screen to bring up player controllers -> tap on 360 -> does the 360 video play and can you rotate your phone to watch?

[VikAdvani]

Hi @ttDemon the Samsung A8 does not have a gyroscope which explains why you are unable to see the movie rotate as you rotate the the device :)

[amandeepmittal]

How to access ngrok while integrating Viro with react native on running the command npm start? It does not show up.

[Shoaib009]

open a new command prompt and write ipconfig in the terminal than take the ipv4 and paste at the place of ngrok it will work

[Shoaib009]

@amandeepmittal

[amandeepmittal]

@Shoaib009 Thanks! It did work.

[Goussaka]

Helllo, how can I add viro inside project react native v 0.60+ !