Could you introduce your app in a few sentences?
Greeting Card Capture is an app that takes physical greeting cards and saves them to your phone/the cloud (right now it’s iOS-only).
I love sending and receiving cards, but I never had a good place to put them (they all ended up in a box in my closet that I only looked at when I moved).
I made Greeting Card Capture to view my cards wherever and whenever I wanted — without the physical overhead of a card-filled shoebox.
What made you decide to use/switch to React Native?
I looked into using Swift, but shied away after trying to get a toy app up and running. While I got the toy Swift app to work, everything took a bit longer than I’d like (from learning a new language to getting everything to compile). I heard about React Native and gave create-react-native-app a try.
The immediate feedback loop of a development server plus coding in a language I already knew let me focus on the the app rather than the idiosyncrasies of Swift/Objective-C.
How did you transition to React Native?
I started working on the app about two years ago and had a bunch of false starts. I knew JavaScript fairly well, and most of the problems I ran into were around the development process rather than developing the app itself.
Thankfully, every time I came back the RN community seemed to have solved whatever issue I was having, so that by the time I finally hunkered down and tried to finish the app in late 2017, I ran into very few problems on the RN side of things.
I started out using create-react-native-app, switched to Expo, but ended up back with create-react-native-app again and ejecting.
While Expo is great, a big part of my app was the ability to quickly scan/capture cards, and the third-party library I used didn’t work easily with Expo.
Have your tried other cross platform technologies before using React Native?
The only other experience I had with cross-platform tools was with Electron when building a Mac screen capture app during a hack day at my old job. There were definitely some similarities in using the two frameworks — both have a great community and really accessible official docs.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
The performance has been great, particularly as it relates to the image scanning aspect of the app.
Given the size of a lot of App Store downloads, I also worried that by using React Native my app would have a lot of bloat bundle-wise but it doesn’t seem to be the case — Greeting Card Capture 1.1 comes in at under 25MB.
How has adopting React Native affected developer productivity?
Once I learned the basics and got comfortable reliably building my app, I was off to the races. The React Native tags are close enough to HTML that RN feels like coding JSX in the browser.
Being able to see my changes without recompiling the Swift code is a much better development experience than having to wait each time. When I added my own Swift code to the app, the iteration time slowed from seconds to minutes.
While I didn’t end up using Expo, the whole QR-code-to-run-on-device workflow is magical.
Which tools, libraries and frameworks are part of your development process with React Native?
Editor-wise, I used Atom for JS, and Xcode for Swift. My app doesn’t use Redux (it uses react-native-simple-store), so my app introspection tooling involved out of the box RN debugging e.g. inspecting elements and console logging. Since the bundler/dev-server switched to Metro, the logs have been a more readable and the recompile time faster.
react-native-document-scanner was a library that made my app possible. While I’d like to think I could have wrapped iOS’s document-scanning capabilities myself, it would have me taken a very long time, particularly while learning all the other pieces that go into a React Native app.
Once I was ready to deploy, Fastlane became indispensable. Fastlane automates a lot of what makes deploying an iOS app frustrating, e.g. permissions, bundling, and submitting. Can’t recommend it enough.
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
When integrating iCloud, the Frozen Fire Studios posts on working with CloudKit were really helpful. The articles aren’t React Native-centric, but explain how to work with the CloudKit API with Swift.
There are also tons of Stack Overflow and blog post articles that helped me through everything from getting my app working with with the RN development server to iOS certificate and permissions issues. Unfortunately, there isn’t a one-size-fits-all solution for permissions/certificates and the whole deploy process. Fastlane comes pretty close, but if you have customization you’ll probably end up scouring Apple’s official documentation (which I did not find as helpful as React Native’s) and Stack Overflow when debugging.
What are some things that you don’t like about React Native or that need to be improved?
It’d be nice if hooking into the camera/other native functionality was a bit more straightforward, and if it was supplied by the React Native library out of the box. That being said, the RN community continues to amaze me by filling in gaps in native functionality.
Integrating Swift took a bit of time, and most of the headway I made was through blog posts vs. the React Native and Apple official documentation (this was the only aspect of developing the app where this was true).
While integrating Swift took a while, it ended up being easier than I thought it would. Once I got the function signature down, I created a bunch of code that bridges over with (relative) ease.
Anything else you would like to mention?
You can learn more about Greeting Card Capture and download the app at http://greetingcardcapture.com. The free version lets you save up to ten cards, and the paid version lets you save as many as you want.
If you have any questions/feedback, I’d love to hear it! I can be reached at @jesselumarie on Twitter, and via email at support@greetingcardcapture.com.