Updated August 24, 2016
My Process for Building a Cross Platform React Native Component
Originally publish on medium.com.
I’ve talked about sharing code between React Native on Android and iOS but this week I want to talk more about my process of building for multiple platforms.
This is definitely opinionated and falls back on tools and processes that I’m comfortable with — but it makes my job easier and it may make yours easier too.
Thinking about the Component
It’s great that you can write a component that “fits” the platform you’re writing for, but you also want to make it easy for you to maintain and to minimize the code you write. So when I’m about to build a component that may differ on each platform I try to pull out every common piece involved to serve as shared logic and the differences are simply going to be layered on top of that.
For example: say you’re building a tab bar. On both iOS and Android you’re going to be switching tabs by tapping an icon and each tab is going to have an icon. However on iOS you can have text under the icon. On Android you may be able to not only tab between tabs but also swipe between them.
With that in mind I can start layering together the different parts of the implementation. This allows me to have an idea of what I’m going to build and how I’m going to build it before I write a line of code.
Prototype on iOS First
This may just be opinion and comfort on my end but I find it so much easier and faster to build and debug on iOS first. Things just seem to work more reliably. If that’s not the case for you that’s fine, but consider choosing a single platform to build a majority of your logic.
With the mental model of what I’m going to build and how I’m going to build it I try to stub out an android like environment in my simulator (basically just set a flag to true) so I can use different styles. That way once I’ve got my shared pieces of logic and my iOS specific pieces I can jump right over, in the same process, and build the Android specific pieces by simply changing a flag.
Once I’ve gotten as far as I can without feeling like I’m fighting the environment I’ll jump over to my Android device or an emulator to start testing and making modifications. Faking the environment will never be the same as actually using it!
In Summary
I think through the component for both platforms and pick out shared logic, I write the iOS and shared pieces, then I fake the Android stuff in iOS (because that’s where I’m comfortable), and then test and modify Android on an actual Android device.
I’m trying out a different format of article this week where I don’t go directly into the code I write as a developer but more of my experience as a developer, how I think through problems, and how I approach the situations I do in a day. What do you think? Would you be interested in seeing more like this? (I’ll still write tutorials as well)
