React Native Vanilla

build universal cross-platform apps with react native

iOS	tvOS	Android TV	macOS	Windows

Android	Web	Tizen	LG webOS	Android Wear

Most fundamental multi-platform project template based on react native. Includes latest iOS, tvOS, Android, Android TV, Web, Tizen, LG webOS, macOS/OSX and Windows 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

Get Started
- 1. Prerequisites
- 2. Installation
Architecture
iOS
Android
tvOS
Android TV
Web
Tizen
LG webOS
macOS
Windows
Android Wear
Contributors
Discussions
Community
LICENSE

Features:

Development platform

OS	Support
Mac	`YES`
Windows	`YES`
Linux	`untested`

Requirements

Node 10.13.0 or newer
NPM 6.4.1 or newer
React Native for development

Stack / Libraries

React 16.7.0-alpha.2 react library
React Native 0.57.7 for building native apps using react
Babel 7.x.x for ES6+ support

Get Started

1. Prerequisites

The recommended way to run specific version of Node and NPM is to use NVM:

nvm install node 10.13.0
nvm alias default node 10.13.0

Tested / Recommended Node configurations:

Node Version	NPM Version
`10.13.0`	`6.4.1`

2. Installation

On the command prompt run the following commands

$ git clone git@github.com:pavjacko/react-native-vanilla.git

$ cd react-native-vanilla

$ npm run setup

Architecture

Folder Structure

.
├── assets                   # Cross platform assets
├── docs                     # Documentation files
├── platforms                # Platform specific projects / code
│   ├── android              # Android platform project
│   ├── androidtv            # Android TV configured platform project
│   ├── androidwear          # Android Wear configured platform project
│   ├── ios                  # iOS Xcode platform project
│   ├── macos                # macOS Electron platform project
│   ├── tizen                # Tizen platform project
│   ├── tvos                 # tvOS Xcode platform project
│   ├── web                  # Webpack based project
│   ├── webos                # Web OS platform project
│   └── windows              # Windows desktop platform project
├── src                      # Source files
├── tests                    # Automated tests
├── utils                    # Tools and utilities
├── LICENSE
└── README.md

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

npm start
npm run ios

Android

Latest Android project
Kotlin Support
Support for Gradle 4.9
Support for Android JSC (improved support for JavascriptCore like ES6 syntax)

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`
JSC	`org.webkit:android-jsc:r224109`

First time installation

create file named local.properties in <PROJECT_ROOT>/platforms/android

with paths to your Android SDK. Usually:

ndk.dir=/Users/<USER>/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/<USER>/Library/Android/sdk

Run

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

npm start
npm run android

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

npm start
npm run tvos

Android TV

Latest Android project
Kotlin Support
Support for Gradle 4.9
Support for Android JSC (improved support for JavascriptCore like ES6 syntax)

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`
JSC	`org.webkit:android-jsc:r224109`

First time installation

create file named local.properties in <PROJECT_ROOT>/platforms/androidtv

with paths to your Android SDK. Usually:

ndk.dir=/Users/<USER>/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/<USER>/Library/Android/sdk

Run

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

npm start
npm run androidtv

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

npm run web

open browser URL: http://localhost:8080

Tizen

Latest Tizen project
Support for Tizen 4.0

Requirements

Tizen SDK 4.0

Project Configuration

Feature	Version
Tizen Studio	`2.5`
Tizen SDK	`4.0`
react-native-web	`0.9.1`
Babel Core	`7.1.2`

Make sure you have tizen-cli configured in your env variables:

export PATH="<USER_PATH>/tizen-studio/tools/ide/bin:$PATH"
export PATH="<USER_PATH>/tizen-studio/tools/emulator/bin:$PATH"

Emulator

Make sure you have at least 1 TV VM setup

emulator-manager

em-cli list-vm

em-cli launch --name T-samsung-4.0-x86

Run

npm run tizen

or specific simulator:

npm run tizen T-samsung-4.0-x86

LG webOS

Latest LG webOS Project

Requirements

LG Emulator v3.0.0

Project Configuration

Feature	Version
cli-webos	`0.0.2`
react-native-web	`0.9.1`
Babel Core	`7.1.2`

Make sure you have ares-cli configured in your env variables:

export PATH="<USER_PATH>/Library/webOS_TV_SDK/CLI/bin:$PATH"

Test above path by running

ares -V

Emulator

launch webOS emulator usually located in something like:

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

Run

npm run webos

macOS

support for OSX/macOS
Based on Electron

Requirements

Project Configuration

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

Run

npm run 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

npm run windows

Distribute

npm run windows:dist

Android Wear

Latest Android project
Kotlin Support
Support for Gradle 4.9
Support for Android JSC (improved support for JavascriptCore like ES6 syntax)

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`
JSC	`org.webkit:android-jsc:r224109`

First time installation

create file named local.properties in <PROJECT_ROOT>/platforms/androidwear

with paths to your Android SDK. Usually:

ndk.dir=/Users/<USER>/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/<USER>/Library/Android/sdk

Run

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

npm run androidwear

Contributors

_{Pavel Jacko} 📖	_{Daniel Marino Ruiz} 📖	_{Sander Looijenga} 📖	_{David Rielo} 📖

Discussions

coming soon

Community

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

LICENSE

MIT

React Native Vanilla

Features:

Development platform

Requirements

Stack / Libraries

Get Started

1. Prerequisites

2. Installation

Architecture

iOS

Requirements

Project Configuration

Run

Android

Requirements

Project Configuration

First time installation

Run

tvOS

Requirements

Project Configuration

Run

Android TV

Requirements

Project Configuration

First time installation

Run

Web

Requirements

Project Configuration

Run

Tizen

Requirements

Project Configuration

Emulator

Run

LG webOS

Requirements

Project Configuration

Emulator

Run

macOS

Requirements

Project Configuration

Run

Windows

Requirements

Project Configuration

Run

Distribute

Android Wear

Requirements

Project Configuration

First time installation

Run

Contributors

Discussions

Community

LICENSE

About

Languages