React Native in Motion
Embedded React Native in RubyMotion
Install
- Install RubyMotion
- Install React Native: https://facebook.github.io/react-native/docs/getting-started.html
- Install node:
brew install node
- Install watchman:
brew install watchman
- Optional: Install React Native CLI:
npm install -g react-native-cli
- Install bundler:
gem install bundler
- Install gems (motion-cocoapods):
bundle
- Initialize cocoapods:
pod setup
- Install cocoapods:
rake pod:install
Run
- Run React Native server (run this in a separate terminal tab):
npm --prefix ./vendor/Pods/React start
- Build your app:
rake
orrake device
Embedding React Native in an existing RubyMotion project
- Add motion-cocoapods gem to your
Gemfile
- Add React and any additional React component pods to your
Rakefile
app.pods do
pod 'React'
pod 'React/RCTText'
end
- Create a React
index.ios.js
file invendors/Pods/React
directory - Add
RCTRootView
to a container view (any UIView):
jsCodeLocation = NSURL.URLWithString("http://localhost:8081/index.ios.bundle")
@root_view = RCTRootView.alloc.initWithBundleURL(jsCodeLocation, moduleName:"SimpleApp", launchOptions:nil)
@container_view.addSubview(@root_view)
@root_view.frame = @container_view.bounds
Production vs. Development
The React Native server is intended for development (the server watches for changes to the index.ios.js
file and allows the developer to refresh the Simulator with CMD+R
vs. rebuilding).
For production use, this NSURL
could instead point to a pre-bundled file on disk:
jsCodeLocation = NSBundle.mainBundle.URLForResource("main",withExtension:"jsbundle")
To generate that file, run the curl
command and add the output to your resources
directory:
curl http://localhost:8081/index.ios.bundle -o main.jsbundle