This is how we struck a balance between iOS and Android using React Native
Been using your favorite application on your iPhone and then switched to Android only to get disappointed with the outlook of your app? Well, this is exactly what happens when the UI components aren’t the same between the operating systems. Thanks to Jordan Walke, a Facebook software engineer who analysed the advancement process and fostered a more comfortable user experience to solve this issue with React Native.
The best thing about using React Native for mobile applications is that you can share almost 95% of your code base across both Android and iOS platforms. We at Pickyourtrail, love this feature which is why React Native is our pick for building our mobile app.
Deeper insights on React Native
Despite being a cross-platform application development framework, React Native uses the “native” components of both iOS and Android to render the application UI. This means the same component might look different in each of the platforms.
To give you more clarity, let’s take the Button component as an example.
This is how a button looks in both iOS and Android:
Pretty different right?
Some components are so unique that React Native needs to clearly separate them by using different component names.
Say, you want to render a date picker, for iOS, you will be using the DatePickerIOS component which renders a view from which you can select a date. This UI is pretty standard on iOS devices and most people are used to selecting options this way.
However, on Android, Date picker can only be used as an asynchronous function DatePickerAndroid that opens a pop-up which differs in both functionality and the user experience.
Why are they so different?
Well, both Android and iOS platforms are built on different design principles and offer different experiences for the users. React Native is basically an interface that lets you control the components built on those design principles.
However, at Pickyourtrail, we needed the users of both our Android and iOS apps to have the same experience on both the platforms. So it is now upon us, to create common components that unify both the platforms and create a unique experience for our users!
Let’s start with the Button component.
React Native’s built-in button component will render the native style button. However, we can create a custom clickable component using TouchableHighlight which will take care of rendering our common button across both platforms.
We now have a CustomButton component which will render the platform-independent button in our application. All we have to do is use
<CustomButton
text={‘Button iOS’}
action={this.buttonAction}
/>
Need more?
We can use the React Props to pass in our custom style for the CustomButton component which will let us create more themed components suitable for our applications. Since we don’t use CSS in React Native and all the styles are written directly in Javascript, we can achieve functionality similar to styled-components without having to use a separate library for it.
Interesting Read: A peek into the LocalStorage world!
What about components like DatePicker?
However, DatePickerIOS is a UI component and DatePickerAndroid is implemented as a pop-up, the ideal approach here is to use Modal for the iOS Date Picker. That will let users have a similar experience in both platforms. A good implementation of this is available in the react-native-datepicker component.
How did it go for Pickyourtrail?
We now have a huge component library with different components themed to meet the needs of our mobile application and can be easily reused wherever they are needed. The component library is growing fast with exciting new components added almost every day!
If you plan to save time by not recreating every single component for your project, you can simply pick one of the wide range of component libraries available for React Native, such as NativeBase or React Native Elements. Do let us know in the comments section below, if it worked out for you!
Quick Read: This is how we solved slow page loads!
Looking for a break after some good tech reading? Go and play around with our Pickyourtrail product and start planning your holidays!
About the author: Dani Akash, our techie from Pickyourtrail takes coding for mobiles and servers way too seriously. Also, he fights sleep with 10 hours of Manga reading. Ha! Quite the expert, isn’t he?
