HustleTime Development: Delays on Android

With so many of my friends being Android users, I had aimed to keep Android and Ios released in sync, so that all features were available concurrently.

But it’s been 3 weeks since my last post here, and that’s because Android, as usual, is giving me a ton of problems, and I’ve decided not to move forward with new Android releases until I can finish out the build on Ios.

The problems are two-fold. One stems from a strange issue I’m having with react-native-maps library and the component hierarchy, the other has to do with how react-native-maps handles displaying markers over the map.

The <MapView> is particularly finicky, and renders on top of everything, except for components in the same level. For example:

<MapView
  style={{zIndex: -1}}
/>
<Marker
  style={{zIndex: 1}}
/>

works fine, rendering the Marker over the map. The larger issue is when I am rending within HustleTime’s hierarchy, which looks like this:

App<<Home<<MapContainer<<Markers

In this structure, <MapContainer/> renders on top of everything rendered in <App/> and <Home/>, and since zIndex only cares about elements in the same file, and because <App/> and <Home/> both render things to the screen (alerts and buttons respectively) I’ve needed to compress the entire Home component into <MapContainer/>, and move a number of functions from <App/> into <MapContainer/>. This is bad.

My theory is that with this structure, when the <MapContainer/> is re-rendering, it’s doing a lot more work, and it’s slowing things down significantly.

Another major problem I’m having is with the <DefaultMarker /> component. <DefaultMarker /> displays smaller, grayed out markers over stations outside your search radius.

On the bottom right of the screen you can see several stations on the map, giving a user a guide so that they can move the map around to other stations. This is a fairly important feature, and for some reason, in Android, rendering these 497 markers can take up to 3 minutes. That’s unacceptable.

I’ve managed to prevent them from having to re-render, but the initial render is a major lag, and it’s preventing the app from working properly.

There’s a larger solution that involves some math and the map, and rendering only those markers that are viewable on the screen, but that solution is also rife with issues, I’m afraid that when the map is dragged, there won’t be markers to home in on.

So, considering these major issues, until I can figure out what the hell is going on, I’m going to have to put the Android implementation on hold.

There’s a basic working app there now (though it’s got its problems) and I just can’t spin my wheels trying to figure out Android right now. If anyone is willing to help, I’d gladly take it.

Thanks, and sorry android users.

Download HustleTime on android or iPhone free!