CODEWITHSUNDEEP
react-nativereact-360
rabbit87
rabbit87

Reputation: 3205

React 360 HTML doesn't show anything in React Native WebView

I'm trying to combine React 360 into React Native by showing the HTML file in a WebView.

The React 360's HTML itself doesn't seems to have any issue since I can open it in a web browser, but when I tried to open it in React Native WebView, it only shows the camera direction indicator while the rest of the screen is just blank.

I also noticed that trying to slide on the mobile (emulator) doesn't affect the camera since the camera direction indicator doesn't change.

The React 360's file is located in a folder name "web_react360" at the root of the project folder

There's no error shown in console, but in the packager there are 3 lines that might be related (but it doesn't seems to be error either) :

::ffff:127.0.0.1 - - [24/Oct/2018:04:32:20 +0000] "GET /assets/web_react360/index.html?platform=android&hash=bdc8423aef4bf1e19a22d83dbda756a1 HTTP/1.1" 200 - "-" "Mozilla/5.0 (Linux; Android 7.0; Android SDK built for x86_64 Build/NYC; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.90 Mobile Safari/537.36"

::ffff:127.0.0.1 - - [24/Oct/2018:04:32:20 +0000] "GET /assets/web_react360/client.bundle.js HTTP/1.1" 200 - "http://10.0.2.2:8081/assets/web_react360/index.html?platform=android&hash=bdc8423aef4bf1e19a22d83dbda756a1" "Mozilla/5.0 (Linux; Android 7.0; Android SDK built for x86_64 Build/NYC; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.90 Mobile Safari/537.36"

::ffff:127.0.0.1 - - [24/Oct/2018:04:32:21 +0000] "GET /favicon.ico HTTP/1.1" 404 150 "http://10.0.2.2:8081/assets/web_react360/index.html?platform=android&hash=bdc8423aef4bf1e19a22d83dbda756a1" "Mozilla/5.0 (Linux; Android 7.0; Android SDK built for x86_64 Build/NYC; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.90 Mobile Safari/537.36"

Have anybody managed to do something like this or include React 360 into react native app in another way?

Upvotes: 1

Views: 408

Answers (1)

rabbit87
rabbit87

Reputation: 3205

Turns out the problem is actually in the emulator itself.

Once I run the app inside a real device, the VR in React 360 managed to show properly inside the web view. And running it on a phone allows me to control the camera by moving the phone itself as well.

Upvotes: 1

Related Questions