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
- NPM
yarn global add rnv
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);",
"}"
]
}