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

With Android Studio installed, check for Android SDK requirements in our Target Platforms section. To install Android SDK platforms and tools see the Android Studio SDK Manager documentation.

You.i Platform works with Android NDK 21d through 21e.

If you don’t already have a supported version of Android NDK installed, in the Android Studio menu go to Preferences > Appearance & Behaviour > System Settings > Android SDK > SDK Tools and check Show Package Details. Under the NDK (Side by Side) dropdown, choose 21.4.7075529, which is version 21e. Click Apply, confirm the change, and accept any license agreements.

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
# Replace with your NDK version if required
export ANDROID_NDK_HOME=~/Library/Android/sdk/ndk/21e
export JAVA_HOME='/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home'
export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_NDK_HOME

# add to your configuration file (~/.bash_profile, ~/.zshenv, etc.) and reload
export ANDROID_HOME=~/Android/sdk
# Example path; replace with your install location
export JAVA_HOME='/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home'
# Replace with your NDK version if required
export ANDROID_NDK_HOME=~/Library/Android/sdk/ndk/21e
export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME/emulator:$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
# Replace with your NDK version if required
ANDROID_NDK_HOME=C:\Users\<Username>\AppData\Local\Android\sdk\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 run 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.

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!

Even if you rotate the screen to landscape.

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.