When I wrote my article on coding basics for designers, I wrote it with my previous web experience in mind. Before I became a designer, I’d built web products with HTML and Javascript, so it felt fair to share what I’d already had experience with.

I skimmed over mobile development because I didn’t know enough to give advice about it. I’ve designed for native apps but I’ve never built one. I decided that I wanted to learn the basics of React Native. To understand how a developer might start to build a design I gave them.

I found this great tutorial by Academind. It required a basic understanding of React and Javascript but they explained concepts well even if you don’t have that knowledge. Over the course of a few evenings, I’d sit and tinker with my Android, learning how to build a basic app with React Native.

The tutorial I followed to pick up React Native basics.

After finishing the course, I wanted to share what I took away from it as a designer. This doesn’t cover everything there is to know. It’s my honest experiences of trying out React Native, along with lessons designers can take away and put into practice.

You build everything with a few basic blocks

Design tools give you a handful of basic components you can use to craft; things like rectangles, text, and image layers. When you turn designs to code, your developer will have to recreate the interface using their own set of generic blocks.

HTML pages use blocks to create a structured interface. React Native has their own set called core components which you can use to build interfaces for mobile apps.

The components I used the most are <View> which are generic and hold other components. Sort of like <Div> blocks in HTML. You can then layer these up with components like <Text> and <Image> to create custom components of your own.

The lesson: When designing, think about how a developer would break your designs down into their core components.

Building for both platforms at once can be easy

One thing that blew my mind was that with React Native, you can build something that renders natively on both Android and iOS without extra legwork. At runtime, React Native creates the equivalent components for both Android and iOS. If, for example, you added an <Image> in React Native, it would convert it to <ImageView> for Android and <UIImageView> for iOS.

React Native components magically work for both Android and iOS. Image source

Android and iOS both have their own interface guidelines. Their engineers and designers have spent a long time researching what works well in both functions and looks. React Native takes full advantage of this. When designing for both Android and iOS, it’s important to think about platform differences.

Although there are many common patterns, some design choices that work for one platform won’t work for the other.

The lesson: Weigh up the benefits of making something from scratch versus using something that already exists.

Shared stylesheets are still amazing

When you’re designing something, it can be tempting to nudge the font size up so that it looks better in the space. This is fine until your developer sees it. By creating another text style, you’ve made their tasklist a little bit longer.

React Native uses stylesheets to apply styles to any object that has the same name. So, for example, you could build a component called <Card> that would look the same no matter where you called it. If you edit one instance of this card then all the others get updated to match.

There are some small differences in how elements are styled.

The main difference for styling between React and React Native is the way you create stylesheets. React uses CSS styles, but React Native uses JS objects. It’s easy to change but this surprised me as I’d only ever styled using CSS properties. For example, in CSS you’d use font-size whereas in JS you’d use fontSize.

Design tools like Zeplin generate these properties automatically, but not always in the right language. If you can, make sure that the styles you generate match the language your developers are using.

The lesson: Being consistent in your design is helpful for everyone.

Some features are harder to build than you think

Designers often use other apps for inspiration. We will have seen something cool in a competitor’s app that would go well in our own. Only when it gets to a developer do we find out how tough it would be to add that feature.

On web applications, for example, you can use CSS animations to animate web elements without using Javascript. It’s also easy to add animated images and manipulate them with code.

In React Native, I found that that wasn’t possible. Libraries like Lottie make adding animated elements easier, but it’s still quite fussy.

On the other hand, some things I assumed would take effort were easy to do. For Android, you can use the elevation property to add drop shadows to objects depending on how ‘raised’ they are. The default styles fit Google’s material design patterns, so you don’t need to define the styles unless you’re doing something custom.

The lesson: Seek help and advice from your developers. Work together to overcome barriers and find creative solutions.

Debugging is frustrating

Designers do a lot of work. Behind the Dribbble shots and design specs are hours of fiddling and tweaking, research and exploration. Most of what we do doesn’t get seen. Tasks like updating design docs and visually auditing design files are invisible and always necessary.

The same goes for developers. They spend a lot of time spent doing things that aren’t building the app that we don’t get to see. Whilst I was going through the tutorial, I ran into errors, even though I was following a step-by-step.

They were simple mistakes, like using { instead of (, or forgetting to take the ‘u’ out of backgroundColor. Even with practice bugs like this can be as common as typos and finding them all takes time.

I can’t say that I’m ready to build full apps yet, but trying out React Native has given me a fresh perspective. I feel more empathy with a developer’s process. When I design for native developers in the future, I’ll be able to understand how I can make my design outputs easier for them to use.

The lesson: Be empathetic, and be patient. Trust that your teammates are working as hard as they can.

Picking up a new skill is fun

Learning something new can be an emotional rollercoaster. You feel angry and upset when you don’t get it at first but elated when you finally get it right.

My goal was to finish the tutorial video and get a grip on the basics of building interfaces. And I did it! Right now I know I wouldn’t be able to build an app from scratch, but I can at least understand how it works on a surface level.

Being t-shaped gives you a competitive edge over other designers. It also makes you a stronger teammate, and it feels good being able to talk with developers on their level.

The lesson: Improve your offering as a designer and learn a useful new skill, it’s a win-win!