horizon-react-native icon indicating copy to clipboard operation
horizon-react-native copied to clipboard

Example application showing how to use horizon with react-native

Horizon React-Native Example Application

This is an example application which shows how to set up horizon with react-native.

Notice

Horizon is still under development and can't be used with react-native yet. This repository is used to explore the pieces which will have to be changed. This application may have errors when it is run.

Preparing development

Install global packages if you don't have them already

$ npm install -g react-native-cli
$ npm install -g horizon

Install local dependencies

$ cd HorizonExampleApp
$ npm install

Starting development

Starting bundler & simulator

$ cd HorizonExampleApp
$ npm start
$ react-native run-ios # in a new terminal instance

Staring Horizon server

$ cd server
$ hz serve --dev

How is this set up?

These steps were executed to set up this project:

$ mkdir horizon-react-native
$ cd horizon-react-native

$ npm i -g react-native-cli # if you don't have it already

# create react-native application
$ react-native init HorizonExampleApp

# now on to horizon
$ hz init server
$ cd server
$ rm -r dist src # remove unused directories

Finally, some horizon code was added to HorizonExampleApp/index.ios.js.

You could go from here for real projects and set up proper npm scripts, get rid of the global dependencies and so on.