Get Started on Android

Android is just one of the many target platforms for You.i React Native apps. Use the instructions below to run our quick start app on an Android device or emulator.

Before You Start

You can build a You.i React Native app for Android on any of our supported development platforms: Linux, macOS, or Windows. Consult the Environment Setup topic for your chosen development platform to verify that everything is set up properly.

Once your dev environment is all set up, we recommend running through our Quick Start Guide. But if our Quick Start isn’t quick enough for you, here’s an even quicker start.

Install the You.i TV command line interface tool, You.i Platform, and any required dependencies youi-tv doctor requests.

yarn global add youi-cli
youi-tv login    # Enter your product key when prompted.
youi-tv install 6.13.0  # If asked, accept most recent version of Babel or other dependencies
youi-tv doctor   # Resolve any missing components (but don't worry about Android for now)

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

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

Install Developer Tools

Download Android Studio from the Android developer site. We support versions 3.4.x to 4.2.x.

Install any SDK versions or tools you’ll need to complete your app development project.

Download Android NDK 21e from Android and configure Android Studio to find this NDK. There are two ways to do this:

  1. If building with Android Studio, replace the files in the Android Studio ndk-bundle folder with the downloaded files.
  2. If building from the command line only, set the ANDROID_NDK_HOME environment variable to any folder with the downloaded files.

Configure Environment Variables

Configure the following environment variables.

# add to your configuration file (~/.bash_profile, ~/.zshenv, etc) and reload
export ANDROID_HOME=~/Library/Android/sdk
export ANDROID_NDK_HOME=<path-to-your-downloaded-ndk-21e>
export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_NDK_HOME
# add to your configuration file (~/.bashrc or other shell config) and reload
export ANDROID_HOME=~/Android/sdk
export ANDROID_NDK_HOME=<path-to-your-downloaded-ndk-21e>
export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_NDK_HOME
# set these environment variables (usually done from system settings)
ANDROID_HOME=C:Users\<Username>\AppData\Local\Android\sdk
ANDROID_NDK_HOME=<path-to-your-downloaded-ndk-21e>

Validate Your Config

Use youi-tv doctor to validate your configuration. Make any changes needed to meet the requirements.

Run Your App

If it’s not already running, start the Metro bundler (Yarn server) from your development platform.

yarn start  # can be from any folder in your project

Connect your device to your development computer, or choose to use the Android Studio emulator.

Generate, build, deploy, and launch the Android project.

cd MyApp
youi-tv run -p android

Your single-source app is now able to run on both your development platform and a mobile device.

It doesn’t look quite as nice on the phone as it does on your development platform. Let’s fix this.

Device Form Factor

As you no doubt noticed, the app that looked great as a landscape desktop app has some display issues on your mobile phone. It’s even worse if you rotate your phone to landscape mode.

Our initial app doesn't look quite right on Android. Let's Fix it.

A clever way to approach this problem is to use the custom FormFactor RN module that comes with You.i Platform. With this module, we can make our app behave differently for each type of form factor it supports.

To fix the problems we saw above, we’ll employ a stylesheet per form factor. Conveniently, index.youi.js already imports the FormFactor component. Take a look at the list of imports.

FormFactor returns one of: TV, Mobile, or Tablet. By default, You.i Platform development platforms report themselves as “TV”, so let’s create a TV stylesheet. Tablet and Mobile can share a second (default) stylesheet.

Add a new variable to your YiReactApp component near the top of index.youi.js that checks the current form factor and uses that to choose a stylesheet.

platformStyles = FormFactor.select({
  TV: stylesTV,
  default: stylesTouch
});

Add stylesheets for our new styles stylesTv and stylesTouch by pasting the following at the bottom of index.youi.js, just above our current styles stylesheet.

const stylesTV = StyleSheet.create({
  bodyText: {
    fontSize: 20
  },
  headlineText: {
    fontSize: 30,
    textAlign: "center",
    marginBottom: 15
  }
});

const stylesTouch = StyleSheet.create({
  bodyText: {
    fontSize: 7
  },
  headlineText: {
    fontSize: 10,
    textAlign: "center",
    marginBottom: 10
  }
});

Also, take a look at the initial styles stylesheet at the bottom of index.youi.js. Notice that the default app created when you run youi-tv init already uses FormFactor to determine a height and width for the image.

image: {
  height: FormFactor.isTV ? 225 : 75,
  width: FormFactor.isTV ? 225 : 75,
  resizeMode: "contain"
},

Together, the stylesheets above configure image size, font sizes, and margins that are smaller for touch devices.

Update your app to use these new styles by swapping styles.<stylename> with this.platformStyle.<stylename> in each of the three text components.

<View style={[styles.bodyContainer, themeStyles.body]} focusable={true} accessible={true}>
  <Text
    style={[this.platformStyles.headlineText, themeStyles.headlineText]}
    accessibilityLabel="Welcome to your first {PlatformName.name} You I React Native app"
  >
    Welcome to your first {PlatformName.name} You.i React Native app!
  </Text>
  <Text
    style={[this.platformStyles.bodyText, themeStyles.bodyText]}
  >
    For more information on where to go next visit
  </Text>
  <Text
    style={[this.platformStyles.bodyText, themeStyles.bodyText]}
    accessibilityLabel="https://developer dot you i dot tv"
  >
    https://developer.youi.tv
  </Text>
</View>

Because bodyText and headlineText are now being used from the specific form factor style sheets, you can remove these from the original styles stylesheet. This step is optional, but helps keep your code clean.

Run your app again to see an improvement in some aspects, but the button text is still too large.

Replace the contents of button.js with this version that includes a stylesheet based on the form factor.

import React from "react";
import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
import { FocusManager, FormFactor } from "@youi/react-native-youi";

const Button = ({
  buttonStyle,
  defaultFocus,
  onPress,
  textStyle,
  title
}) => {
  const styles = FormFactor.select({
    TV: stylesTV,
    default: stylesTouch
  });

  return (
    <TouchableWithoutFeedback
      onPress={onPress}
      ref={ref => ref && defaultFocus && FocusManager.focus(ref)}
    >
      <View style={[styles.button, buttonStyle]}>
        <Text style={[styles.buttonText, textStyle]}>{title}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

const stylesTouch = StyleSheet.create({
  button: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 10
  }
});

const stylesTV = StyleSheet.create({
  button: {
    paddingHorizontal: 30,
    paddingVertical: 10,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 20
  }
});
export default Button;

Run your app on both your development environment and on Android. It now looks great on both!

The app now looks great on both platforms.

Even if you rotate the screen to portrait.

The app also looks great in portrait mode.

If You Had Issues

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.