Let’s build your first You.i React Native app.
You need to configure your development environment and install the You.i CLI before building the Quick Start 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.
If you had any issues with this tutorial, you can download a zip file with the completed JavaScript and C++ files. The files contain updates for the entire tutorial and won’t run for all the steps, but they’re useful guides for adding lines of code.
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
You.i CLI creates scaffolding for your project. The initial folder structure looks like this:
├── .babelrc # babel configuration for React Native and Metro bundler
├── __tests__ # Unit and application tests folder
└ ...
├── babel.config.json # babel configuration for React Native
├── client # Files for working with Roku Cloud Solution apps
└ ...
├── 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 # Configures the Metro bundler to exclude You.i build files
├── README.youi.md # The getting started instructions you just completed
├── yarn.lock
└── youi # You.i 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
│ └── json
│ └── default # Used to configure Roku Cloud Solution apps
│ └── clientConfig.json
│ └── serverConfig.json
├── CMakeLists.txt
├── Project.cmake
├── SourceList.cmake
├── TargetList.cmake
├── build
└── src # Project C++ source files
├── App.cpp
├── App.h
└── AppFactory.cpp
First, use Yarn to start the Metro bundler.
yarn start
# Wait for the server to start (You'll see: "Welcome to React Native! Learn once, write anywhere")
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
Also try our handy shortcut command, youi-tv run
, which builds, deploys, and launches an app, and generates the project if necessary.
That’s it! You’ve got a working sample application and framework for developing your own custom app.
Now you have a working app.
Next, you’ll learn how to support custom assets.