Get Started on iOS

Apple’s iOS is one of the many target platforms for You.i Platform apps. Use the instructions below to run our quick start app on an Apple iOS device.

Install Prerequisites

Before You Start

To build a You.i React Native app for iOS, you’ll need to have a macOS development platform. Follow macOS Environment Setup to install prerequisites.

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 ios-deploy

Make sure you have the ios-deploy executable installed. This will automatically open your app on your connected iOS device when you run the youi-tv run command.

To install this executable, run:

brew install ios-deploy

Configure Environment Variables

To build iOS apps with You.i Platform, you need an Apple Developer ID. Configure your shell by setting the DEVELOPMENT_TEAM_ID environment variable.

DEVELOPMENT_TEAM_ID=<Apple Development Team ID>

You’ll also need to go into Xcode, under Xcode > Preferences > Accounts, and add your Development Team ID information.

Validate Your Config

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

Deploy to iOS

Connect Your iOS Device

You.i Platform supports development with Xcode version 12.x to 13.x. We always recommend you use the latest supported version, since Apple usually requires this version when you submit your app to their store.

Complete the following steps to pair your iOS device with your Mac:

1. Connect the iOS device to your Mac using a cable.
2. In Xcode, select Window > Devices and Simulators. Under Devices, you’ll see your Apple device name.

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

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

cd MyApp
youi-tv run -p ios

If you have an iOS device connected to your development computer when you run this command, your app will open on it automatically. If you don’t have an iOS device, you can open the generated MyApp.xcodeproj with Xcode and run your app in an iOS simulator.

Remember to use the youi-tv run -p ios command to update the build after each change.

Your single-source app is now able to run on an iOS 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 iOS. It now looks great on both!

Even if you rotate the screen to portrait.

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.