HowTo: Use theta-client 1.11.0 with React Native iOS

[craig]

theta-client 1.11.0 was released a few days ago. Yesterday, I documented on how to run the demos on iOS Swift, Android Kotlin, Flutter iOS. Today, I took a look at React Native.

As I normally don’t develop with React Native, some of the steps may not be relevant.

in theta-client/demos/demo-react-native/ios, I ran pod install.

Initially, I ran into problems with rbenv, the ruby virtual environment manager.

pod install
rbenv: pod: command not found

The `pod' command exists in these Ruby versions:
  3.2.2

craig@craigs-air ios % which pod
/Users/craig/.rbenv/shims/pod
craig@craigs-air ios % rbenv local 3.2.2
craig@craigs-air ios % pod install      
...
...
Pod install took 104 [s] to run
Integrating client project
Pod installation complete! There are 40 dependencies from the Podfile and 41 total pods installed.

As I wanted to test this with a physical device iPad connected to a physical device THETA X, I made a few more changes.

In Xcode, I changed the iOS minimum deployments version to 15.6 and set a new Bundle Identifier.

I also set up the signing.

testing live preview

The live preview screen has 360 navigation.

In this configuration, I have my MacBook Air connected to the Internet with WiFi and my iPad is tethered to the Mac with a USB cable. I then connect the iPad to the THETA X with WiFi. The THETA X is the access point at 192.168.1.1.

Within the settings for the THETA X, I have live preview set to high quality.

In this configuration, the live preview on the iPad running iOS 15.7 ran beautifully. I often have problems with the simulator, but physical device ran great.

list view

Similar to the other platforms, the listView looks fine with the thumbnails displayed on the left and the file name displayed on the right.

image viewer

The image view of the react-native-demo iOS is in equirectangular.

There are many open source packages to display a 360 image.

For example, this article shows how to use the open source 360 image viewer pannellum inside of a WebView with React Native iOS and React Native Android.

HowTo: React Native with Pannellum 360 Viewer with Local and Network Images

This article will practically represent the usage of a 360-degree Image Viewer. In my last article, I wrote about 5 free 360° Image Viewers for JavaScript Web and Mobile. If you thoroughly check it out, you’d agree that most Viewers aren’t supported on mobile but can be integrated using WebView. As I said above, this is a practical guide and will be on the usage of the Pannellum Viewer. Bootstrapping the Project We’d be using Expo to set this build-up because according to the official React Na…

---

Expo

If you are using React Native Expo, refer to this dicussion.

SOLVED: Display smooth live preview in React Native Expo with SDK

I use the Ricoh Theta SDK and try to have smooth render of live preview to a react native app experimentation. I followed guideline to create react native project with SDK. I’m able to initialize, read live preview and take picture. Read live preview is not smooth, I mean when I got new byte data, my image is refreshed correctly but the change between the two byte data state is visible in the app. So I tried react-native demo and preview is very smooth. I’m not able to do so in my project wi…

I have not tested React Native Expo with theta-client myself, so I would be interested to hear your experience.