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?
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
mkdir app && cd app/
mkdir components/ && touch index.js
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.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.
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.
app/index.js let’s add a tab bar and basic styles.
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.
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
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.
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/