HowTo: Start a New React Native Project with theta-client 1.12

[craig]

start new project

npx @react-native-community/cli@latest init TCrnBasic 
✔ Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … yes
⠦ Installing Ruby Gems

install theta-client

cd TCrnBasic
npm install theta-client-react-native

pod repo update
Updating spec repo `trunk`

pod search THETAClient --simple

-> THETAClient (1.12.0)
   THETA Client
   pod 'THETAClient', '~> 1.12.0'
   - Homepage: https://github.com/ricohapi/theta-client
   - Source:  
   https://github.com/ricohapi/theta-client/releases/download/1.12.0/THETAClient.xcframework.zip
   - Versions: 1.12.0, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0,
   1.8.0, 1.7.1, 1.7.0, 1.6.0, 1.5.0, 1.4.0, 1.3.1, 1.3.0, 1.2.0, 1.1.0, 1.0.0
   [trunk repo]
(END)

---

Steps below no longer needed as I forgot to run pod repo update initially

install pod for iOS - not needed

I built the pod from source as I originally couldn’t find the pod in cocoapods

build ios pod

Download theta-client into a different directory. This is not inside of your project.

./gradlew podPublishXCFramework

copy pod from theta-client into new project

cd kotlin-multiplatform/build/cocoapods/publish
cp -r * /Users/craig/Development/ricoh/2025/TCrnBasic/ios/Vendor/theta-client

modify Podfile

in ios

target 'TCrnBasic' do
  config = use_native_modules!
  pod "THETAClient", :path => "./Vendor/theta-client/debug"
  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

install pod

in the ios directory

pod install
Found 1 module for target `TCrnBasic`
...
...
Downloading dependencies
Installing React-Codegen (0.1.0)
Installing THETAClient (1.12.0)
Installing theta-client-react-native (1.12.0)

add skeleton code

In App.jsx.

import React from 'react';
import {Button, SafeAreaView, ScrollView, Text} from 'react-native';
import {FileTypeEnum, initialize} from 'theta-client-react-native';
import {getThetaInfo} from 'theta-client-react-native';
import {listFiles} from 'theta-client-react-native';

function App(): React.JSX.Element {
  const [thetaInfo, setThetaInfo] = React.useState('');

  React.useEffect(() => {
    const initTheta = async () => {
      try {
        await initialize('http://192.168.1.1', {});

      } catch (error) {
        console.error('Failed to initialize THETA:', error);
      }
    };
    initTheta();
  }, []);

  return (
    <SafeAreaView>
      <ScrollView>
        <Button
          title="info"
          onPress={async () => {
            try {
              const info = await getThetaInfo();
              setThetaInfo(JSON.stringify(info, null, 2));
            } catch (error) {
              console.error('Failed to get THETA info:', error);
              setThetaInfo('Error getting THETA info');
            }
          }}
        />
        <Button
          title="list files"
          onPress={async () => {
            try {
              const files = await listFiles(FileTypeEnum.IMAGE, 1, 10);
              setThetaInfo(JSON.stringify(files, null, 2));
            } catch (error) {
              console.error('Failed to get file listing:', error);
              setThetaInfo('Error getting file listing');
            }
          }}
        />
        <Text>{thetaInfo}</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

connect computer to camera and run

Connect with WiFi. The red USB cable is only for power. The RICOH THETA is at 192.168.1.1. Your computer must connect to the THETA as a hotspot.

npm run ios

Open ReactNative DevTools

screenshots

Code

GitHub - codetricity/theta-react-native-basic

---

---

[Phat_Ca]

I wanted to take a moment to say thank you with this tutorial. As someone developing an application to interact with a Ricoh Theta camera (capturing photos and displaying images via Theta Client), I found this guide to be an incredibly helpful starting point.

The tutorial’s step-by-step structure and clear explanations the integration process, and I was able to make significant progress quickly. That said, I encountered a minor issue in one of the code snippets: a capitalization inconsistency with the term Vendor, and the vendor folder should be inside the ios directory. Correcting this resolved the error and served as a good reminder of how syntax precision can impact development.

Key Takeaways for Fellow Developers:

• Double-check casing (e.g., vendor vs. Vendor) if you encounter unexpected errors.
• The tutorial’s structure is great !

Once again, thank you to the Craig and the Theta community for such a supportive environment.

Here is my current repo

[Phat_Ca]

Hey Craig,
I’ve been struggling to debug connectivity with my THETA camera over its 2.4GHz hotspot. While researching solutions, I came across an article suggesting the use of a mock THETA server (fake-theta I believe) for development purposes.

I gave this approach a try, but I ran into an error:
TLS sessions are not supported on Native platform

I suspect this relates to how React Native handles HTTPS in testing environments. Have you encountered this before?

[craig]

I tested with a physical device camera, THETA X. I am using a router to provide Ethernet to my MacBook Air from my Internet WiFi. See TIP: MacBook Air Dual Network for Easier Development on Apple Silicon.

The THETA X can use 5GHz WiFi, which may be less sensitive to WiFi interference. The SC2 needs to use 2.4GHz.

@Phat_Ca I can replicate your error with theta-client 1.12 and fake-theta to this endpoint

https://fake-theta.vercel.app/osc/info

as far as I can tell, theta-client can’t work with https

---

Testing from physical Android phone connected to camera.

adb devices
npx react-native run-android --deviceId=YOUR_DEVICE_ID

---

android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 26
        compileSdkVersion = 35
        targetSdkVersion = 34
        ndkVersion = "27.1.12297006"
        kotlinVersion = "1.9.10"
    }
    repositories {
        google()
        mavenCentral()
        flatDir {
            dirs 'libs'
        }
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
    }
}

apply plugin: "com.facebook.react.rootproject"

in app/build.gradle

dependencies {
    implementation fileTree(dir: "libs", include: ["*.aar"])

    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

I have the theta-client aar file in android/libs

I also had to go through the installed module for theta-client and update for null checks.

• Go to the error lines mentioned in your error message:
• Line 311 in Converter.kt
• Lines 305, 1893, and 2113 in ThetaClientSdkModule.kt
• Fix the errors by ensuring you’re passing a non-null String where required.