TaskRabbit is Hiring!

We’re a tight-knit team that’s passionate about building a solution that helps people by maximizing their time, talent and skills. We are actively hiring for our Engineering and Design teams. Click To Learn more

Jean-Richard Lai

React Native Android

@ 11 Jan 2016

javascript react android


It’s been 4 weeks since the launch of the iOS Tasker App and everything seems to be working well. No apparent bugs came through and our Taskers didn’t notice 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 here.

Now it is time for the Android implementation.

Android, here we come!

Preface

I haven’t touched an Android phone for years (slight exaggeration) until the past 2 weeks, so I am not fully aware of the best practices / UI paradigm of the Android World. The current goal is parity with the iOS app. In cases where this deviates from Android conventions, we plan to tend towards no difference between the app for now. In major deviations, we will implement the Android difference and definitely go back in a second pass and Android-ify more things.

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 already planned 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) was released with the pending 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 as 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 and keyboardDidHide 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 for TextInput, iOS requires auto, center, justify, left, right and Android supports start, center, end.
  • Our Slider (sort of like swiping through Tinder cards) JS implementation does not currently work in Android.
  • There does not seem 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
🔶 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 LinkingIOS 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!

Comments

Coments Loading...