thoth-ibl / renative Goto Github PK

build universal cross-platform apps with react native

Quick Start • Features • Advanced Configuration • Architecture • ReNativeCLI • Developing ReNativeLocally • Discussions • Contributors • Backers • Sponsors • Community • Stats • License

iOS	tvOS	Android TV	macOS
Android	Web	Tizen TV	LG webOS
FirefoxOS	Windows	Firefox TV	KaiOS
...	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

$ npm install renative@latest -g

$ rnv app create

Follow steps in the terminal

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

• 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)

ReNativeAllows you to perform reset commands if you facing unforeseen problems or migrating ReNativeversions

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

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

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

For Android release signing, create ~/.rnv/helloWorld/signing.properties file with path to your release keystore file and its credentials.

STORE_FILE=~/.rnv/helloWorld/release.keystore
STORE_PASSWORD= ************
KEY_ALIAS= ************
KEY_PASSWORD= ************

Then you can run the release app by:

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

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

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

ReNativeSupports 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

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

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

By default, ReNativecontrols 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 ReNativetemplates simply run

rnv platform connect

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

Sometimes you need to extend CLI functionality with custom build scripts. ReNativemakes 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

ReNativewill 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 ReNativeconfig object containing all necessary build information

Sometimes you want to execute specific hook automatically before/after certain ReNativebuild 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 = {
    'app:configure:before': hooks.hello,
};

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

const pipes = {
    'app: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',
'app:configure:before', 'app: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.platformTemplatesFolder;
c.paths.platformAssetsFolder;
c.paths.platformBuildsFolder;
c.paths.projectPluginsFolder;
c.paths.nodeModulesFolder;
c.paths.runtimeConfigPath;
c.paths.projectConfigFolder;
c.paths.pluginConfigPath;
c.paths.permissionsConfigPath;
c.paths.fontsConfigFolder;

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

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

• CocoaPods 1.5.3 or newer
• Xcode for iOS development

rnv start
rnv run -p ios

IMPORTANT: before you run ReNativeapp on the actual iOS device you MUST:

1. Have ios device connected on the same network as your dev machine
2. Have ios developer account properly configured with ability to generate provisioning profiles dynamically (Dynamic Signing)
3. 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

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

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

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

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

You can create variety of emulators via Android Studio IDE

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

rnv start
rnv run -p android

rnv start
rnv run -p android -d

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

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

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

• CocoaPods 1.5.3 or newer
• Xcode for iOS development

rnv start
rnv run -p tvos

Clean and Re-build platform project

rnv run -p tvos -r

Launch with specific tvOS simulator

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

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

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

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

rnv start
rnv run -p androidtv

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

• Supports Chrome, Safari, Firefox, IE10+

• no extra requirements required

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

rnv build -p web

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

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

• Latest Tizen project
• Support for Tizen 5.0

• Tizen SDK 5.0

Make sure you have at least 1 TV VM setup

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

rnv run -p tizen

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

• Latest Tizen project
• Support for Tizen 5.0

• Tizen SDK 5.0

Make sure you have at least 1 TV VM setup

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

rnv run -p tizenwatch

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

• Latest LG webOS Project

• LG Emulator v3.0.0

• 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

rnv run -p webos

• support for OSX/macOS
• Based on Electron

• n/a

rnv run -p macos

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

• support for Windows 10+
• Based on Electron

• Windows dev environment

rnv run -p windows

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

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

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

rnv run -p androidwear

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

• KaiOSrt for emulator

After installation you can launch it via Applications:

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

rnv run -p kaios

• FirefoxDeveloperEdition for IDE + Emulator

After installation you can launch it via Applications:

Tools -> Web Developer -> WebIDE

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

rnv run -p firefoxos

• FirefoxDeveloperEdition for IDE + Emulator

After installation you can launch it via Applications:

Tools -> Web Developer -> WebIDE

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

rnv run -p firefoxtv

Commands:

rnv --help                          //Print help
rnv --version                       //Print ReNativeVersion
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 ReNativepredefined templates

If you need full control over whole ReNativebuild 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 link

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

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

https://spectrum.chat/renative

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

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

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

• https://www.npmjs.com/package/react-native
• https://www.npmjs.com/package/react-native-web
• https://www.npmjs.com/package/webpack
• https://www.npmjs.com/package/babel-cli
• https://www.npmjs.com/package/electron

MIT