React Native and Components in a Nutshell
React Native is an extensible cross-platform framework where you can quickly build apps/platforms using reusable components. React Native has taken off as the framework of choice for cross-platform development as it has significantly boosted productivity being that it shares 95% of its codebase with ios and android.
Components are the Lego blocks of UI that you can use to quickly build apps; if your organization uses the same login button across web and mobile, that is an example of a component. They let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Getting Organized With a Component Library
A component library is a gathering of all the styled parts of your site or app, comprising of the elements of your design system. It functions as a style guide – a way to unify the digital style and voice.
It helps designers work in a consistent way by centralizing all of the pieces they can use to design and allows handoff to developers to be very time efficient when executed correctly. This means quicker turnaround for launches, fewer hours billed, & keeps consumers engaged in your digital offering.
The only issue with having a component library is knowing how to make it available to your employees; do you create a PDF with colors and dimensions of buttons that you store on your Sharepoint? Or do you create a page on the intranet that is locked to a certain group to update? This is where a component explorer comes in.
So Why Aren’t You Already Using a Component Explorer?
A component explorer is a centralized hub where you can document when and how to use the components you’ve built; tools and sites are built specifically to make it easy to upload designs and information for UI designers, and easy to breakdown into code for developers. Think of it like an interactive catalog that designers can populate and developers can use to shop for the building blocks they need. Some of the most popular component explorers include Storybook, Catalog, and Styleguidist.
Rather than reinvent the wheel when creating a new button, screen, or entire app, component explorers help engineers build modular UIs by visualizing components so that they can be constructed in isolation of an app’s logic and layout. This produces durable, practical components that the developer can use to create ad-hoc experiences, rather than require a designer to envision an entire interaction.
There are many advantages to using a component explorer, most centering around efficiency and branding consistency. Component explorers allow you to scale teams where UI guidance and elements can be centralized and accessed by all. This increased adoption of UI patterns by designers and developers will save money and increase consistency. Consistent component usage means consumers already know brand design signifiers, overcoming usability roadblocks when adding new features in-app. Maintaining a component explorer for your development team is similar to the way you would manage a style guide for a marketing team.
Next Steps: A Design System
We recommend adapting your design system to a component library. If your organization needs a design system or component library, let’s get you started by building a design system to your needs with a component explorer to get you up and running in mobile quickly.
Sign up for the Shockoe newsletter and we’ll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.