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.

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

Installation

Install Flexn Create package and it's peer dependencies

Yarn

yarn add @flexn/create
yarn add @flexn/shopify-flash-list

NPM

npm install @flexn/create
npm install @flexn/shopify-flash-list

Setup

React Native

Add this snippet to your MainActivity.java or MainActivity.kt

Java

import io.flexn.create.TvRemoteHandlerModule
import android.view.KeyEvent

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    TvRemoteHandlerModule.getInstance().onKeyEvent(event, "up");

    return super.onKeyUp(keyCode, event);
}

@Override
public boolean onKeyLongPress(int keyCode, KeyEvent event) {
    TvRemoteHandlerModule.getInstance().onKeyEvent(event, "longPress");

    return super.onKeyLongPress(keyCode, event);
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_DPAD_RIGHT || keyCode == KeyEvent.KEYCODE_DPAD_LEFT || keyCode == KeyEvent.KEYCODE_DPAD_UP || keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
        event.startTracking();
        TvRemoteHandlerModule.getInstance().onKeyEvent(event, "down");

        return true;
    }

    TvRemoteHandlerModule.getInstance().onKeyEvent(event, "down");

    return super.onKeyDown(keyCode, event);
}

Kotlin

import io.flexn.create.TvRemoteHandlerModule
import android.view.KeyEvent

override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {
    TvRemoteHandlerModule.getInstance().onKeyEvent(event, "up");

    return super.onKeyUp(keyCode, event)
}

override fun onKeyLongPress(keyCode: Int, event: KeyEvent?): Boolean {
    TvRemoteHandlerModule.getInstance().onKeyEvent(event,  "longPress");

    return super.onKeyLongPress(keyCode, event)
}

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    if (keyCode == KeyEvent.KEYCODE_DPAD_RIGHT || keyCode == KeyEvent.KEYCODE_DPAD_LEFT || keyCode == KeyEvent.KEYCODE_DPAD_UP || keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
        event?.startTracking();
        TvRemoteHandlerModule.getInstance().onKeyEvent(event,"down");

        return true;
    }

    TvRemoteHandlerModule.getInstance().onKeyEvent(event, "down");

    return super.onKeyDown(keyCode, event)
}

Renative

Add this snippet to your renative.json plugins section

"@flexn/create": {
    "androidtv": {
        "activityImports": [
            "io.flexn.create.TvRemoteHandlerModule",
            "android.view.KeyEvent;"
        ],
        "activityMethods": [
            "override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {",
            "TvRemoteHandlerModule.getInstance().onKeyEvent(event, \"up\");",
            "return super.onKeyUp(keyCode, event)",
            "}",
            "override fun onKeyLongPress(keyCode: Int, event: KeyEvent?): Boolean {",
            "   TvRemoteHandlerModule.getInstance().onKeyEvent(event,  \"longPress\");",
            "    return super.onKeyLongPress(keyCode, event)",
            "}",
            "override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {",
            "if(keyCode == KeyEvent.KEYCODE_DPAD_RIGHT || keyCode == KeyEvent.KEYCODE_DPAD_LEFT || keyCode == KeyEvent.KEYCODE_DPAD_UP || keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {",
            "event?.startTracking();",
            "TvRemoteHandlerModule.getInstance().onKeyEvent(event,\"down\");",
            "return true;",
            "}",
            "TvRemoteHandlerModule.getInstance().onKeyEvent(event, \"down\");",
            "return super.onKeyDown(keyCode, event)",
            "}"
        ],
        "package": "io.flexn.create.FlexnCreatePackage",
        "projectName": "flexn-io-create"
    },
    "firetv": {
        "activityImports": [
            "io.flexn.create.TvRemoteHandlerModule",
            "android.view.KeyEvent;"
        ],
        "activityMethods": [
            "override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {",
            "TvRemoteHandlerModule.getInstance().onKeyEvent(event, \"up\");",
            "return super.onKeyUp(keyCode, event)",
            "}",
            "override fun onKeyLongPress(keyCode: Int, event: KeyEvent?): Boolean {",
            "   TvRemoteHandlerModule.getInstance().onKeyEvent(event,  \"longPress\");",
            "    return super.onKeyLongPress(keyCode, event)",
            "}",
            "override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {",
            "if(keyCode == KeyEvent.KEYCODE_DPAD_RIGHT || keyCode == KeyEvent.KEYCODE_DPAD_LEFT || keyCode == KeyEvent.KEYCODE_DPAD_UP || keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {",
            "event?.startTracking();",
            "TvRemoteHandlerModule.getInstance().onKeyEvent(event,\"down\");",
            "return true;",
            "}",
            "TvRemoteHandlerModule.getInstance().onKeyEvent(event, \"down\");",
            "return super.onKeyDown(keyCode, event)",
            "}"
        ],
        "package": "io.flexn.create.FlexnCreatePackage",
        "projectName": "flexn-io-create"
    },
    "tvos": {
        "podName": "FlexnCreate"
    },
    "version": "0.21.0-alpha.0",
    "webpack": {
        "moduleAliases": true,
        "modulePaths": true
    }
},
"@flexn/shopify-flash-list": {
    "android": {
        "package": "com.shopify.reactnative.flash_list.ReactNativeFlashListPackage"
    },
    "androidtv": {
        "package": "com.shopify.reactnative.flash_list.ReactNativeFlashListPackage"
    },
    "firetv": {
        "package": "com.shopify.reactnative.flash_list.ReactNativeFlashListPackage"
    },
    "ios": {
        "podName": "RNFlashList"
    },
    "tvos": {
        "podName": "RNFlashList"
    },
    "macos": {
        "podName": "RNFlashList"
    },
    "webpack": {
        "modulePaths": true,
        "moduleAliases": true,
        "nextTranspileModules": ["@flexn/shopify-flash-list"]
    },
    "version": "1.4.8"
}