React Native Android
January 11, 2016
Itβs been 4 weeks since the launch of the iOS Tasker App and everything seems to be good so far, no apparent bug came through and our Tasker base didnβt see that much difference, except for the better font scaling (I admit that some people got confused here π) and more responsive app (#win).
You can read more about the launch with Brian Leonard on the TaskRabbit Tech Blog.
Now is time for the Android implementation.
Android here we come!
Preface
I havenβt touched an Android phone for years (little exageration) until the past 2 weeks, so I am not fully aware of the best practices / UI paradigm of the Android World. Therefore we decided as a first step, acknowledging that some Android users might be displeased of native App feeling like an iOS App, to go for feature parity with the iOS App. We would then as 2nd step implement the parts that are breaking Android conventions.
Running the App
The React Native team did an awesome job with the implementation of Android. It was pretty easy to launch the App in the simulator after few tweaks. The structure we had for the project were already thought for the upcoming Android support. All Components and Classes that required a library specific to iOS or iOS Platform React Native Component/Apis (with IOS
suffix) were put inside a Platform
folder.
For example there was a Platform/Alert.js
with content:
import React from 'react-native';
const {
AlertIOS
} = React;
const Alert = {
alert(title, message, buttons, type) {
AlertIOS.alert(title, message, buttons, type);
},
prompt(title, value, buttons, callback) {
AlertIOS.prompt(title, value, buttons, callback);
}
}
export default Alert;
You can also just do export default AlertIOS
without defining Alert
, but having alert
and prompt
declared will show which API is used by the App and what is the method signature.
So I just needed to add .ios
to all the files in the Platform
folder then copy/paste them with .android
.
Here is Alert.android.js
:
const Alert = {
alert(title, message, buttons, type) {
console.warn('Alert.alert not implemented');
},
prompt(title, value, buttons, callback) {
console.warn('Alert.prompt not Implemented');
}
}
export default Alert;
I repeated the same stubbing for the other files.
For AlertIOS, the newer version of React Native 0.17.0 (0.18.0 in RC) got released with the awaited implementation of an Alert compatible for both platforms. In the case where you are not using prompt
(prompt
is not available for Android).
It would be then easy as finding and replacing import Alert from '../Platform/Alert'
by const { Alert } = React
, no code change inside the Components will be required.
Some gotchas found so far with Android
- When inheriting from a React Native Component, it throws an error, bummer I liked writing
class Input extends React.Input
. - Only
keyboardDidShow
andkeyboardDidHide
are emitted. - The Keyboard does not act the same way than iOS, the trick to change the Layout using a Component that changes height depending of the height of the Keyboard does not seems to work.
- There seems to be disparities with the usage of
textAlign
forTextInput
, iOS requiresauto
,center
,justify
,left
,right
and Android supportsstart
,center
,end
. - Our Available Tasks sliding does not currently work in Android.
- It does not seems to be a clear way how to implement push notifications.
- Be aware that some React Native Component features are not yet available for Android (MapView, Modal),
Alert.prompt
,setApplicationIconBadgeNumber
.
Android current progress:
Here is the list of our platform files implementation as today:
- β The platform implementation is done
- πΆ Have a Workaround
- β Not implemented / Work in progress
Status | Class | Purpose | Notes |
---|---|---|---|
β | Actionsheet | Display a list of actions | Β |
β | ActivityIndicator | Loading indicator | Uses ProgressBarAndroid |
β | Actionsheet | Display a list of actions | Β |
πΆ | Alert | Display an alert to the user | Uses Alert but missing prompt |
β | AppState | Triggers event when the app becomes visible / hidden | Β |
β | DatePicker | Picking a date and time | Β |
β | EnvironmentManager | Provides to the App the phone uuid, environment name (test, dev, staging, production), buildCode, version, i18n locale | Β |
β | ExpandingTextInput | Text that auto expand on input | Using implementation for iOS based on this PR, Brian made a gist for it |
β | FacebookLogin | Log in with Facebook | Β |
β | ImagePickerManager | Picking an image from the library or taking a photo | iOS is using react-native-fs and react-native-image-picker |
β | Linking | Open url or app | Uses LikingIOS and IntentAndroid (openURL and canOpenURL ) |
πΆ | Modal | Open a Modal | Uses ModalIOS and for Android we are using a gist from Martin Konicek using Portal ( be sure to wrap your Component with a Context Wrapper if needed ) |
β | MultiPicker | Multi picker | Β |
β | Picker | Picker | Uses for iOS PickerIOS |
β | ProgressCircle | Display a progress circle | Will be β with React Native 0.18 with ART support |
β | Tooltip | Show a Tooltip on long press | Uses our fork of react-native-tooltip |
β | ZendeskChat | Allow ZendeskChat in App | Uses a Native Module providing API to Zopim Mobile SDK |
Thanks for reading, feel free to comment and provide solutions if you have some!