Developer Portal

Building You.i Engine React Native Apps

Note

The procedures in this topic apply to all build target platforms except Roku. Building and testing Roku apps requires special setup due to the nature of the solution. See Setting Up a Roku Development and Test Environment and Building Roku Apps.

The procedures in this topic assume you have installed the You.i TV CLI with yarn global add youi-cli and installed the You.i Engine React Native software. For details, see Installing the You.i Engine One Software.

Use the following procedure to build You.i Engine React Native apps.

Build Procedure

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 steps from a Terminal in Mac or Linux, or a Windows PowerShell window in Windows:

  1. Navigate to the youi subdirectory of your You.i Engine React Native app:
    cd MyApp/youi
  2. (Optional) To exclude specific files or file extensions or file directories during asset copying before project generation, see Excluding Files or File Directories or File Extension.
  3. Generate and build the application:
    1. For use on your local system, do:
      youi-tv build -p <platform> add -c Release if building a release version.
    2. For use on a system other than the one runnning the Metro Bundler:
      youi-tv build -p <platform> --remote <IP Address>
      Where <IP Address> is the IP address of the machine running the Metro Bundler. Your local development platform's IP address is used if this otpion isn't specified.
    3. If building for Android TV, do:
      youi-tv build -p android -d YI_ANDROID_TV=ON
    4. If deploying to a PlayStation 4 (PS4) create a the required .pkg file by running:
      youi-tv build -p ps4 -t <AppName>_package
    Where <platform> is one of the following: osx, ios, tvos, android, uwp, tizen-nacl, ps4, or linux. See a list of supported target platforms you can build from your current development environment with youi-tv build --help.

    Use the optional --local --file index.youi.js or --inline --file index.youi.js arguments as required. For more details on the inline and local arguments, see Build System Arguments.

    The project file is generated in the build/osx/ subdirectory for Mac, build/linux/Debug subdirectory for Linux, and build\uwp subdirectory for Windows.

    Note

    Inline bundling is only supported for special builds of the Roku target platform.

  4. If necessary, load the resulting app onto a device. Ensure the device is on the same network as your development platform. For more information, see the steps in Deploying You.i Engine One Apps.
  5. To use the Metro Bundler ( yarn server), open a new Terminal or Windows PowerShell window, then do:
    cd <your application folder> e.g. cd MyApp
    yarn start
    The yarn server starts. Look for the following to appear in the window:
    Loading dependency graph, done.
    To stop the Metro Bundler, press Ctrl + C.

    Note

    If you start the Metro Bundler (yarn server) from anywhere other than your application's project folder, you'll see an error on the screen.


  6. Go back to your previous Terminal or shell window and launch the app executable; for example in MyApp/youi/build/osx/Debug/MyApp.
    The executable name and location varies depending on your target platform and if it is a Debug or Release app. See Generated Files for details.

Note

You.i Engine React Native supports live reloading when using the Metro Bundler (yarn server). Many changes appear immediately in your application. To request an explicit reload, press CTRL + R or select Reload RN from the React Native Reload menu of the Dev Panel window.

Be aware that build options --local and --inline disable live reloading.

Next, see Code Structure Overview to see the various parts of the code base.

Build System Customization

For more information on optional arguments for the build system, see Builds.

If desired, you can set default values for the --file argument, bundle file name, bundle mode, and platform specific bundle modes by adding a youi object, as shown below, to the project's package.json file:

"youi": {
	"entryFile": "index.youi.js",                                                                      
	"bundleFileName": "index.youi.bundle",
	"defaultBundleMode": "local",                          
	"platformSpecificBundleModes": { "osx": "local", "roku": "inline", "ios": "remote", "android": "ram_bundle" }
       "sourcemapOutput": "output.json",
	"bundlerConfiguration": "configfile.js"
}

where:

  • entryFile sets a default value for the --file argument.
  • defaultBundleMode sets the default for --local , --ram_bundle, and --remote is the default if the key doesn't exist.
  • platformSpecificBundleModes is a list of platforms for which you want to set a default bundle mode. The default specified is used by the generate command.
  • sourcemapOutput generates a JSON output at the given path for debugging dynamic JS module loading.
  • bundlerConfiguration allows you to supply a custom metro configuration for RAM bundling options.

Note

Specifying --file with the youi-tv build or youi-tv generate commands overrides your custom value in package.json.