pwd > ninjaPixel/v2/man-drawer/react-native-notes-004

React Native Notes – 004

Published

After releasing Wobble Time to the app store earlier this week it was time to buy an Android phone and rebuild my shiny new app for Google's Play Store.

I expected to hit a few snags along the way, and I did. Some styling rules don't render the same on Android as they do on iOS (but being a web developer, I'm more than used to dealing with such issues), the Android emulator is finicky – it enjoys taking full advantage of 4 cores and is partial to crashing. However, the most challenging difference so far has been using the motion sensors with Android.

I'm using Expo's DeviceMotion API to access the device's rotation values. My app times how long you can keep a wobble board upright and therefore needs frequent updates from the motion sensors. When I use the app on Android it's sluggish to respond to the changing orientation of the phone.

Fig 1: After creating a 50ms subscription to ah iOS and Android device, the regularity of updates was very different between the two devices
Fig 1: After creating a 50ms subscription to ah iOS and Android device, the regularity of updates was very different between the two devices

I decided to place the Apple and Android side-by-side and monitor the output from the motion sensor. With the Apple, the alpha

Note about the rotation values: If you were to place your phone on a flat surface in front of you:

  • alpha changes if you rotate your phone around while keeping it on the table.
  • beta changes when you tilt the phone back or forth (i.e. along its short edge, assuming it's in portrait orientation)
  • gamma changes when you tilt the phone left or right (i.e. along its tall edge, assuming it's in portrait orientation).

This works flawlessly on the iPhone. With the Android however, I noticed that tilting the phone also changes the alpha (so if beta or gamma change, alpha also changes). Additionally, if I pass a ferromagnetic metal (e.g. my penknife) near the Android, the alpha value changes considerably; the iPhone is not effected by this.

This is annoying, but again not an explanation for why my app feels so sluggish on the Android. It actually seems that the motion sensor in my Android device is just not capable of outputting a new reading every 50ms. I have tested the Wobble Time app on 4 physical iOS devices, including an old iPad, and there were no problems with the hardware. I imagine that premium Androids have better motion sensors but I can't afford to buy another test device to find out. The Android Sensor API has a getResolution method that will tell you the maximum practicable update frequency, unfortunately it's not exposed in React Native. It would be useful in telling a user that their device is not capable of running an app, but if you want to launch a paid app then you need to block the user from buying it in the first place - it'd be no good taking their money only then to tell them that their sensors aren't good enough - and I can't find any way to block distribution in the Play store based on a device's sensor capabilities.