Sharing Code Between Android and iOS in React Native


by Spencer Carli

Future updates will be made on Medium.

One of the (many) advantages of writing an app with React Native is that you can write a mobile app for both iOS and Android from the same codebase. Something that, as designers and developers, I’m sure you’ve noticed is that they’ve got different design patterns to them. They’ve each got their own design guidelines (Android, iOS).

Ideally we could share 100% of the code between iOS and Android but at times this just doesn’t work… so how can we do it? React Native makes it very easy by providing an easy to use API - here are the docs on it. What’s it look like in practice though?

Setup

We won’t be using the react-native-meteor-boilerplate today because nothing is really Meteor specific but we’ll use the same React Native project structure. Let’s get set up…

  • react-native init CodeSharing
  • cd CodeSharing
  • mkdir app && cd app/
  • mkdir components/ && touch index.js

Then in index.js add

Last part of our setup is to use app/index.js for both iOS and Android. This is our first step is code sharing. So for both index.ios.js and index.android.js change the files to

So, even within setup you can see what code sharing starts to look like! Each platform has their own entry file and we want to share this initial screen. Okay, let’s jump into the real stuff now.

Platform.OS

Let’s leverage a simple piece of the Platform API by showing a tab bar on the bottom of the screen for iOS and the top of the screen for Android. They differentiate more than just where the tab bar is located but this will serve as a good example.

We’ll be using react-native-tabs so first we need to install it: npm install --save react-native-tabs.

Then in app/index.js let’s add a tab bar and basic styles.

Android and iOS looking exactly the same

Okay, both of the interfaces look exactly the same now. Let’s bump that tab bar to the top when the platform is Android.

Boom! Our toolbar now sits on the top of the screen when a user is on Android.

Tab bar on iOS and Android

Platform Specific Components

Okay, that’s great but what if you need to write a platform specific component? Since this is a tutorial and I want to keep it short I’m going to build some buttons. Extremely simple example but it should illustrate the point!

Our buttons will work like so. On iOS the button will be sit just below the text stating which “page” we’re on. On Android it will sit at the bottom right of the screen. The common piece of this will be that the button stores in it’s state whether it is “pressed” or not.

First let’s install react-mixin so we can have mixin support while still using ES6.

npm install --save react-mixin@2

The button.common.js file simply handles the state for this component.

For both iOS and Android we’re going to import react-mixin and our ButtonCommon logic that handles our state - something important to our iOS and Android version of the button.

Then, depending on the pressed state, we’ll either show a colored button or a more neutral button.

Lastly we’ll import our button and use it on the main page. You don’t need to specify the extension - React Native will determine which component to pull in depending on the platform.

Gif of both iOS and Android working

And there you have it! This is obviously an extremely simple example and you could probably write it more succinctly but I simply wanted to set the stage for building larger cross platform components. This is a new concept to me still (in the past I’ve written entirely iOS apps with React Native) so any pointers are welcome!

In case you missed it - I’m writing an introductory book to writing real-time React Native + Meteor apps! If you’re interested in early access, and more helpful tutorials, join my email list so I can tell you as soon as they’re ready. You can join this list here: www.handlebarlabs.com/email-list/

Share Share on Twitter Share on Facebook Share on LinkedIn

How Can We Help?

Reaching out doesn’t mean you’re ready to start a project, but we’d love to learn more about the challenge you’re facing, answer any questions, and see if we might be a good fit for working together.

Contact Us