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 toindex.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.