how to design react native app

Designing UI for React Native

For us designers, React Native offers something that is often not celebrated. A clean slate. When you work with the native platforms you start off with the base UI components for that native platform. Visually they are already defined, as well as interactions for the most part. With React Native that is all thrown out the window. Much like the web, basic interface functionality is built in, but you have to define how it looks.

Over the past few years I ' ve gotten into the habit of designing as a React Native developer. Here are some of the things I consider when designing a new UI that will eventually be built in React Native.

Think in Components

When I'm in my design software of choice I'm already thinking in components. As many designers already think this way when designing out a UI. I like to take it a little further. How do these components interact, which components are nested in which components. Most importantly, how can this component be reused throughout the UI. Can I adjust this one card view to work across the board, instead of having <SettingsCard /> <NewsFeedCard /> <OnboardingCard />.

Think about the Component API

If you are the React Native developer that will be building out this UI or not, it is important to consider the API design of the components you are designing. The button you have designed that will be built out as a component. Is the API interface for that component going to be complicated. Have you created 20 versions of buttons with different, sizes, weights, colors and tap effects. Or is it simply type = (primary, secondary, dangerous), size =(small, medium, large). Thinking about the components API not only saves time and headaches in development but also adds a healthy constraint to your design process. As well as unifying and apply a consistency to your interface.

Make your components responsive

Often times when designing for mobile we neglect the concept of scaling, components being responsive to screen size. Now days it is standard practice to think about this when designing for the web. You should design your components in a way that they can easily scale without overlapping or causing weird UI states. If your component can't then it is time to think about how it can. Have that component have multiple states. How does it look on a mobile phone vs a tablet, portrait vs landscape. Don't let your design be the limiting factor for multiple device support.

Consider the platform

I've spent a lot of time designing and building cross platform (iOS/Android) apps. The biggest lesson I learned was not to ignore the platform you are on. If you are designing for Android, don't make it feel like iOS. Study the UI design of that platform and try to integrate that into your design. This is a great strategy to improve the usability of your app. When a user opens your app for the first time, if the UI is familiar they can more easily understand it. For example Android uses large bold colored title bars and iOS doesn't. The material UI on Android uses a lot of card views and tabs in the title bar. Where as on iOS things are more flat design with tabs at the bottom of the screen.

Let the native platform help

In some cases it is just silly to create some UI from scratch. For example, a date picker. It is just not practical unless you are doing something specific. Lean in and use the native date picker and save yourself and team a lot of time. Incorporate native components where you can. If the support from React Native is not styled by default, style it. Or find a library that imports the component natively that is already styled.

Use One Color

This is more of a personal preference and doesn't necessarily apply to just React Native UI design. When approaching a new UI design I limit myself to black and white. When I get to the point where I need a pop of color I pick one accent color. The final UI always ends up with more colors, but this constraint up front allows me to explore multiple UI's without having to worry so much about the colors. I tend to spend a lot of time tweaking color values. So for me, limiting myself from the beginning can really speed up my process.