We, web engineers at In The Pocket, are hip kids. We like to use the latest language features and syntax, which usually is more readable and easier to write than old clunky constructs. However, always be aware of limitations of the OS' Javascript engine.

This week we encountered a bug on Izime that was only reproducible on iOS 11, to be more specific 11.0. The issue wasn't reproducible on iOS 11.4. The bug was traced to this line.

const notifications = data?.pages.flat();

ES2019 introduced the Array.prototype.flat() method that creates a new array with all the elements of the subarrays concatenated to it recursively up to a specified depth. This feature is supported by JavaScriptCore as of the version shipped with iOS 11.4

We wrongly assumed Babel would transform to a compatible implementation for older iOS versions. A good pointer is to check the React Native documentation when you want to use new syntax.

One option was to use the oldschool implementation:

const notifications = [].concat(...data?.pages);

Or the very oldschool implementation:

const notifications = [].concat.apply([], data?.pages);

But eventually we decided on adding a polyfill ourselves. So we can keep on using the hip syntax without any issues.