Test on Multiple Platforms

Let’s get into one of the best parts about You.i Engine One: multi-platform support. You.i Engine One acts as a bridge for your code on any of the following platforms: Android (mobile and TV), Apple (iOS, tvOS), PlayStation, Xbox, LG, Tizen, Roku, and Amazon Fire TV.

Apps written with You.i Engine One work on Android (mobile and TV), Apple (iOS, tvOS, osx), PlayStation, XBOX, Windows, LG, Tizen, Roku, and Amazon FireTV.

Use the instructions below to run your app on an Android device or emulator.

Test on Android

Pro Tip: To load your application on an Android device, you’ll need to install Android Studio with Android SDK API levels 16, 19, and 21 to 28 (Android 4.1, 4.4, and 5.0 to 10.0). You’ll also need Android NDK version 17c, which you may need to retrieve from Android’s NDK archives

  1. Configure the following environment variables.

    • # add to your ~/.bash_profile and reload
      export ANDROID_HOME=~/Library/Android/sdk
      export ANDROID_NDK_HOME=<path-to-your-downloaded-ndk-17c>
      export JAVA_HOME=<path-to-jdk>  # you can use the Android Studio JDK: "/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"
      export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_NDK_HOME
      
    • # add to your ~/.bashrc or shell config and reload
      export ANDROID_HOME=~/Android/sdk
      export ANDROID_NDK_HOME=<path-to-your-downloaded-ndk-17c>
      export JAVA_HOME=<path-to-jdk> # you can use the one installed with Android Studio
      export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_NDK_HOME
      
    • # set these environment variables (usually done from system settings)
      JAVA_HOME=C:Program Files\Java\jdk<version>
      ANDROID_HOME=C:Users\<Username>\AppData\Local\Android\sdk
      JAVA_HOME=<path-to-jdk>
      ANDROID_NDK_HOME=<path-to-your-downloaded-ndk-17c>
      
  2. Use youi-tv doctor to validate your Android configuration. Make any changes needed to meet the requirements.

  3. Generate and build the Android project.
    cd MyApp/youi
    ./generate.rb -p android
    ./build.rb -b build/android   
    # or, on linux use "./build.rb -b build/android/Debug"
    
  4. Connect your device to your development computer, or choose to use the Android Studio emulator.

    Note: Since we have no need to edit any files right now, you don’t need to open the project in Android Studio. To use the emulator (virtual device), start it from the Android Studio splash screen by clicking Configure > AVD Manager.

  5. Run the following command to load your app onto your mobile device or simulator.
    cd build/android/project
    adb devices # to make sure your device is connected & accessible
    ./gradlew installDebug
    
  6. If not already running, start the Metro bundler (yarn server) from your development platform.
    yarn start  # can be from any folder in your project
    

    Note: Because we’re running the yarn server on your development computer, both it and your mobile device must be on the same WiFi network.

  7. Start the application. Go to the device and launch your application, or use the command line below.

    ./gradlew startApplication
    

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 Engine One. With this module, we can make our app behave differently for each type of form factor it supports.

Note: See the docs for a list of our custom modules and custom components.

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

  2. FormFactor returns one of: TV, Mobile, or Tablet. For this example, let’s consider your development platform as a “TV” and give it its own stylesheet. Tablet and Mobile can share a second (default) stylesheet.

    Add a new variable to your component that checks the current form factor and uses that to choose a stylesheet.

    platformStyles = FormFactor.select({
      TV: stylesTV,
      default: stylesTouch
    });
    
  3. 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
      }
    });
    
  4. Also, take a look at the initial styles stylesheet at the bottom of index.youi.js. Notice that the output from 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"
    },
    

    Note: Images from URIs always need their size explicitly specified rather than relying on them growing to fill their parent view.

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

  5. Update your app to use these new styles by adding the styles for all three text components.

    <View style={[styles.bodyContainer, themeStyles.body]}>
      <Text style={[this.platformStyles.headlineText, themeStyles.headlineText]}>
        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]}>https://developer.youi.tv</Text>
    </View>
    
  6. 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.

  7. 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 { TouchableOpacity } from "react-native";
    import { FocusManager, FormFactor, StyleSheet, Text, View } from "@youi/react-native-youi";
    
    export const Button = ({
      buttonStyle,
      defaultFocus,
      onPress,
      textStyle,
      title
    }) => {
      const styles = FormFactor.select({
        TV: stylesTV,
        default: stylesTouch
      });
    
      return (
        <TouchableOpacity
          onPress={onPress}
          ref={ref => ref && defaultFocus && FocusManager.focus(ref)}
        >
          <View style={[styles.button, buttonStyle]}>
            <Text style={[styles.buttonText, textStyle]}>{title}</Text>
          </View>
        </TouchableOpacity>
      );
    };
    
    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
      }
    });
    
  8. 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 now looks great on both platforms.

Fantastic! You’ve completed our getting started tutorial. Take a look at the rest of our documentation for tips and information on how to develop the rest of your You.i RN application.

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