Configurations

build universal cross-platform apps with react native

Quick Start • Features • Platforms • Templates • Plugins • Integrations • Configurations • Architecture • Project Config • App Configs • Build Hooks • CLI • ReNative CLI • Developing ReNative Locally • Common Issues • Runtime • Contributing • Discussions • Contributors • Backers • Sponsors • Community • Stats • License

iOS	tvOS	Android TV	macOS

Android	Web	Tizen TV	LG webOS

FirefoxOS	Windows	Firefox TV	KaiOS

Tizen Mobile	Tizen Watch	Android Wear	...
			...

The universal development SDK to build multi-platform projects with react native. Includes latest iOS, tvOS, Android, Android TV, Web, Tizen TV, Tizen Watch, LG webOS, macOS/OSX, Windows, KaiOS, Firefox OS and Firefox TV platforms

Ideal starting point for advanced multi-platform projects.
Uses latest vanilla native project templates including Xcode with Swift and Android with Kotlin support
Includes bleeding edge dependencies configured to work with each other

🚀 Quick Start

1) Install ReNative CLI (rnv)

$ npm install rnv -g

2) Create new app:

$ rnv new

Follow steps in the terminal

3) Create 3 separate terminal tabs/windows. use one to keep bundler running and other one for build commands

TAB 1:

Start the bundler

$ rnv start

TAB 2:

Run your first ios app

$ rnv run -p ios

TAB 3:

Run your first web app

$ rnv run -p web

open: http://0.0.0.0:8080/

🎉 Congratulations! You're now multi-platform developer! 🎉

All app code is located in ./src directory

RNV + NPX

⚠️

It is recommended that after initial project setup you start using npx rnv ... prefix instead of rnv ...

This ensures that every project uses correct version of rnv to avoid potential compatibility issues

make sure you have npx installed globally via npm install npx -g

Features

Build app blazingly fast with built-in features:

Standard react-native community plugins
React-Navigation Support
Embedded 0 configuration custom font support
SVG Icon Support
Hot-reload development / debugging
Deployment Ready project
Generated projects can be opened and profiled in standard IDEs like Xcode, Android Studio, Tizen IDE etc

Supported OS

Requirements

Node 10.13.0 or newer
NPM 6.4.1 or newer
Android Studio (if you want to develop for Android)
Xcode (if you want to develop for iOS/tvOS)
Tizen Studio (if you want to develop for Tizen)
WebOS SDK (if you want to develop for WebOS)
KaiOS SDK (if you want to develop for KaiOS)

Templates / Starters

Built-in

Hello World:

https://www.npmjs.com/package/renative-template-hello-world

Blank:

https://www.npmjs.com/package/renative-template-blank

Community

Chat App:

https://www.npmjs.com/package/@reactseals/renative-template-chat

Plugins

ReNative Supports standard community driven react-native plugins you can use to enhance the functionality of your apps:

Get list of all available community plugins. (NOTE you can always add new one manually into projectConfig/plugins.json)

$ rnv plugin list

you should get colorised overview similar to this:

add new plugin to your project:

$ rnv plugin add

and follow the command prompt steps

Update your current plugins with latest ones from ReNative

$ rnv plugin update

and follow the command prompt steps

Custom Plugin Support

You can configure multiple React Native plugins without need to update project blueprints. default location of plugin configs is ./projectConfig/plugins.json

Example:

{
    "plugins": {
      "renative": "source:rnv",
      "react": "source:rnv",
      "react-art": "source:rnv",
      "react-dom": "source:rnv",
      "react-native": "source:rnv",
      "react-native-web": "source:rnv",
      "react-native-web-image-loader": "source:rnv",
      "react-native-gesture-handler": "source:rnv",
      "react-navigation": "source:rnv",
      "react-navigation-tabs": "source:rnv",
      "react-native-reanimated": "source:rnv",
      "react-native-vector-icons": "source:rnv"
    }
}

You can also customise default plugin configuration:

{
    "plugins": {
        "react-native-gesture-handler": {
            "version": "0.1.0",
            "ios": {
                "podName": "RNGestureHandler",
                "path": "node_modules/react-native-gesture-handler"
            },
            "android": {
                "package": "com.swmansion.gesturehandler.react.RNGestureHandlerPackage",
                "path": "node_modules/react-native-gesture-handler/android"
            }
        }
    }
}

Plugin Spec:

{
  "pugin-name": {
      "version": "",
      "enabled": true,
      "ios": {},
      "android": {},
      "webpack": {
          "modulePaths": [],
          "moduleAliases": []
      }
  }
}

Configurations

Project Config

./projectConfig folder is used to configure your project properties which can be used in appConfigs / buildFlavours

.
├── projectConfig               # Project configuration files/assets
    ├── fonts                   # Folder for all custom fonts
    ├── fonts.json              # Fonts configuration
    ├── permissions.json        # Permissions configuration
    └── plugins.json            # React Native Plugins configuration

App Configs

./appConfigs offers powerful configuration system which allows you to configure various flavours in your projects.

./appConfigs/APP_ID/config.json spec:

{
  "id": "APP_ID",
  "common": {
    "title": "",
    "description": "",
    "author": {
      "name": ""
    },
    "includedPlugins": ["*"],
    "includedFonts": ["*"]
  },
  "platforms": {

  }
}

Re-Generate platform projects (for helloWorld app config platforms):

rnv platform configure -c helloWorld

Configure your multi-platform app based on ./appConfigs/helloWorld configuration:

rnv configure -c helloWorld -u

Android based config

Applies for android, androidtv, androidwear

For appConfigs:

{
  "entryFile": "",
  "getJsBundleFile": "",
  "universalApk": true,
  "multipleAPKs": false,
  "minSdkVersion": 21,
  "backgroundColor": "",
  "id": "",
  "signingConfig": "",
  "bundleAssets": false,
  "permissions": [],
  "bundleAssets": true,
  "bundleIsDev": true,
  "buildSchemes": {}
}

For plugins:

{
    "package": "",
    "path": "",
    "AndroidManifest": {},
    "BuildGradle": {},
    "AppBuildGradle": {}
}

Apple based config

Applies for ios, tvos

For appConfigs:

{
  "entryFile": "",
  "backgroundColor": "",
  "id": "",
  "bundleAssets": false,
  "permissions": [],
  "bundleAssets": true,
  "bundleIsDev": true,
  "teamID": "",
  "scheme": "",
  "permissions": ["*"],
  "orientationSupport": {
    "phone": [
      "UIInterfaceOrientationPortrait",
      "UIInterfaceOrientationPortraitUpsideDown",
      "UIInterfaceOrientationLandscapeLeft",
      "UIInterfaceOrientationLandscapeRight"
    ],
    "tab": [
      "UIInterfaceOrientationPortrait",
      "UIInterfaceOrientationPortraitUpsideDown",
      "UIInterfaceOrientationLandscapeLeft",
      "UIInterfaceOrientationLandscapeRight"
    ]
  },
  "provisioningStyle": "",
  "systemCapabilities": {},
  "entitlements": {},
  "buildSchemes": {}
}

For plugins:

{
    "podName": "",
    "path": "",
    "appDelegateApplicationMethods": {
      "didFinishLaunchingWithOptions": [],
      "open": [],
      "supportedInterfaceOrientationsFor": [],
      "didReceiveRemoteNotification": [],
      "didFailToRegisterForRemoteNotificationsWithError": [],
      "didReceive": [],
      "didRegister": [],
      "didRegisterForRemoteNotificationsWithDeviceToken": [],
    }
}

Web based config

Applies for web

{
  "id": "",
  "entryFile": "",
  "title": "",
  "webpackConfig": {
    "devServerHost": "",
    "customScripts": []
  },
  "buildSchemes": {}
}

Global Configurations

rnv will create config folder at this location: ~/.rnv/config.json

Open the file and edit SDK paths of platforms you plan to use:

{
    "sdks": {
        "ANDROID_SDK": "/Users/<USER>/Library/Android/sdk",
        "ANDROID_NDK": "/Users/<USER>/Library/Android/sdk/ndk-bundle",
        "IOS_SDK": "No need. Just install Xcode",
        "TIZEN_SDK": "/Users/<USER>/tizen-studio",
        "WEBOS_SDK": "/Users/<USER>/Library/webOS_TV_SDK",
        "KAIOS_SDK": "/Applications/Kaiosrt.app"
    }
}

You can also edit your preferred emulator targets (allows you to run $ rnv target launch -p <PLATFORM> without -p <TARGET>)

{
    "defaultTargets": {
        "android": "Nexus_5X_API_26",
        "androidtv": "Android_TV_720p_API_22",
        "androidwear": "Android_Wear_Round_API_28",
        "ios": "iPhone 6",
        "tvos": "Apple TV 4K",
        "tizen": "T-samsung-5.0-x86",
        "tizenwatch": "W-5.0-circle-x86",
        "webos": "emulator"
    }
}

App Signing

For Android release signing, ReNative creates ~/GLOBAL_RNV/PROJECT_NAME/APP_CONFIG_ID/config.private.json file with path to your release keystore file and its credentials.

{
  "android": {
    "storeFile": "./release.keystore",
    "storePassword": "************",
    "keyAlias": "************",
    "keyPassword": "************"
  }
}

Then you can run the release app by:

rnv configure -p android
rnv run -p android -s release

Build Flavours

You can configure different app ID, Title etc. with buildScheme field in you appConfig file.

Example:

"buildSchemes": {
  "debug": {
    "id": "renative.helloworld.debug",
    "runScheme": "Debug",
    "bundleAssets": false,
    "bundleIsDev": true
  },
  "release": {
    "id": "renative.helloworld.release",
    "runScheme": "Release",
    "bundleAssets": true,
    "bundleIsDev": false
  }
}

this will allow you to build 2 separate iOS apps with slightly different configurations:

$ rnv run -p ios -s debug (-s debug is DEFAULT option so you don't have to add it every time)

and

$ rnv run -p ios -s release

Build Flavour Injectors

Sometimes you need to add buildFlavour specific file into project before build. ie Firebase, Crashlytics configs and so on

you can achieve by creating folder with postfix <PLATFORM>@<BUILD_SCHEME_NAME>

.
├── appConfigs
    └── helloWorld
        ├── assets
        ├── plugins
        │   └── some-plugin
        │       └── builds
        │            ├── android@release
        │            │   └── fileToBeInjectedInReleaseMode.txt
        │            └── android@debug
        │                └── fileToBeInjectedInDebugMode.txt
        └── builds
            ├── android@release
            │   └── fileToBeInjectedInReleaseMode.txt
            └── android@debug
                └── fileToBeInjectedInDebugMode.txt

Custom appConfig Location per Project

For decoupled project you might need to point to custom appConfig location per project. because that location might be different for each developer you can create rnv-config.local.json in your project root (git ignored by default) which points to your local appConfig folder.

Contents of the file should follow this format:

{
    "appConfigsPath": "/Users/<USER>/my-local-app-config-folder"
}

Build Hooks

Sometimes you need to extend CLI functionality with custom build scripts. ReNative makes this easy for you.

create file: ./buildHooks/src/index.js with this script (NOTE: every top-level method must return Promise):

import chalk from 'chalk';

const hooks = {
    hello: c =>
        new Promise((resolve, reject) => {
            console.log(`\n${chalk.yellow('HELLO FROM BUILD HOOKS!')}\n`);
            resolve();
        }),
};

const pipes = {};

export { pipes, hooks };

then simply run:

rnv hooks run -x hello

ReNative will transpile and execute it in real time!

index.js is required entry point but you can create more complex scripts with multiple files/imports.

every top-level method gets invoked with ReNative config object containing all necessary build information

Using RNV in Build Hooks

You can utilize RNV CLI functionality inside of build hooks by simply importing rnv packages:

import {
    Constants, Runner, App, Platform, Target, Common, Exec,
    PlatformTools, Doctor, PluginTools, SetupTools, FileUtils
} from 'rnv'

Build Pipes

Sometimes you want to execute specific hook automatically before/after certain ReNative build phase.

To get list of available hook pipes run:

$ rnv hooks pipes

You can connect your hook method to one of predefined pipes in your ./buildHooks/src/index.js:

const pipes = {
    'configure:before': hooks.hello,
};

Example code above will execute hooks.hello() before every time you run $ rnv configure commands

Run Multiple Pipes on One Hook

const pipes = {
    'configure:before': [hooks.hello, hooks.someOtherHook],
};

List of available pipe hooks:

'run:before', 'run:after',
'log:before', 'log:after',
'start:before', 'start:after',
'package:before', 'package:after',
'package:before', 'package:after',
'build:before', 'build:after',
'deploy:before', 'deploy:after',
'configure:before', 'configure:after',
'platform:configure:before', 'platform:configure:after'

List of available config props injected into hooks methods:

//ROOT
c.program;
c.process;
c.command;
c.subCommand;
c.appId;
c.platform;
//FILES
c.files.projectConfig;
c.files.rnvPackage;
//PATHS
c.paths.rnvRootFolder;
c.paths.rnvHomeFolder;
c.paths.rnvPlatformTemplatesFolder;
c.paths.rnvPluginTemplatesFolder;
c.paths.rnvPluginTemplatesConfigPath;
c.paths.rnvPackagePath;
c.paths.rnvPluginsFolder;
c.paths.projectRootFolder;
c.paths.buildHooksFolder;
c.paths.buildHooksDistFolder;
c.paths.buildHooksIndexPath;
c.paths.buildHooksDistIndexPath;
c.paths.projectSourceFolder;
c.paths.projectNpmLinkPolyfillPath;
c.paths.homeFolder;
c.paths.globalConfigFolder;
c.paths.globalConfigPath;
c.paths.projectConfigPath;
c.paths.projectConfigLocalPath;
c.paths.projectPackagePath;
c.paths.rnCliConfigPath;
c.paths.babelConfigPath;
c.paths.projectConfigFolder;
c.paths.projectPluginsFolder;
c.paths.globalConfigFolder;
c.paths.globalConfigPath;
c.paths.appConfigsFolder;
c.paths.entryFolder;
c.paths.platformTemplatesFolders;
c.paths.platformAssetsFolder;
c.paths.platformBuildsFolder;
c.paths.projectPluginsFolder;
c.paths.rnvNodeModulesFolder;
c.paths.projectNodeModulesFolder;
c.paths.runtimeConfigPath;
c.paths.projectConfigFolder;
c.paths.pluginConfigPath;
c.paths.permissionsConfigPath;
c.paths.fontsConfigFolder;

Runtime

ReNative provides runtime SDK library to support multiplatform development

import { Api } from 'renative'

⚠️ NOTE: this library is under development!

Architecture

Build Process

Folder Structure (Generated Project)

.
├── appConfigs                  # Application flavour configuration files/assets
│   └── helloWorld              # Example application flavour
│       ├── assets              # Platform assets injected to `./platformAssets`
│       ├── builds              # Platform files injected to `./platformBuilds`
│       └── config.json         # Application flavour config
├── platformAssets              # Generated cross-platform assets
├── platformBuilds              # Generated platform app projects
├── projectConfig               # Project configuration files/assets
│   ├── fonts                   # Folder for all custom fonts
│   ├── fonts.json              # Fonts configuration
│   ├── permissions.json        # Permissions configuration
│   └── plugins.json            # React Native Plugins configuration
└── src                         # Source files

Override Mechanism

ReNative support flexible override mechanism which allows you customise your project to great degree

Config Values Overrides

./appConfigs/APP_ID/config.json RULES:

There are 3 levels of override entry objects for your props to fine-tune your app config:

.common //Applies for all platforms + all schemes
.platforms.YOUR_PLATFORM //Applies specific platforms + all schemes
.platforms.YOUR_PLATFORM.buildSchemes.YOUR_SCHEME //Applies for specific platform + specific scheme

Example:

{
  "common": {
    "MY_PROP": "Value1"
  },
  "platforms": {
    "ios": {
      "MY_PROP": "Value2 overrides Value1",
      "buildSchemes": {
        "debug": {
          "MY_PROP": "Value3 overrides Value 2"
        }
      }
    }
  }
}

Override Rules for json props:

Strings => Replaced
Numbers => Replaced
Arrays => Replaced
Objects => Merged by top level (not deep merge)

Example: https://github.com/pavjacko/renative/blob/master/packages/renative-template-hello-world/appConfigs/helloWorld/config.json#L4

Will be overridden by: https://github.com/pavjacko/renative/blob/master/packages/renative-template-hello-world/appConfigs/helloWorld/config.json#L59

File Overrides / Injectors

Every time you run RNV command, ReNative checks following "special" folders and copies contents of those into designated target folders

*/plugins/[PLUGIN_ID]
*/plugins/[PLUGIN_ID]/overrides -> special override allows you to override files in plugin itslef! (located ./node_modules)
*/builds/[PLATFORM]
*/fonts
*/assets/runtime
*/assets/[PLATFORM]

You can utilise above folders in following places:

./appConfigs/[APP_ID]
./projectConfig
~/.rnv/[PROJECT-NAME]/appConfigs/[APP_ID]
~/.rnv/[PROJECT-NAME]/projectConfig

Legend:

[PLATFORM] - specific platform key like ios, andoid, web, etc..
[APP_ID] - name of your folder in ./appConfigs which contains specific config.json file
[PROJECT-NAME] - name field in the root package.json file of your project
[PLUGIN_ID] - key of the plugin definced in ./projectConfig/plugins.json
~/.rnv - name of default global folder where local and sensitive information is stored. NOTE: this folder path can be customized via { "globalConfigFolder": "~/.myCustomGlobalFolder" } in rn-config.json of each project

Platform Builds Overrides

Project Scoped Build Override

./projectConfig/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

Project Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/projectConfig/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

App Config Scoped Build Override

./appConfigs/[APP_ID]/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

App Config Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/appConfigs/[APP_ID]/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

Plugin + Project Scoped Build Override

./projectConfig/plugins/[PLUGIN_ID]/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

Plugin + Project Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/projectConfig/plugins/[PLUGIN_ID]/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

Plugin + App Config Scoped Build Override

./appConfigs/[APP_ID]/plugins/[PLUGIN_ID]/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

Plugin + App Config Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/appConfigs/[APP_ID]/plugins/[PLUGIN_ID]/builds/[PLATFORM]/*/** => ./platformBuilds/[APP_ID]_[PLATFORM]/*/*

Platform Assets Overrides

Project Scoped Assets Override

./projectConfig/assets/runtime/*/** => ./platformAssets/runtime/*/*

Project Scoped Assets Override (Private Content)

~/.rnv/[PROJECT-NAME]/projectConfig/assets/runtime/*/** => ./platformAssets/runtime/*/*

App Config Scoped Build Override

./appConfigs/[APP_ID]/assets/runtime/*/** => ./platformAssets/runtime/*/*

App Config Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/appConfigs/[APP_ID]/assets/runtime/*/** => ./platformAssets/runtime/*/*

Plugin + Project Scoped Build Override

./projectConfig/plugins/[PLUGIN_ID]/assets/runtime/*/** => ./platformAssets/runtime/*/*

Plugin + Project Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/projectConfig/plugins/[PLUGIN_ID]/assets/runtime/*/** => ./platformAssets/runtime/*/*

Plugin + App Config Scoped Build Override

./appConfigs/[APP_ID]/plugins/[PLUGIN_ID]/assets/runtime/*/** => ./platformAssets/runtime/*/*

Plugin + App Config Scoped Build Override (Private Content)

~/.rnv/[PROJECT-NAME]/appConfigs/[APP_ID]/plugins/[PLUGIN_ID]/assets/runtime/*/** => ./platformAssets/runtime/*/*

Flavoured Builds

Combination of 2 features above allows you to configure and build large number of flavoured builds with almost no extra configuration

Platforms

iOS

Latest swift based Xcode project
Cocoapods Workspace ready
Swift 4.1 Support

Requirements

CocoaPods 1.5.3 or newer
Xcode for iOS development

Project Configuration

Feature	Version
Swift	`4.1`
Deployment Target	`11.4`

Run on Simulator

rnv start
rnv run -p ios

Run on Device

IMPORTANT: before you run ReNative app on the actual iOS device you MUST:

Have ios device connected on the same network as your dev machine
Have ios developer account properly configured with ability to generate provisioning profiles dynamically (Dynamic Signing)
Have correct TeamID assigned ..platforms.ios.teamID in your ./appConfigs/<YOUR_APP_CONFIG>/config.json

You can configure each buldScheme ie -s release in your config file ./appConfigs/<YOUR_APP_CONFIG>/config.json

rnv start
rnv run -p ios -d

Deploy on Device

This will run production version on your device (not connected to metro bundler) Same prerequisite as above applies here

rnv start
rnv run -p ios -s release -d

Advanced

Clean and Re-build platform project

rnv run -p ios -r

Launch app with specific iOS simulator

rnv run -p ios -t "iPhone 6 Plus"

Launch app with specific iOS simulator (let ReNative to give you the list of available options):

rnv run -p ios -t ?

Launch specific emulator :

rnv target launch -p ios -t "iPhone 8"

Launch specific emulator (let ReNative to give you the list of available options):

rnv target launch -p ios -t ?

Get list of all available devices

rnv target list -p ios

Get device/simulator logs

rnv log -p ios

Get device/simulator logs with filter

rnv log -p ios -f com.myapp

App Config

see: Apple based config

Android

Latest Android project
Kotlin Support
Support for Gradle 4.9

Requirements

Android Studio for Android development
Android SDK 23.0.1 or newer for Android development
Windows 10 Pro or a better variant if you want to start the emulator on a Windows machine. Windows Home or Educational do not support Hyper-V and that's required for starting the Android emulators

Project Configuration

Feature	Version
Gradle	`4.10.1`
Android Gradle	`3.3.1`
Kotlin	`1.3.20`
Target SDK	`27`

Emulators

You can create variety of emulators via Android Studio IDE

Run on Simulator

NOTE: make sure you have 1 android device connected or 1 emulator running

rnv start
rnv run -p android

Run on Device

rnv start
rnv run -p android -d

Deploy on Device

This will run production version on your device (not connected to metro bundler) You can configure each buldScheme ie -s release in your config file ./appConfigs/<YOUR_APP_CONFIG>/config.json

rnv start
rnv run -p android -s release -d

Advanced

Clean and Re-build platform project

rnv run -p android -r

Launch specific android emulator:

rnv target launch -p android -t Nexus_5X_API_26

Launch app with specific iOS simulator (let ReNative to give you the list of available options):

rnv run -p android -t ?

Launch specific emulator :

rnv target launch -p android -t Nexus_5X_API_26

Launch specific emulator (let ReNative to give you the list of available options):

rnv target launch -p android -t ?

Get list of all available devices

rnv target list -p android

Get device/simulator logs

rnv log -p android

Get device/simulator logs with filter

rnv log -p android -f com.myapp

App Config

see: Android based config

tvOS

Latest swift based Xcode project
Cocoapods Workspace ready
Swift 4.1 Support

Requirements

CocoaPods 1.5.3 or newer
Xcode for iOS development

Project Configuration

Feature	Version
Swift	`4.1`
Deployment Target	`11.4`

Run

rnv start
rnv run -p tvos

Advanced

Clean and Re-build platform project

rnv run -p tvos -r

Launch with specific tvOS simulator

rnv run -p tvos -t "Apple TV 4K"

App Config

see: Apple based config

Android TV

Latest Android project
Kotlin Support
Support for Gradle 4.9

Requirements

Android Studio for Android development
Android SDK 23.0.1 or newer for Android development

Project Configuration

Feature	Version
Gradle	`4.10.1`
Android Gradle	`3.3.1`
Kotlin	`1.3.20`
Target SDK	`27`

Run

NOTE: make sure you have 1 android device connected or 1 emulator running

rnv start
rnv run -p androidtv

Advanced

Clean and Re-build platform project

rnv run -p androidtv -r

Launch specific emulator:

rnv target launch -p androidtv -t Android_TV_720p_API_22

App Config

see: Android based config

Web

Supports Chrome, Safari, Firefox, IE10+

Requirements

no extra requirements required

Project Configuration

Feature	Version
Webpack	`3.11.0`
react-native-web	`0.9.1`
Babel Core	`7.1.2`

Run

rnv run -p web

RNV will run local server and attempt to open browser URL: http://0.0.0.0:8080/

If you only want to run server:

rnv start -p web

Build

rnv build -p web

your deployable web app folder will be located in ./platformBuilds/<APP_ID>_web/public

Advanced

Clean and Re-build platform project

rnv run -p web -r

Run with verbose logging:

rnv run -p web --info

Run app on custom port 9999:

rnv run -p web --port 9999

App Config

see: Web based config

Tizen TV

Latest Tizen project
Support for Tizen 5.0, 4.0, 3.0

Requirements

Tizen SDK 5.0
Make sure your CPU supports virtualization. Otherwise Tizen emulator might not start.
If you are deploying to a TV, follow this guide to set your TV in developer mode Link

Project Configuration

Feature	Version
Tizen Studio	`2.5`
Tizen SDK	`5.0`
react-native-web	`0.9.9`
Babel Core	`7.1.2`

Emulator

Make sure you have at least 1 TV VM setup

rnv target launch -p tizen -t T-samsung-5.0-x86

Run

rnv run -p tizen

Run on Device

rnv run -p tizen -d

Run in Browser

rnv run -p tizen --hosted

Advanced

Clean and Re-build platform project

rnv run -p tizen -r

Launch with specific Tizen simulator:

rnv run -p tizen -t T-samsung-5.0-x86

Tizen Watch

Latest Tizen project
Support for Tizen 5.0

Requirements

Tizen SDK 5.0

Project Configuration

Feature	Version
Tizen Studio	`2.5`
Tizen SDK	`5.0`
react-native-web	`0.9.9`
Babel Core	`7.1.2`

Emulator

Make sure you have at least 1 TV VM setup

rnv target launch -p tizenwatch -t W-5.0-circle-x86

Run

rnv run -p tizenwatch

Run on Device

rnv run -p tizenwatch -d

Run in Browser

rnv run -p tizenwatch --hosted

Advanced

Clean and Re-build platform project

rnv run -p tizenwatch -r

Launch with specific Tizen Watch simulator:

rnv run -p tizenwatch -t W-5.0-circle-x86

LG webOS

Latest LG webOS Project

Requirements

LG Emulator v3.0.0

Project Configuration

Feature	Version
react-native-web	`0.9.9`
Babel Core	`7.1.2`

Emulator

launch webOS emulator via CLI

rnv target launch -p webos -t emulator

launch webOS emulator Manually

usually located in something like:

<USER_PATH>/Library/webOS_TV_SDK/Emulator/v4.0.0/LG_webOS_TV_Emulator_RCU.app

Run

Run on Simulator

rnv run -p webos

Run on Device

rnv run -p webos -d

Run in Browser

rnv run -p webos --hosted

Tizen Mobile

Latest Tizen project
Support for Tizen 5.0, 4.0, 3.0

Requirements

Tizen SDK 5.0
Make sure your CPU supports virtualization. Otherwise Tizen emulator might not start.
If you are deploying to a TV, follow this guide to set your TV in developer mode Link

Project Configuration

Feature	Version
Tizen Studio	`2.5`
Tizen SDK	`5.0`
react-native-web	`0.9.9`
Babel Core	`7.1.2`

Emulator

Make sure you have at least 1 TV VM setup

rnv target launch -p tizenmobile -t M-5.0-x86

Run

Run on Simulator

rnv run -p tizenmobile

Run on Device

rnv run -p tizenmobile -d

Run in Browser

rnv run -p tizenmobile --hosted

Advanced

Clean and Re-build platform project

rnv run -p tizenmobile -r

Launch with specific Tizen simulator:

rnv run -p tizenmobile -t M-5.0-x86

macOS

support for OSX/macOS
Based on Electron

Requirements

n/a

Project Configuration

Feature	Version
electron	`2.0.0`
react-native-web	`0.9.9`
electron-builder	`20.28.2`

Run

Run on Simulator

rnv run -p macos

Run in Browser

rnv run -p macos --hosted

Deploy on Electron Simulator

This will run production version on your simulator (not connected to devserver) You can configure each buldScheme ie -s release in your config file ./appConfigs/<YOUR_APP_CONFIG>/config.json

rnv run -p macos -s release

Export

rnv export -p macos -s release

Windows

support for Windows 10+
Based on Electron

Requirements

Windows dev environment

Project Configuration

Feature	Version
electron	`2.0.0`
react-native-web	`0.9.1`
electron-builder	`20.28.2`

Run

Run on Simulator

rnv run -p windows

Run in Browser

rnv run -p windows --hosted

Android Wear

Latest Android project
Kotlin Support
Support for Gradle 4.9

Requirements

Android Studio for Android development
Android SDK 23.0.1 or newer for Android development

Project Configuration

Feature	Version
Gradle	`4.10.1`
Android Gradle	`3.3.1`
Kotlin	`1.3.20`
Target SDK	`27`

Run

NOTE: make sure you have 1 android wear device connected or 1 wear emulator running

rnv run -p androidwear

NOTE: There is a bug in RN. for now you must NOT have running bundler ($ rnv start) in order for wear sim to work

Advanced

Clean and Re-build platform project

rnv run -p androidwear -r

Launch specific emulator:

rnv target launch -p androidwear -t Android_Wear_Round_API_28

App Config

see: Android based config

KaiOS

Requirements

KaiOSrt for emulator

After installation you can launch it via Applications:

Run

Run on Simulator

rnv run -p kaios

Run on Device

rnv run -p kaios -d

Run in Browser

rnv run -p kaios --hosted

FirefoxOS

Requirements

FirefoxDeveloperEdition for IDE + Emulator

After installation you can launch it via Applications:

Tools -> Web Developer -> WebIDE

Run

Run on Simulator

rnv run -p forefoxos

Run on Device

rnv run -p forefoxos -d

Run in Browser

rnv run -p forefoxos --hosted

FirefoxTV

Requirements

FirefoxDeveloperEdition for IDE + Emulator

After installation you can launch it via Applications:

Tools -> Web Developer -> WebIDE

Run

Run on Simulator

rnv run -p forefoxtv

Run on Device

rnv run -p forefoxtv -d

Run in Browser

rnv run -p forefoxtv --hosted

CLI

ReNative CLI

Deployed to https://www.npmjs.com/package/rnv

Commands

rnv

$ rnv - Print help

$ rnv --version - Print ReNative Version

rnv new

$ rnv new - creates new ReNative project

rnv start

$ rnv start -p <PLATFOM> - start server / bundler for specific platform. (no -p defaults to metro bundler)

rnv run

$ rnv run -p <PLATFOM> - runs app specific platform

rnv package

$ rnv package -p <PLATFOM> - package JS for specific platform

rnv build

$ rnv build -p <PLATFOM> - build / compile app for specific platform

rnv export

$ rnv export -p <PLATFOM> - export / archive app for specific platform

rnv deploy

$ rnv deploy -p <PLATFOM> - deploy app for specific platform

rnv status

$ rnv status - prints out info about your project

rnv clean

$ rnv clean - will delete all node-modules and package-lock.json files. you will be asked to confirm this action

rnv platform

Manipulates platforms

$ rnv platform eject - gives options which platforms to eject

$ rnv platform connect - gives options which platforms to connect

rnv plugin

Plugin Management

$ rnv plugin list - list all available / installed plugins

$ rnv plugin add - list all available plugins to be installed

rnv target

Emulator / Simulator / Device Management

$ rnv target launch -p <PLATFORM> - Start target (i.e. simulator/ emulator)

rnv tools

$ rnv tools fixPackage - fix + cleanup+ format your package.json

Options

You can combine most of the above commands with following extra arguments you can combine together

-r , --reset

ReNative Allows you to perform reset commands if you facing unforeseen problems or migrating ReNative versions

$ rnv start -r - Reset Metro Bundler cache

$ rnv run -p <PLATFORM> -r - Reset specific platform of platformBuild project (fully recreate project based on provided template)

$ rnv configure -r - Reset all platforms of platformBuild project (fully recreate projects based on provided template)

--mono

If you prefer having your logs clean (without color decorations). you can use --mono flag for any$ rnv command. This is particularly useful for CI where logs are usually stripped from colors by CI logger and producing visual artefacts

Examples:

$ rnv status --mono $ rnv start --mono

-c , -appConfigID

Allows you to immediately switch to specific app config

$ rnv run -p <PLATFORM> -c <APP_ID> - configure APP_ID and run PLATFORM

$ rnv build -p <PLATFORM> -c <APP_ID> - configure APP_ID and build PLATFORM

-d , --device

$ rnv run -p <PLATFORM> -d - Install/Run on connected device instead of simulator

-s , --scheme

You can pass down specific build scheme configured in ./appConfigs/APP_ID/config.json

$ rnv run -p <PLATFORM> - runs app with default scheme (-s debug)

$ rnv run -p <PLATFORM> -s myScheme - runs app with myScheme build scheme

-i , --info

Log verbose output

$ rnv run -p <PLATFORM> -i

-t , --target

Allows you to specify known target name/id so CLI won't ask you to pick one

$ rnv run -p <PLATFORM> -t <TARGET_NAME>

--host

Allows you to run some platforms directly in browser

$ rnv run -p <PLATFORM> --host

--only

ususall ReNative runs in cascading dependency mode. that means that if for example your run deploy command, rnv runs all necessary commands (configure, package, build, export) before running deploy command itself

sometimes you just want to run last command. --only esures only top level command is executed

$ rnv deploy -p <PLATFORM> -s <BUILD_SCHEME> - run all dependant commands + deploy

$ rnv deploy -p <PLATFORM> -s <BUILD_SCHEME> --only - run deploy only

Ejecting Platforms

By default, ReNative controls platformTemplates for you. Advantage is that you don't need to maintain them and will get all the updates automatically. If however you need to customise them you can eject them directly into your project.

rnv platform eject

your projects will be build using ./platformTemplates from this point

If you want to revert back to using ReNative templates simply run

rnv platform connect

your projects will be build using ./node_modules/renative/rnv-cli/platformTemplates from this point

Developing ReNative Locally

If you need full control over whole ReNative build you can clone and develop it locally

1) clone [email protected]:pavjacko/renative.git
2) cd renative
3) npm i
4) npm run watch
5) npm run link

At this point your global $ rnv command is linked directly into project above.

It's also best way to contribute back to RNV! :)

rnv template apply
=> pick renative-template-hello-world

Common Issues

If you encounter unexpected error / issue it is always good to perform basic sanity steps:

rnv status

rnv status

this should print out basic SUMMARY box with info about your project, env, and RNV version. check if everything seem correct.

-r --reset

rnv start -r -> restart your server / bundler and reset all cache

rnv run .... -r -> recreate whole project before running app

-i --info

rnv run .... -i -> run ReNative with full verbose logs

rnv clean

If above does not help try to clean up your project

rnv clean && npm i

Raise Issue

If above does not help either you can raise new question/bug on repo https://github.com/pavjacko/renative/issues

Provide at least SUMMARY box from your console

Common Errors:

⚠️linker command failed with exit code 1 (use -v to see invocation)

Make sure your Xcode version is 10.2 or newer

⚠️Description: Invalid runtime: com.apple.CoreSimulator.SimRuntime.iOS-.......

try to run

sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService

and then

rnv run ...

⚠️Could not create service of type ScriptPluginFactory using BuildScopeServices.createScriptPluginFactory()

Try killing all gradle processes and running the build again, that should help

Contributing

Discussions

https://spectrum.chat/renative

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Community

Special thanks to open-source initiatives this project utilises, notably:

Stats

LICENSE

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 1,278 Commits
.github		.github
buildHooks/src		buildHooks/src
docs		docs
packages		packages
website		website
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
CNAME		CNAME
CONTRIBUTING.md		CONTRIBUTING.md
FUNDING.yml		FUNDING.yml
LICENSE		LICENSE
README.md		README.md
_config.yml		_config.yml
babel.config.js		babel.config.js
lerna.json		lerna.json
package.json		package.json
rn-cli.config.js		rn-cli.config.js
rnv-config.json		rnv-config.json

License

mimoccc/renative

Folders and files

Latest commit

History

Repository files navigation

🚀 Quick Start

1) Install ReNative CLI (rnv)

2) Create new app:

3) Create 3 separate terminal tabs/windows. use one to keep bundler running and other one for build commands

RNV + NPX

Features

Supported OS

Requirements

Templates / Starters

Built-in

Community

Plugins

Custom Plugin Support

Configurations

Project Config

App Configs

Android based config

Apple based config

Web based config

Global Configurations

App Signing

Build Flavours

Build Flavour Injectors

Custom appConfig Location per Project

Build Hooks

Using RNV in Build Hooks

Build Pipes

Run Multiple Pipes on One Hook

Runtime

Architecture

Override Mechanism

Config Values Overrides

File Overrides / Injectors

Platform Builds Overrides

Platform Assets Overrides

Flavoured Builds

Platforms

iOS

Requirements

Project Configuration

Run on Simulator

Run on Device

Deploy on Device

Advanced

App Config

Android

Requirements

Project Configuration

Emulators

Run on Simulator

Run on Device

Deploy on Device

Advanced

App Config

tvOS

Requirements

Project Configuration

Run

Advanced

App Config

Android TV

Requirements

Project Configuration

Run

Advanced

App Config

Web

Requirements

Project Configuration

Run

Build

Advanced

App Config

Tizen TV