RN Sample App

For You.i React Native development, RNSampleApp in the youiengine/<version>/samples folder provides a comprehensive example of a You.i React Native app, complete with support for Cloud Solution for Roku. If you want to start with a more basic demo app, see Quick Start.

Note

For Cloud Solution Roku apps, You.i TV recommends that you base your app on RNSampleApp from your You.i Platform package. To build the Roku version of this application, see instructions in Building Roku Apps and Updates With the Script.

This procedure assumes you have already installed You.i Platform and set up your development environment. See Installing .

Note

For Windows Users We recommend that you create your app at the root of your storage device (e.g., C:\) to avoid long path name. Avoid spaces in file name and path names, as spaces cause errors when building for Android on Windows.

Do the following from a Terminal or Windows PowerShell window:

Copy the /Users/<username>/youiengine/<version>/samples/RNSampleApp/ folder to a location outside the youiengine directory; for example: cd /Users/<username>/MyApp
Install dependencies for the project:
```
yarn install
```
Note If you installed multiple versions of You.i React Native software on your machine with youi-tv install, the new project automatically uses the latest version of the libraries while building.
Build the RN sample app to ensure your development environment is setup correctly. The basic build is as follows, substituting <platform> for one of: osx, ios, tvos, android, uwp, tizen-nacl, ps4, or linux. See youi-tv build for full build details and optional parameters.
```
youi-tv build -p <platform>
```
Open a second Terminal or PowerShell window and start the Metro Bundler from your project folder.
```
cd /Users/<username>/MyApp
yarn start
```
The Yarn server starts. Look for the following to appear in the window: Welcome to React Native! Learn once, write anywhere
Return to your first Terminal or PowerShell window and start the application by executing the file in youi/build//debug.
```
./youi/build/<platform>/Debug/MyApp
```
The debug version of the RN sample app has the following startup screen:

Next, update the app files and the build system to meet your needs:

Update package.json so that it uses your app name and version instead of RNSampleApp or MyApp and 0.0.1.
Set the project name, package name, and display name to reflect your app. You can use either of the following methods:
1. Change the settings for YI_PROJECT_NAME, YI_PACKAGE_NAME, and YI_DISPLAY_NAME in MyApp/youi/Project.cmake.
2. (Optional) Use -d when running youi-tv generate or youi-tv build to set individual CMake parameters; for example:
```
   youi-tv build -p osx -d YI_PROJECT_NAME=MyProject -d YI_PACKAGE_NAME=MyPackage -d I_DISPLAY_NAME=MyApp
```
If you are building for Android, you will have to modify the above instructions in step 2, as Android uses a different CMake file for the definition.

Finally, use your IDE to extend and modify the app to suit your needs.