I began this Swift blog almost three years ago when I was a Swift-only mobile developer looking to become a full time iOS developer. I haven’t blogged for a long time here. Let’s just say…things are different now. 😁
Here’s how I got there. And why I ❤️ it.
People Are Talking About React Native
React Native over the past month has had quite the rollercoaster ride. It started when this post appeared on Twitter:
There’s a rumor React Native was abandoned in the main Facebook app. Anyone heard similar/different?
— Ben Sandofsky (@sandofsky) June 1, 2018
It was quickly deemed to be an incorrect statement. Sophie Alpert, an Engineering Manager on React at Facebook, wrote a post about how React Native has a bright future and is being reworked under the hood to be even better. A few days later, another dip as Airbnb announced that it was going to stop using React Native. Ash Furrow, an engineer at Artsy working in React Native who previously worked in native iOS, wrote about The Case for React Native and Airbnb and React Native Expectations, which offered some great pro-React Native perspectives.
React Native at Skip
Overall, I’ve really enjoyed learning React Native and everything that comes along with it. I’m glad I didn’t give up on it. I’ve been working exclusively with React Native at Skip for about a year now, and I actually prefer it to working natively on iOS 😱.
React Nativifying BB Links
My personal iOS app, BB Links, was written in Swift and launched while I was interviewing to work at SkipTheDishes back at the beginning of 2016. It’s now on version 5 after many, many improvements and redesigns. What I’ve learned at Skip has improved my software development skills in every way possible. My iOS app now has over 90K downloads and 23K monthly active users—I’m proud of how much it helps Beachbody Coaches run their home businesses!
Beachbody Coaches with Android devices have continuously asked me for an Android version of BB Links. I had only taught myself how to write apps for iOS in Swift, so writing an Android app in Java would be a completely different beast—and I wasn’t particularly keen on learning Android development from scratch in my evenings/weekends. So my answer to them was always “Sorry, but there won’t be an Android version of BB Links since I only know how to make iOS apps.”
At Skip, as I became more and more experienced with and confident using JS and React Native, I began pondering whether I had the ability to make a version of BB Links in React Native; It would allow me to make an Android version of BB Links without the need to learn native Android development. I knew it would be a challenge, but figured I’d give it a shot.
I made a quick MVP of my app in React Native and kept pushing myself piece by piece until I was sure building the full blown app was definitely something I was capable of. I bought a used Android device on Ebay, and went to work.
It wasn’t easy—there were many frustrations along the way—but the finished app has a 100% custom UI that matches the native iOS app, and has 95% of the same functionality. I decided to make the React Native version Android only, keeping the iOS app native in Swift as a way for me to have a project in Swift that I can continue to work on since my day job at Skip is all React Native now.
This past week I published the completed Android app on Google Play. I’m proud of how it turned out—it functions great, looks like the iOS app, with some paper qualities that fit more on Android, and I’ve become an even better React Native developer while creating it. Having to do every single part of an app from start to finish makes you learn so much more than when you only work on pieces of an app.
Frameworks Used in BB Links React Native
The app uses some great React/React Native frameworks:
- Navigation is rather complicated with 5 tabs and embedded stack navigation using React Navigation.
- For state management, it uses Redux along with Redux Persist, Reselect, and Re-reselect.
- It uses CloudKit JS to access the same backend data as the iOS app, which is really nice. It gave me the most headache overall, but it’s nice having all data in one place for both.
- Using Microsoft’s CodePush to do app bug fixes without needing to release a new version to Google Play. 🎉
- MoPub ad banners, which had to be bridged from native to work in React Native using a Native Module.
5 Things I Love About React Native
Here’s a list of five things I love about React Native overall:
- State management with Redux combined with Re-select is brilliant. Redux ensures unidirectional logic flow, which reduces bugs and makes for highly predictable reactive components. Combined with Reselect allows for memoization of logic to eliminate wasteful recalculations, improving performance.
- Reloading UI takes seconds with things like Hot Reloading. Change a colour, margin, text, etc. and you can see it updated in the simulator right away. This saves so. much. time.
- Creating React Components with Flexbox makes it so easy to make pretty much anything. It takes a while to learn, but once you do, it’s very flexible and intuitive.
- Once you learn React Native, you can create websites in React, the original version for web, with needing to learn only a handful of new things. At Skip, I’m now doing some web development in React as well, working on our Courier web portal redesign.
- Testing with Jest is great. Once you figure out the mocking part, testing UI, global state, and selector logic is quite easy. Using Enzyme (created by Airbnb), you can take snapshots of your UI with different properties applied to test how it renders and ensure it doesn’t unexpectedly change.
5 Things I Don’t Love About React Native
React Native isn’t perfect. Here are some things that need improvement.
- Getting an app started from scratch is complicated. There are things like Create React Native App which help, but if you need any frameworks with native code, which most apps will likely need, setup is much less straightforward.
- Needing to write native code that’s bridged to JS is a challenge. As Sophie wrote about in the article linked at the start of this post, Facebook is working to make this easier. Right now, it’s not fun. Also, the fact that a Swift iOS developer would now need to still learn some Android with Java to write the Android native code for the feature complicates things greatly. Now you need to know three languages to do a feature on your own.
- React Native performance on Android isn’t as smooth as iOS. This page in the documentation has some info on how to improve performance of React Native overall.
At Skip I now get to mentor new React/React Native developers who go through our Incubator program, as well as those on the Courier team who are learning the ropes. I love helping people learn about React and React Native, and I always learn something myself at the same time. Seeing them create things and be proud when they get it is awesome! ❤️
I’m also excited to work next on adding the remaining 5% functionality that I held back on for the Android app’s initial launch. It’s the more advanced stuff like in-app purchases for removing ads & tipping, and adding all 100+ themes like the iOS app has (I finished this, but it requires tipping to be released).
Overall, learning React Native has been great. React is an incredible skill I’ve been fortunate to have been able to learn in-depth working at Skip (we’re hiring Senior React developers, by the way). I know it has a bright future. And creating a React Native version of my personal application has been a fantastic experience filled with excitement, amazement that I could do it, and of course—frustration; but you can’t grow if you don’t fail and struggle. Taking the easy way out never has been much of an option for me in life, anyway.
12 thoughts on “A Swift Developer’s React Native Experience”
Pingback: Swift News #14 - React Native, WWDC Videos, CreateML, ARKit, & More - Aquaiver Software Lanka | Best Of Software Development | Web Design | Mobile Apps Developing Company
Hi, I’m in the initial phase of learning react-native as a self-project. I’ve been learning from some free courses and official documentation. I wish you can help me.
What resources (books, websites, anything) did you use to learn?
Thank you, this blog was very useful for me.
Greetings from Ecuador
LikeLiked by 1 person
Welcome to React Native! 🎉
I actually didn’t learn from any books or online courses…just the official documentation and some articles on medium and blogs. Most of what I learned canine from figuring things out with my coworkers and sharing our knowledge as we went. There’s no better way to learn than in a pressure cooker where you’re forced to learn it. 😄
Have you started to make any sort of app yet?
Oh I need that sort of motivation jaja the best way. Yes, my plan is to create a carpool app maybe with a inside chat.
Talking about that, how much difficult is to create a chat?
I don’t have any experience building chat personally, but I just stumbled upon this open source React native chat app now: https://github.com/dabit3/heard
Pingback: Swift News # 14 – Refresh native videos, WWDC, CreateML, ARKit and more | FreeDown
Pingback: React Ninjas Newsletter — Issue #11 – Jexia – Medium - Coding Videos
solves problem of bootstrapping new app
Yeah, but any app that requires dependencies with native code changes can’t use expo I believe. 😕
Hello Justin, nice post about it!
PS: Next year I will be moving to Winnipeg to work in …. SKIP! Hope to see you soon
LikeLiked by 1 person
Thanks! And nice! I’ll keep an eye out for when you join.
This is absolutely true. I am sharing this with some of the interns who are just beginning to play with React. Thank you, Justin, for sharing this.