Introduction

⚡️ Flexn Create will help you create a multiplatform app in no time.

💵 Building multiple projects to support different platforms is expensive and time-consuming. Instead, focus on your content and just import components from Flexn Create.

📺 Built-in focus control system allows for better control of your application behavior on the big screen.

Getting Started

Welcome to the Flexn Create documentation!

If you're new to Flexn we recommend starting with the learning course.

The interactive course will guide you through everything you need to know to use Flexn Create.

System requirements

• Node.js 12.22.0 or later
• Xcode on MacOS (not available for download on Windows or Linux) for running iOS and tvOS applications
• Android Studio for Android applications

Setup

To begin with, it's recommended to first install ReNative:

Yarn

yarn global add rnv

NPM

npm install rnv -g

Before you get into building complex applications, we suggest starting with a template as it already prepares some things for you. Based on your skill, requirements, you can choose one of the three:

• Flexn template (you can build it yourself following the tutorial)
• Hello World template from ReNative - a simple application with some basic navigation structure
• Blank template from ReNative (recommended for first-timers)

During rnv new you will be given an option to choose between these templates (or you could type the name of your custom one, but we will not do that this time around).

For tutorial purposes starting off with the most basic - Blank template is recommended.

rnv new

If you chose Hello World or Blank templates, you also need to install Flexn Create. Add the code below in renative.json, which is located in the root of the project folder, under plugins:

"plugins": {
"@flexn/create": {
    "version": "0.11.0",
    "webpack": {
        "modulePaths": true,
        "moduleAliases": true
    },
    "tvos": {
        "podName": "FlexnCreate"
    },
    "androidtv": {
        "package": "io.flexn.create.FlexnCreatePackage",
        "projectName": "flexn-io-create",
        "activityImports": [
            "io.flexn.create.TvRemoteHandlerModule",
            "android.view.KeyEvent;"
        ],
        "activityMethods": [
            "override fun dispatchKeyEvent(event: KeyEvent): Boolean {",
            "   if (event.action == KeyEvent.ACTION_DOWN || event.action == KeyEvent.ACTION_UP) {",
            "       TvRemoteHandlerModule.getInstance().onKeyEvent(event);",
            "   }",
            "   return super.dispatchKeyEvent(event);",
            "}"
        ]
    },
    "firetv": {
        "package": "io.flexn.create.FlexnCreatePackage",
        "projectName": "flexn-io-create",
        "activityImports": [
            "io.flexn.create.TvRemoteHandlerModule",
            "android.view.KeyEvent;"
        ],
        "activityMethods": [
            "override fun dispatchKeyEvent(event: KeyEvent): Boolean {",
            "   if (event.action == KeyEvent.ACTION_DOWN || event.action == KeyEvent.ACTION_UP) {",
            "       TvRemoteHandlerModule.getInstance().onKeyEvent(event);",
            "   }",
            "   return super.dispatchKeyEvent(event);",
            "}"
        ]
    }