Build for Scale: Use a Design System in your React Native app. Part 2: Design Systems in React Native

Introduction

This series of build for scale: Is About the advanced way to use React native app.

I will talk about methods, best practices, how-to use guides, and advanced approaches on how to use the most used tools, and packages. Taking into account how to structure it in your app, how to architect the solution, and advanced approaches for a performant, secure, and scalable app.

This series is perfect for React Native developers of all levels who want to take their skills to the next level and build apps that stand the test of time. Whether you’re a seasoned professional or just starting, you’ll find invaluable knowledge and practical guidance to transform your React Native development journey I explained in the previous article how to optimise

In the first part, I talked more about the design systems in general and their reusability. In this one, I will be talking about the Mobile Design system, and some libraries that you can use to achieve that in react native.

What a Mobile Developer should include in the Design?System?

To develop a lightweight design system, you need to include as a must the following:

Visual Style?Guide:

This is like the DNA of your app’s appearance. It defines the look and feel, setting the tone for the entire user experience. Here’s what it entails:

• Color Palettes: Establish a set of colors that harmonize with each other and reflect the brand’s identity. This includes primary, secondary, and accent colors, as well as any additional colors for specific purposes like error states or notifications.
• Typography: Choose fonts that align with the brand’s personality and ensure readability across different screen sizes. Specify font families, sizes, weights, and styles for headings, body text, and other elements.

check my article about the usage of Custom fonts here

• ?Iconography: Create a consistent set of icons that are easily recognizable and complement the visual style of the app. Define guidelines for icon sizes, styles, and usage to maintain coherence throughout the interface.?
• Spacing & Layout: Guidelines on spacing between elements, margins, padding, and overall layout principles. You can use the Responsive library to define margins and sizes that can be used inside your app.

You can check my article about using Icons here

UI Components Library:

Think of this as a toolbox filled with all the building blocks needed to create the app’s interface. It’s like having a set of Lego pieces that you can assemble and reuse across different screens. What you can include:

• Buttons: Define different button styles (e.g., primary, secondary, ghost) along with their states (e.g., normal, hover, active) and sizes. Specify when and how each button style should be used. You can make them more performant and more user-friendly by adding Animation or Throlling when clicking
• Input Fields: Provide various input field types (e.g., text input, password input, date picker) along with guidelines for their appearance, behavior, and validation. You can add some animation or use Debouncing for a good performance
• Cards: Specify the structure and styling of cards used for grouping related content or presenting information in a modular format. Define variations for different card types (e.g., information cards, action cards) and their interactions.
• Navigation Bars: Define the layout and functionality of navigation bars, including primary navigation, secondary navigation, and breadcrumb navigation. Specify guidelines for navigation items, menus, and navigation patterns (e.g., tabs, side navigation).

Other Components and Ideas

1. Custom Image: You can use a Custom Image for your images. Taking into account no existing image, caching,?… ( check this article to use React native fast image for your React Native project )
2. Custom Text Component: To use your Typography inside. You can go with using different naming to be used inside the app or custom the size by props.
3. ?Loading Component: To Define Loading in your app ( either a simple spinner or maybe a custom Animation that you want to include)
4. List and ListItem

Dark Mode

How to create a Design system in React?Native:

To create a design system, you have two approaches: Start from scratch or custom a predefined library.

Start from Scratch

To start from scratch, you have different options.

1. Use Styling, and plugins to create your own Design system

For example, you use Pressable from React native to create your custom button. Define the Theme object and pass it using React Context to the rest of your app. You can define the spacing, and typography,?… and create your own components.

1. Use styling libraries such as Styled.?

The only advantage to using Styled and not normal styling from React native is the clarity of code. You can have a good structure, easy-to-read code, and well-defined if you use Styled.

Customize a Component Library

One of the famous react native Component libraries are:

1. React Native Elements

React Native Elements is a comprehensive UI toolkit for React Native, providing a wide range of customizable components and styles out of the box.

• GitHub Stars: 24.6k
• GitHub Link

Why You should use it?

• Offers a large collection of pre-designed components, including buttons, inputs, cards, and more.
• Easy to customize and extend with support for theming and custom styling.
• Actively maintained with regular updates and a large community of contributors.

2. NativeBase

NativeBase is a cross-platform UI component library for React Native, offering a rich set of ready-to-use components with extensive customization options.

• GitHub Stars: 20k
• GitHub Link

Why You should use it?

• Provides a wide variety of fully customizable components, including navigation, form elements, and layout grids.
• Built-in support for theming and styling with a flexible theming API.
• Offers seamless integration with other popular libraries like React Navigation and Redux.

3. React Native Paper

React Native Paper is a material design component library for React Native, offering high-quality, customizable components that adhere to Google’s Material Design guidelines

• GitHub Stars: 12.2K
• GitHub Link

Why you should use it?

• Provides a set of well-designed, fully customizable components following Material Design principles.
• Lightweight and optimized for performance, with a focus on delivering smooth animations and interactions.
• Offers excellent documentation and community support, making it easy to get started and troubleshoot issues.

Conclusion

This part was more about the Design system for Mobile, and specifically for tools to use if you want to create one using React Native. The next part will give an example of a Design system implementation using React Native and React native Paper

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium

#reactnative #react #typescript #mobiledevelopment #engineering #patterns #bestpractices #memoryleak #performance #scaleApp #fastApp #userexperience

?