sk-react-native
An experimentation to see how cool is React Native:
- Bring continuous deployment to iOS ๐
- Build native app without any Objective-C / swift knowledge
- Enjoy a super-fast dev workflow
Resources
- Slick official tutorial
- Project using an Amazon S3 bucket to host js bundle
- Continuous deployment to S3 using CircleCI
- React Parts components library
- How to render ListView with section headers
- Smart and dumb components by @dan_abramov
- Ready to use jsfiddle React playground
Notes
Project setup
It took us 2h30 to have the complete target setup:
- Create the React Native app
- Create and configure access rights of the Amazon S3 buckets (while being complete Amazon noobs)
- Setup CircleCI for continuous deployment to S3
- Make the app download the javascript bundle from S3
Basic React Native
It literally takes 2 minutes to create and run a React Native app, including Live Reload and Chrome Dev Tools debugging. The project set experience could not be better.
Continuous Deployment
As React Native can download the javascript bundle from anywhere, not just locally, continuous deployment is as simple uploading a file and make it available on internet.
Amazon S3 setup
You need to create a bucket, a specific continuous deployment user and set the proper permission policy on this bucket. See the sample policy ./s3-bucket-policy.json
.
Circle CI
You can define all your continuous deployment setup in a circle.yml
file, defining the build, test and deploy steps. We copied and adjusted it from the london-react app
The only two things you need to from the CircleCI website is :
- Add the project (duh)
- Copy the Amazon S3 newly created user credentials in the
AWS Permissions
project settings view. git push origin master
- Sip some margarita
Mother effing splash and icons images
Who would have imagined how painful this could be?
Headache-less way of doing it:
- Create a 1000x1000px icon ; logo should be ~750px
- Create a 2048x2048px splash screen ; logo should be ~1000px, centered
- Install this app
- Pay ยฃ1.49 for the splash screen export, best ยฃ1.49 spent ever
- Follow the instructions, this is easy
Troubleshooting
Project local setup
fail to build 'RCTRootView.h' file not found
, should happen by default (meh).
- You didn't forget to run
npm install
, did you? - Click on the root project item
- Build settings
- Type
Search path
in the search box - Switch
Always Search User Paths
toYes
- Restart XCode
- Profit