Quick Start

Let’s build your first You.i React Native app.

Follow this tutorial to build your first You.i React Native app. From there, we’ll add features that give you the building blocks needed to write your own app.

Your first You.i React Native application

If You Have Issues

If you had any issues with this tutorial, you can download a zip file with the completed JavaScript and C++ files.

Create a Starter App

Set up scaffolding for your app with youi-tv init.

youi-tv init MyApp  # Create a folder called MyApp for your project
cd MyApp

Then build (choose the tab for your current development platform):

youi-tv build -p osx
youi-tv build -p linux
youi-tv build -p win64   

Folder Structure

You.i Engine One CLI creates scaffolding for your project. The initial folder structure looks like this:

├── .babelrc                 # Configure babel for React Native and Metro bundler
├── README.youi.md           # The getting started instructions you just completed
├── __tests__                # Unit and application tests folder
    └ ...
├── babel.config.json        # Configure babel for React Native
├── client                   # Files for working with Cloud Solution for Roku
    └ ...
├── index.youi.js            # Main entry point for a You.i React Native project (file must have this name)
├── metro.config.js          # Metro configuration for React Native
├── node_modules           
    └ ...
├── package.json           
├── react-native.config.js   # Configure the Metro bundler to exclude You.i build files
├── yarn.lock              
└── youi                     # You.i Engine C++ files associated with your app
    ├── AE
    │   └── assets           # Unlike Facebook React Native apps, assets are added to this folder
    │       └── drawable
    │           └── default
    │               └── youi_logo_red.png
    ├── CMakeLists.txt
│   ├── Project.cmake
│   ├── SourceList.cmake
│   └── src                  # Project C++ source files
│       ├── App.cpp
│       ├── App.h
│       └── AppFactory.cpp

Run Your App

First, use Yarn to start the Metro bundler.

yarn start
# Wait for the server to start (You'll see: "Loading dependency graph, done.")

With the Metro bundler running, open a second terminal window and navigate to your app folder (cd MyApp). Start the sample app using the command below.

./youi/build/osx/Debug/MyApp
./youi/build/linux/Debug/bin/MyApp
./youi/build/uwp/Debug/MyApp

That’s it! You’ve got a working sample application and framework for developing your own custom app.

Next Steps

Now you have a working app.

Next, you’ll learn how to support custom assets.