In today’s world, 99.6% of new smartphones run iOS or Android, almost evenly split between both platforms. Building an app that supports these platforms ensures reaching a wide target audience and avoids limitation. Recognising this, React Native has the same cross compatible advantages you would expect from a web app, but with the UI building blocks as regular iOS and Android apps have, for that native feel. It is worthwhile to note that React Native is still very young, being released in 2015, and as a result not everything has been figured out yet.
Whether you’re a beginner or an expert, hopefully the hints and tips highlighted in this blog post will improve your React Native experience and in turn help you produce apps more efficiently.
iOS vs Android
One of the main advantages of using React Native is the ability to write an app for iOS and Android using the same code base. With this being said, it is important to note that iOS and Android have different design guidelines and users of each platform expect a different experience. React native works well in the sense that components can adjust their style based on the platform without adding in extra code, although not all components share this functionality. An example where this works well is the switch component, as shown below:
Alternatively a component that doesn’t support cross compatibility is the Date Picker as it only supports iOS. In this situation, we can look into installing an external date picker package that supports both Android and iOS. A general rule of using an external package is that it should be regularly updated, maintained and widely used. The react-native-datepicker package is compatible on both platforms following Android and iOS date picker design guidelines,.
<DatePicker
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {this.setState({date: date})}}
/>
Upgrading React Native
The team over at Facebook upgrade the React Native library every 2 weeks with bug fixes and improvements. It is important to keep your project up-to-date and upgrade as regular as possible. If you decide not to upgrade you will miss out on the bug fixes and new components. Another disadvantage of not upgrading regularly is that when you do eventually decide to upgrade, the project will be far behind and will cause many conflicts and issues. It is recommended to upgrade one version at a time to avoid too many issues e.g. 0.40 -> 0.41.
Running the command below in the root of your project is the most efficient way of upgrading the React Native framework with minimum conflicts.
react-native-git-upgrade
You can also specify which version you would like to upgrade to:
react-native-git-upgrade 0.41
3 Helpful Tips
#1. Text Input Android
The Text Input component differs slightly on android than it does on iOS. On android, the there is a line at the bottom of the component as it is the convention for forms on Android, shown in the image below.
To correct this and remove this line, we can simply set underlineColorAndroid to transparent.
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
underlineColorAndroid= 'transparent',
/>
#2. Hot Reloading VS Live Reloading
In React Native, the developer menu allows us to enable various options such as reloading and debugging. To open this menu on android the command is ⌘+ M and ⌘ + D on iOS.
A really useful option the developer menu offers is the ability to enable live or hot reloading. Hot reloading injects changes in real-time whereas live reloading refreshes entire app. Hot reloading comes in very handy when making changes to a view whether thats component or style changes. Live reloading is more appealing when making changes that affects more than one view, resetting the app to it’s initial route.
#3. Having Memory Issues?
When dealing with images in React Native, it is recommended to use JPEGs as appose to PNGs to avoid any memory issues. React Native uses Fresco for loading and displaying images. Fresco is an Android Library for managing images but unfortunately down sampling has been disabled because it is experimental. As a result, if an image is too large, it will throw an out of memory error and the app will crash. Following the rule of using JPEGs for images will prevent this from happening.
React Native is constantly evolving with the team at Facebook pushing out frequent updates to improve and maintain the JavaScript library. Although there is a lot of components offering cross-compatibility, there is still room for improvement on platform specific components. In the meantime, there are plenty of alternative solutions to these issues to ensure meeting design guidelines and compatibility.
Useful links:
React Native docs: https://facebook.github.io/react-native/versions.html
Date picker package: https://github.com/xgfe/react-native-datepicker
Upgrading React Native: https://facebook.github.io/react-native/releases/next/docs/upgrading.html
