Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

react-native-vanilla

0.14.0-alpha4 • Public • Published

🚀 React Native Vanilla

build universal cross-platform apps with react native





Quick StartFeaturesAdvanced ConfigurationArchitectureRNV CLIDeveloping RNV LocallyDiscussionsContributorsBackersSponsorsCommunityStatsLicense


iOStvOSAndroid TVmacOS
AndroidWebTizen TVLG webOS
Tizen WatchWindowsAndroid WearKaiOS

npm version npm downloads License MIT All Contributors PRs Welcome

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


Advanced Configuration

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

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              # Cross platform assets
│       └── config.json         # Application flavour config
├── entry                       # Entry point index files
├── platformAssets              # Generated cross-platform assets
├── platformBuilds              # Generated platform app projects
└── src                         # Source files

iOS

  • Latest swift based Xcode project
  • Cocoapods Workspace ready
  • Swift 4.1 Support

Requirements

Project Configuration

Feature Version
Swift 4.1
Deployment Target 11.4

Run

rnv start
rnv run -p ios

Advanced

Launch with specific iOS simulator

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

Android

  • Latest Android project
  • Kotlin Support
  • Support for Gradle 4.9

Requirements

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

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

rnv start
rnv run -p android

Advanced

Launch specific emulator:

rnv target launch -p android -t Nexus_5X_API_26

tvOS

  • Latest swift based Xcode project
  • Cocoapods Workspace ready
  • Swift 4.1 Support

Requirements

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

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/

Advanced

rnv run -p web --info

Tizen TV

  • Latest Tizen project
  • Support for Tizen 5.0

Requirements

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

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

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

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

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 git@github.com: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]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]


Community

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


Stats

NPM

LICENSE

MIT

install

npm i react-native-vanilla

Downloadsweekly downloads

442

version

0.14.0-alpha4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability