React Native Notes – 001

I've quit my day job as a web developer and am dedicating the next 6 months of my life to mastering React Native development. These are my notes along the way.

I've been building web apps for years. I love doing it and I'm pretty good at it now. Moving to native development has required a bit of a shift in where I place the bars. In web development it is a goal to make sure that that the (web) app's experience is consistent across devices and browsers. I celebrate unique and well-designed web sites. However, taking such an approach in native app development is the wrong approach. Android and iOS have strong design systems associated with them – design systems that the phone user is very used to, knows well, and expects to see in front of them. To build an app (I'm not including games here or 'immersive' apps like Headspace) using your own UX patterns, custom components and designs is an anti-pattern. Unless you are a talented designer, with deep knowledge of mobile platforms and are running UX tests on your designs, you shouldn't be rolling your own custom design to a native environment. I'll double-down on this statement if you justify it by saying "it's so that users have a consistent experience across different platforms". If you do need this, then you should probably use the web (or a PWA if you need some offline behaviour). Native components offer a buttery smooth experience, if you're deploying a native app then it's unforgivable not to leverage this because you're making compromises so that your app is the same on iOS and Android. For example, I've seen so many examples of stuttery side navigations (which is a Material Design thing, without a native iOS component) implemented in iOS apps.

Like it or not, Apple and Google have very established design guidelines. When building for iOS it is your duty (to the iOS users) to follow the Human Interface Guidelines (and likewise for Android users with the Material Design guidelines). You gotta think about their expectations when it comes to apps on their phone - they expect something that feels native to their device: it feels like the other apps on their phone, both in a visual sense and a physical sense with those buttery smooth animations. Don't confuse mobile app development with web development, where the website is yours and visitors expect unique designs and are more open to learning the behaviour and exploring the layout of your site.

I like to think of apps as physical things. Android and iOS users are not the same, the 'physical' world feels slightly different to each of these cohorts, based on what they are used to. If you're going to all the effort of using React Native, then do it properly and separate your iOS design from your Android design. If you're using your own colours, make sure that they are as good as the system colours. For example, on iOS the "system red" is a different shade depending on whether you are in light mode or dark mode, and additionally if you are in an accessible mode. So that's four different values just for system red.

I've been disappointed at some of the libraries and boilerplates that I've discovered so far. For example, Infinite Red's Ignite has clearly had a lot of time and effort pumped into it but it encourages the use of a completely custom app UX with a single design accross platforms. The app drops frames all over the place and it feels like the stuff I was building with Cordova in 2017. I get it though, they are a React Native consultancy and have to build what their paying clients want which, no doubt, is one design across platforms.