🚀 React Native Vanilla

build universal cross-platform apps with react native

Quick Start • Features • Advanced Configuration • Architecture • RNV CLI • Developing RNV Locally • Discussions • Contributors • Backers • Sponsors • Community • Stats • License

iOS	tvOS	Android TV	macOS

Android	Web	Tizen TV	LG webOS

Tizen Watch	Windows	Android Wear	KaiOS

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 and KaiOS 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 RNV

$ npm install react-native-vanilla@latest -g

2) Create new app:

$ rnv app create

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! 🎉

Features:

Development platforms

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)

Advanced Configuration

Reset options

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

Reset Metro Bundler cache

rnv start -r

Reset specific platform of platformBuild project (fully recreate project based on provided template)

rnv run -p <PLATFORM> -r
rnv app configure -p <PLATFORM> -r

Reset all platforms of platformBuild project (fully recreate projects based on provided template)

rnv app configure -r

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 Configurations

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 app configure -c helloWorld -u

Build Flavours

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

Example:

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

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

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

and

rnv run -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              
        └── builds     
            ├── android@release
            │   └── fileToBeInjectedInReleaseMode.txt                     
            └── android@debug
                └── fileToBeInjectedInDebugMode.txt

Plugins

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

rnv plugin list

to add new plugin to your project:

rnv plugin add

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": {
    "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"
      }
    }
  }
}

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"
}

Ejecting Platforms

By default, RNV 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 RNV templates simply run

rnv platform connect

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

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
├── projectConfigs              # 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

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 RNV 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

Launch app with specific iOS simulator

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

Launch app with specific iOS simulator (let RNV 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 RNV 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

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

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

Launch specific android emulator:

rnv target launch -p android -t Nexus_5X_API_26

Launch app with specific iOS simulator (let RNV 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 RNV 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

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

Launch with specific tvOS simulator

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

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

Launch specific emulator:

rnv target launch -p androidtv -t Android_TV_720p_API_22

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

open browser URL: http://0.0.0.0:8080/

Run

rnv build -p web

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

Advanced

Run with verbose logging:

rnv run -p web --info

Run app on custom port 9999:

rnv run -p web --port 9999

Tizen TV

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 tizen -t T-samsung-5.0-x86

Run

rnv run -p tizen

Advanced

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

Advanced

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

rnv run -p webos

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

rnv run -p macos

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

rnv run -p windows

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

Advanced

Launch specific emulator:

rnv target launch -p androidwear -t Android_Wear_Round_API_28

KaiOS

Requirements

KaiOSrt for emulator

After installation you can launch it via Applications:

Run

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

rnv run -p kaios

RNV CLI

Commands:

rnv --help                          //Print help
rnv --version                       //Print RNV Version
rnv run -p <PLATFORM>               //Run app on simulator/device/browser
rnv target launch -p <PLATFORM>     //Start target (i.e. simulator/ emulator)
rnv app configure                   //Configure app based on selected appConfig (copy runtime, initialise, copy assets, versions)
rnv app create                      //Create new app
rnv platform eject                  //Eject platformTemplates into project
rnv platform connect                //Use RNV predefined templates

Developing RNV Locally

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

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

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

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

Discussions

https://spectrum.chat/reactnativevanilla

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 487 Commits
appConfigs		appConfigs
docs		docs
projectConfig		projectConfig
rnv-cli		rnv-cli
src		src
tests/utils		tests/utils
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
_config.yml		_config.yml
babel.config.js		babel.config.js
index.android.js		index.android.js
index.androidtv.js		index.androidtv.js
index.androidwear.js		index.androidwear.js
index.ios.js		index.ios.js
index.kaios.js		index.kaios.js
index.macos.js		index.macos.js
index.tizen.js		index.tizen.js
index.tizenwatch.js		index.tizenwatch.js
index.tvos.js		index.tvos.js
index.web.js		index.web.js
index.webos.js		index.webos.js
index.windows.js		index.windows.js
package.json		package.json
rn-cli.config.js		rn-cli.config.js
rnv-config.json		rnv-config.json

License

samengstrom/react-native-vanilla

Folders and files

Latest commit

History

Repository files navigation

🚀 React Native Vanilla

🚀 Quick Start

1) Install RNV

2) Create new app:

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

Features:

Development platforms

Requirements

Advanced Configuration

Reset options

Global Configurations

App Configurations

Build Flavours

Build Flavour Injectors

Plugins

Custom Plugin Support

Custom appConfig Location per Project

Ejecting Platforms

Architecture

iOS

Requirements

Project Configuration

Run on Simulator

Run on Device

Deploy on Device

Advanced

Android

Requirements

Project Configuration

Emulators

Run on Simulator

Run on Device

Deploy on Device

Advanced

tvOS

Requirements

Project Configuration

Run

Advanced

Android TV

Requirements

Project Configuration

Run

Advanced

Web

Requirements

Project Configuration

Run

Run

Advanced

Tizen TV

Requirements

Project Configuration

Emulator

Run

Advanced

Tizen Watch

Requirements

Project Configuration

Emulator

Run

Advanced

LG webOS

Requirements

Project Configuration

Emulator

Run

macOS

Requirements

Project Configuration

Run

Windows

Requirements

Project Configuration

Packages