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.

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

Do the following from a Terminal or Windows PowerShell window:

  1. Copy the /Users/<username>/youiengine/<version>/samples/RNSampleApp/ folder to a location outside the youiengine directory; for example: cd /Users/<username>/MyApp

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

  3. 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>
  4. Open a second Terminal or PowerShell window and start the Metro Bundler from your project folder.

    cd /Users/<username>/MyApp
    yarn start
  5. The Yarn server starts. Look for the following to appear in the window: Welcome to React Native! Learn once, write anywhere
  6. Return to your first Terminal or PowerShell window and start the application by executing the file in youi/build//debug.


    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:

  1. Update package.json so that it uses your app name and version instead of RNSampleApp or MyApp and 0.0.1.

  2. 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
  3. 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.