React Native RICOH THETA Demo Installation Guide for Windows

Overview

This section covers the installation process for React Native on Windows 11 so that we can run the demo-react-native. Another section will cover the installation for macOS.

For this installation you will need to install Node.js if you haven't already.

There will be videos and links in the resource section for the installation of node.js on your computer. This article also covers how to build the theta-client and make it available to demo-react-native, as well as building the demo-react-native and running it on an Android emulator.

The results will be shown using the THETA X running the demo-react-native using the THETA API.

General Steps to run React Native Demo on Windows

1. Build the theta-client and make it available to demo-react-native
2. Build demo-react-native
3. Test the demo-react-native build on THETA X with an emulator
4. Test all demo features: List Files, Take Photo

Resources

• GITHUB React Native demo for theta-client

• VIDEO theta-client React Native full build tutorial and demonstration

• VIDEO HowTo Install nvm, node, npm and yarn on Windows 11

Work Environment

RICOH THETA X running firmware 2.00.0

Requirements

• Android Studio

  Needed for the SDK and Emulator Setup

• Java 11

• Node JS recommend to Install with NVM for Windows. Process is shown in the Node JS Section.

Command Line Steps

First Command - Clone the Repo

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

Second Command - Go into theta-client directory

with cd theta-client

Third Command - Build Gradlew

with ./gradlew publishToMavenLocal podPublishXCFramework but I have an Error, the problem is the SDK location is not found. My solution is to set the environment variable of the SDK.

Steps to Fix for Gradle Build Failure

1. Search for env

   

2. Click on environmental variables

   

3. New User Variable and Type in the Variable name ANDROID_HOME and set the path C:\Users\UserName\AppData\Local\Android\Sdk

   

   By default the path to the SDK usually is C:\Users\UserName\AppData\Local\Android\Sdk , Copy the Path substituting for your UserName

   

4. Restart your terminal by closing and relaunching it before trying out the gradlew build command again

Command Line Steps Continued

Retry Third Command - Try the Build Gradlew command again ./gradlew publishToMavenLocal podPublishXCFramework

Screenshot below shows its successful

Fourth Command - Set the environment variable of THETA_CLIENT

with the process shown above using the Windows Environment Variable Editor.

Variable Name : THETA_CLIENT

Variable Path : C:\Users\Erik Rodriguez\Projects\theta-client

Substitute the variable path for your local path to theta-client

Restart your terminal by closing and relaunching it

Check if it sucessfully set the variable with echo $Env:THETA_CLIENT it should return the path of the THETA_CLIENT variable if set correctly

Fifth Command - Go into react-native directory

with cd react-native

Sixth Command - run bash ./mkpackage.sh

and as it appears we have errors to fix

To fix the mkpackage error

You need to Convert your file to Unix format. This is one way to do it and there may be other ways.

1. Open up the VSCode editor, install it if you don't have it

2. Open the file called mkpackage.sh in the theta-client\react-native directory

3. Convert the mkpackage.sh file CRLF to LF by clicking on the bottom right CRLF button and changing it to LF as shown

   

4. Save the file by pressing ctrl-s and you should be good to go!

Retry Sixth Command - run bash ./mkpackage.sh

Go into the demo-react-native folder as shown below from the root directory theta-client

cd demos
cd demo-react-native

Install and Run Yarn

Seventh command - run yarn install

Once you are in theta-client\demos\demo-react-native run the following command yarn install

Note 1: May need to run Powershell in administrator mode if command isn't working

Note 2: May need to Install Node.js if your npm command isn't working which is shown in the Node.js section

if you dont have yarn downloaded on your computer already then you need to get it by running npm install --global yarn

Time to Run the Demo on Android

Now that we've sucesfully installed the required tools and setup. In the directory of theta-client\demos\demo-react-native use the command yarn run android to start your app in an Android emulator. Process shown in this Android Emulator Section to setup this emulator before running this command.

Possible Error's During Guide

Comments