FIX: React Native Crash on Start with theta-client 1.11

craig · January 27, 2025, 7:14pm

A pull request was recently merged into theta-client to fix a problem where a React Native app would crash on app startup. This problem would occur with React Native 0.76 and React Native 0.77 (newest version as of Jan 27, 2025).

The solution simply involved deleting an deprecated declaration that was likely leftover from an old example.

The error is most noticeable when building a brand new React Native app, not the demo-react-native app that is included with theta-client, which currently uses react-native v0.71.14.

Overview of Steps for React Native iOS app with theta-client

build theta-client from source from GitHub
make react native package
create new react native project
add local theta-client package (built in previous step) to project
import theta-client into your React Native app and use it

Build theta-client from source

Download from GitHub

git clone https://github.com/ricohapi/theta-client.git

Change into theta-client project.

cd theta-client

build for iOS

./gradlew podPublishXCFramework
Starting a Gradle Daemon (subsequent builds will be faster)
<-------------> 0% EXECUTING [53s]
> :kotlin-multiplatform:compileKotlinIosArm64
...
...
BUILD SUCCESSFUL in 9m 30s
15 actionable tasks: 15 executed

make React Native package

Change into the react-native directory of theta-client.

Within the react-native directory, these are the steps to make the package.

install bob as a dev dependency
modify package.json to point to index.d.ts
run yarn prepack
run mkpackage.sh

install bob to dev

In theta-client/react-native, add react-native-builder-bob

yarn add --dev react-native-builder-bob 
yarn add v1.22.22
[1/5] 🔍  Validating package.json...

modify location of index.d.ts in package.json

In package.json, change the location of index.d.ts. The original definition did not have src.

"types": "lib/typescript/src/index.d.ts",

run `yarn prepack`

yarn prepack
yarn run v1.22.22
$ bob build
ℹ Building target commonjs
ℹ Cleaning up previous build at lib/commonjs
ℹ Building target module
ℹ Cleaning up previous build at lib/module
ℹ Building target typescript
ℹ Cleaning up previous build at lib/typescript
ℹ Compiling 66 files in src with babel
ℹ Compiling 66 files in src with babel
ℹ Generating type definitions with tsc
✔ Wrote definition files to lib/typescript
✔ Wrote files to lib/module
✔ Wrote files to lib/commonjs
✨  Done in 4.71s.

mkpackage.sh

Run mkpackage.sh

cd react-native 
 ./mkpackage.sh 
a README.md
a README.ja.md
a android
a android/build.gradle
...
...
a package.json
a theta-client-react-native.podspec

may need to copy lib to package

I had to manually copy lib into package in my test. I’d like to test this more.

cp -r lib package/

create a new React Native project

In a folder where you want to build your mobile app, create a new React Native project. This is likely not in the theta-client project.

npx @react-native-community/cli@latest init RealEstateDemo
                                                          

              Welcome to React Native 0.77.0!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
⠧ Installing dependencies
...
...
✔ Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … yes
✔ Installing Ruby Gems

add local theta-client package

I’m going to put the package in a folder called modules/theta-client-react-native

Change in to project root of the new React Native project you just created.

cd RealEstateDemo

Create directory to hold package

mkdir modules
mkdir modules/theta-client-react-native

Add the modules directory to .gitignore if you are using git.

Either use the command line or finder to copy the package from theta-client to your new mobile app.

Add the local module with yarn add file:./modules/theta-client-react-native

yarn add file:./modules/theta-client-react-native 
yarn add v1.22.22
info No lockfile found.
...
...
[5/5] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ theta-client-react-native@1.11.1
info All dependencies
└─ theta-client-react-native@1.11.1

import and use theta-client in your new React Native app

First, test with minimal react native app

import React from 'react';
import {Text, View} from 'react-native';
import {initialize} from 'theta-client-react-native';
import {getThetaInfo} from 'theta-client-react-native';

function App(): React.JSX.Element {
  initialize('http://192.168.1.1', {})
  .then(() => {
    console.log('successfully initialized theta-client');
    getThetaInfo()
    .then((thetaInfo) => {
      console.log('getting RICOH THETA camera information');
      console.log(thetaInfo);
    })
    .catch((error: Error) => {
      console.log(error);
    });
  })
  .catch((error: Error) => {
    console.log(error);
  });
  return (
      <View
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
      }}>
        <Text> theta-client with React Native 0.77</Text>
      </View>
  );
}

export default App;

There’s no UI on this minimal app.

The results show in the React Native DevTools.

Troubleshooting

If your iOS application cannot access the THETAClient podfile locally, you can try installing the pod directly into the ios directory of your React Native project.

add local theta-client Pod to iOS app

In the new mobile app, cd into ios.

Create folder Vendor/theta-client

cd ios 
craig@Craigs-MacBook-Air ios % ls
Podfile                     RealEstateDemo.xcodeproj/
Podfile.lock                RealEstateDemo.xcworkspace/
Pods/                       build/
RealEstateDemo/
mkdir Vendor
mkdir Vendor/theta-client
craig@Craigs-MacBook-Air ios %

In the theta-client project, copy the folders from

theta-client/kotlin-multiplatform/build/cocoapods/publish

into

YourNewMobileApp/ios/Vendor/theta-client

In the ios/Podfile, I’m going to set the minimum iOS version to 18.

Comment out platform :ios, min_ios_version_supported and replace with a line that has 18.0.

#business platform :ios, min_ios_version_supported
platform :ios, '18.0'

Add the THETAClient pod with pod "THETAClient", :path => "./Vendor/theta-client/debug"

target 'RealEstateDemo' do
  config = use_native_modules!
  # add this line in to use the local theta-client debug Pod
  pod "THETAClient", :path => "./Vendor/theta-client/debug"
  use_react_native!(

install THETAClient local Pod with pod install

Note that I haven’t change the version of theta-client. I’m going to wait for the official release.

pod install
...
...
Downloading dependencies
Installing React-Codegen (0.1.0)
Installing THETAClient (1.11.1)
Installing theta-client-react-native (1.11.1)
Generating Pods project
...
...
Setting CLANG_CXX_LANGUAGE_STANDARD to c++20 on /Users/craig/Development/ricoh/2025/RealEstateDemo/ios/RealEstateDemo.xcodeproj
Pod install took 8 [s] to run
Integrating client project
Pod installation complete! There are 70 dependencies from the Podfile and 70 total pods installed.

add local theta-client Pod to iOS app

In the new mobile app, cd into ios.

Create folder Vendor/theta-client

cd ios 
craig@Craigs-MacBook-Air ios % ls
Podfile                     RealEstateDemo.xcodeproj/
Podfile.lock                RealEstateDemo.xcworkspace/
Pods/                       build/
RealEstateDemo/
mkdir Vendor
mkdir Vendor/theta-client
craig@Craigs-MacBook-Air ios %

In the theta-client project, copy the folders from

theta-client/kotlin-multiplatform/build/cocoapods/publish

into

YourNewMobileApp/ios/Vendor/theta-client

In the ios/Podfile, I’m going to set the minimum iOS version to 18.

Comment out platform :ios, min_ios_version_supported and replace with a line that has 18.0.

#business platform :ios, min_ios_version_supported
platform :ios, '18.0'

Add the THETAClient pod with pod "THETAClient", :path => "./Vendor/theta-client/debug"

target 'RealEstateDemo' do
  config = use_native_modules!
  # add this line in to use the local theta-client debug Pod
  pod "THETAClient", :path => "./Vendor/theta-client/debug"
  use_react_native!(

install THETAClient local Pod with pod install

Note that I haven’t change the version of theta-client. I’m going to wait for the official release.

pod install
...
...
Downloading dependencies
Installing React-Codegen (0.1.0)
Installing THETAClient (1.11.1)
Installing theta-client-react-native (1.11.1)
Generating Pods project
...
...
Setting CLANG_CXX_LANGUAGE_STANDARD to c++20 on /Users/craig/Development/ricoh/2025/RealEstateDemo/ios/RealEstateDemo.xcodeproj
Pod install took 8 [s] to run
Integrating client project
Pod installation complete! There are 70 dependencies from the Podfile and 70 total pods installed.

jcasman · January 27, 2025, 8:27pm

Nice clear explanation of the problem and then also a step by step for building a React Native iOS app with theta-client. Thank you.

craig · January 27, 2025, 8:36pm

@jcasman I’m thinking of asking @Phat_Ca to go through this tutorial and extend the application.

jcasman · January 27, 2025, 8:47pm

Great idea. That would be useful for the community, I believe.

Phat_Ca · January 28, 2025, 6:53pm

If you want to use async await, here is an example:

function App(): React.JSX.Element {
  const [model, setModel] = useState<string | null>(null); // State to store the model

  useEffect(() => {
    const initializeThetaClient = async () => {
      try {
        await initialize('http://192.168.1.1', {});
        console.log('Successfully initialized theta-client');

        try {
          const thetaInfo = await getThetaInfo();
          console.log('Getting RICOH THETA camera information');
          console.log(thetaInfo);

          // Save the model in state
          setModel(thetaInfo.model);
        } catch (error) {
          console.log('Error getting camera information:', error);
        }
      } catch (error) {
        console.log('Error initializing theta-client:', error);
      }
    };

    initializeThetaClient();
  }, []);

If you want to show the result on the screen, you can use the useState hook:

import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import { initialize, getThetaInfo } from 'theta-client-react-native';

function App(): React.JSX.Element {
  const [model, setModel] = useState<string | null>(null); // State to store the model

In the UI component access the const model

{model ? <Text>Camera Model: {model}</Text> : <Text>Loading camera model...</Text>}

craig · January 28, 2025, 7:06pm

Thanks to @Phat_Ca for his work using theta-client-react-native with TypeScript.

While I was building this tutorial, I ran into a linter error that showed the modules for initialize and getThetaInfo could not be found.

Phat solved the problem by creating a file to export the modules. In src/types/theta-client-react-native.d.ts, he added this:

declare module 'theta-client-react-native' {
  export function initialize(url: string, config?: any): Promise<void>;
  export function getThetaInfo(): Promise<any>;
  // Add other functions you use from the module
}

To make sure TypeScript can find the declaration, he modified tsconfig.json as follows:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ],
    "paths": {
      "theta-client-react-native": ["./src/types/theta-client-react-native.d.ts"]
    }
  },
  "include": ["src/**/*"]
}

As this can be daunting to export every functioned used, he opened an issue on the RICOH GitHub repo for theta-client to see if the TypeScript declarations already exist or if we need to export every module ourselves.

github.com/ricohapi/theta-client

Theta-Client-ReactNative-Typescript module declaration

opened 06:40PM - 28 Jan 25 UTC

PhatCa

![Image](https://github.com/user-attachments/assets/cdffed54-7e83-4a25-acd6-f27d…854cd6a4) I am getting a typescript linter error. To correct the problem, I declared a module ``` declare module 'theta-client-react-native' { export function initialize(url: string, config?: any): Promise<void>; export function getThetaInfo(): Promise<any>; // Add other functions you use from the module } ``` Is this the best practice? Would I need to export every thetaClient function to use linter with typescript? Or is this already declared somewhere in thetaClient?

Phat’s configuration for React Native 0.77 with TypeScript module exports in shown in his GitHub repo.

There may be usable information in this article

Create React App + TypeScript Linting with TSLint and Prettier setup on VSCode · GitHub

Phat_Ca · January 30, 2025, 7:08pm

I attempted to follow your tutorial to determine if I could successfully generate the .d.ts file using:

yarn prepack

As a result, I now have this folder,

and I believe I need to establish a proper link so that app.tsx can correctly reference these files.

craig · January 30, 2025, 8:47pm

did you run yarn link

yarn link | Yarn

other

install bob to dev

In theta-client/react-native, add react-native-builder-bob

yarn add --dev react-native-builder-bob 
yarn add v1.22.22
[1/5] 🔍  Validating package.json...

modify location of index.d.ts in package.json

In package.json, change the location of index.d.ts. The original definition did not have src.

"types": "lib/typescript/src/index.d.ts",

run `yarn prepack`

yarn prepack
yarn run v1.22.22
$ bob build
ℹ Building target commonjs
ℹ Cleaning up previous build at lib/commonjs
ℹ Building target module
ℹ Cleaning up previous build at lib/module
ℹ Building target typescript
ℹ Cleaning up previous build at lib/typescript
ℹ Compiling 66 files in src with babel
ℹ Compiling 66 files in src with babel
ℹ Generating type definitions with tsc
✔ Wrote definition files to lib/typescript
✔ Wrote files to lib/module
✔ Wrote files to lib/commonjs
✨  Done in 4.71s.

From the above, it looks like the definition files are being written.

Topic		Replies	Views
HowTo: Start a New React Native Project with theta-client 1.12 theta-client reactnative , thetaclient , ios	3	28	February 11, 2025
Download Images from URL using React Native and theta-client theta-client thetav , thetaclient , reactnative	5	997	August 17, 2024
Fixed: React Native iOS 'no bundle URL present error' and modify theta-client theta-client thetaclient	1	399	August 6, 2024
Theta Client Guide Update - React Native - Theta Client SDK 1.2 thetaclient	20	1116	December 14, 2023
Theta-client 1.5 released - Official RICOH THETA Open Source SDK API Usage thetaclient	5	757	November 22, 2023

FIX: React Native Crash on Start with theta-client 1.11

Overview of Steps for React Native iOS app with theta-client

Build theta-client from source

make React Native package

install bob to dev

modify location of index.d.ts in package.json

run yarn prepack

mkpackage.sh

may need to copy lib to package

create a new React Native project

add local theta-client package

import and use theta-client in your new React Native app

Troubleshooting

add local theta-client Pod to iOS app

install THETAClient local Pod with pod install

add local theta-client Pod to iOS app

install THETAClient local Pod with pod install

install bob to dev

modify location of index.d.ts in package.json

run yarn prepack

Related topics

run `yarn prepack`

run `yarn prepack`