Designer Meets React Native

4 Lessons Learned Building Joy with React Native

John Choura Jr.
Sep 29, 2018 · 6 min read
Image for post
Image for post

It’s been a year since our mobile app Joy was publicly launched, and it has me getting reflective. As a product Joy has been my baby, I’ve been with it from the beginning and have been honored to help it grow into what it’s become. A lot of that journey has involved me getting hands dirty with code and using React Native to build the UI for the app. Being that I’m a designer and this was my first foray into React Native(or even React), I thought of 4 take-away’s.

1.👏Com👏pon👏ents👏

This comes as no surprise to those familiar with React and React Native (and really, the web for the past few years), but as designers are increasingly fixated with building better and more efficient design systems, componentized code just makes everything amazing. I believe what designers are aiming for when making design systems in static form, is fully actualized and realized with componentized code.

Image for post
Image for post
Some Button Component Usage
Image for post
Image for post
Button Component Guts

Extensible to no-end, thinking in components is a productive mindset for a product designer. Take, for example, a simple button. A button isn’t so simple, because in any app, a button changes based on context with what’s happening on that particular screen, so instead of building 14 buttons, we build 1 component with a whole bunch of options (as “props”).

When adding and removing props, which function as a basic true/false statements, there are styles within the component that are selected/unselected. Choosing an option like isInverse will invert the colors on the button, or isDisabled will dim the button and disable it’s onPress function.

I use a button as my example because the “button” is a quintessential piece of UI. Some designers even overly-obsess over button consistency, accuracy, usage, etc. With how these components are structured, it’s really hard to mess up using buttons. Peace of mind for those button-centric-type-a designers.

With components, I should clarify and it goes with out saying, that this thinking is not exclusive to React; component based apps and website development is very much a thing and for good reason. Code is best when it’s reusable, and that’s what components afford a well written app.

2. 🤩 Marveled by CSS-in-JS

Before React Native, my work was web development exclusive, so I understood markup (HTML) and styling (CSS or SCSS) pretty well. For some time leading up to the start of Joy, I was nervous at the prospect of styling React Native, I was unsure what that would be like. But, oh boy, was I relieved once I found out that I could use “CSS-in-JS” for all my styling needs. CSS-in-JS really bridged the gap for me.

Without getting to explain-y and probably getting some of the technical parts wrong; simply put, CSS-in-JS is what it exactly sounds like. The React Native team and community translated almost all of the CSS properties (font-size, transform, z-index, position, flex-grow, etc.) into JavaScript (fontSize, transform, zIndex, position, flexGrow, etc.). The largest difference being that the property names conform to camel case, and the syntax structure conforms to JSON. If you’re curious at the details of what they did watch this video, it’s a great explainer.

Image for post
Image for post
React Native Stylesheet const

You get to leverage the full power of Flexbox for all layout purposes, which I wasn’t super good at going into the project, but now I’m well versed.

All styles are localized to components, and we use a global variables doc that holds all of the colors, spacing increments, font sizes, etc. With this, there is less of an intense need to have global stylesheets.

One of the greatest strengths of CSS-in-JS over Sass/SCSS is the ability to have a global namespace. Since it’s all javascript, variables for styles can be used in functions and functions can be used in styles. This minimizes redundancy of re-writing logic or variables for different languages.

3. 🤓 Embrace JSON

This one is less React Native specific, but it’s a lesson I learned none-the-less. So I’ll just say it, I’m convinced, every designer (or non) working on digital products should know how to write JSON. Period. It’s a great way to structure data. It’s what API’s spit out, and it’s just some damn essential stuff. I’m kicking myself that I didn’t understand it sooner.

When building for Joy, I would often be designing and writing product requirements in tandem. Often those requirements involved some data structuring decisions. For example, if I was working on an array of transactions, I don’t want to hard-code those individual transactions. Additionally, I also have to define the data structure for how transactions would return. So I rolled up my sleeves and just wrote the data structure myself.

Image for post
Image for post
Transaction List (from data, to component, to UI)

I looped through that array of transaction objects in my JSX code, and voila! it rendered as my array.

The basics (engineers skip this part) are that there are objects and arrays. Objects are wrapped in curly brackets{} and arrays are wrapped in square brackets [].

Image for post
Image for post
JSON sample

It’s important for designers to start thinking this way, because it can bridge the gap between designers and engineers when there is sample data to talk through. Knowing the difference between strings, bools, and functions respective to a JSON table is also important. Read up designers.

4. 🤪 Animated Animations

A daunting question I had when heading into React Native development was “how am I going to make things interactive and animated?” I had no idea, but I had a guess that I could. My initial Google searches of “react native animations,” surfaced very few results. However, there was one pattern that kept popping up and it was this guy Jason Brown. He, at that time, was (and… still is) the de-facto thought leader for all things animated with React Native. I mean, sure there was Facebook’s docs, but they had no examples that I could use to wrap my head around.

So, admittedly if it were not for Jason, his Egghead tutorials, his website, the animation book he wrote, and his responding to my desperate tweets, I’d be totally lost on how to animate anything at all. Shameless plug, this guy is the godfather of this stuff. 🙌

Here are a few things I built using React Native’s Animated libraries.

Image for post
Image for post
Animations on animations on animations

Wrapping it up

All of these lessons are just the tip of the iceberg in a long list of benefits that I discovered when building Joy. Excited to keep learning more as we keep making Joy better. Also, I’m NOT claiming React Native is the best framework for compiling to native code, but it’s a goodie.

Thanks for reading!

Image for post
Image for post

This article was written about Joy — Money App, a real financial product that helps humans spend happier, and save better. Joy was featured as Apple’s App of the Day, and you can download it on the Apple App Store.

Interested in learning more from Happy Money Design? Check out our team website, or follow us on Medium, Twitter, and Dribbble.

Join our team. Our small product focused design team is ready to grow! If you want to help design and code beautiful financial products that help change how people think about and use money, checkout our open positions here.

Happy Design

Shared thoughts and ideas from the Happy Money Design Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store