Introducing Carbon for React Native
Carbon for React Native provides iOS and Android components and flows following the Carbon Design System for mobile. This library allows for rapid development of mobile applications using React Native.
Features
The library follows standard React style components that can easily be used in your mobile application. Theming is built in including overriding the default Carbon color schemes. Light and dark themes are built in and can be set via the user or inherited from the OS with minimal code.
All components can be customized via style overrides but work out of the box with minimal code. Iconography from Carbon Icons can be used directly in the app via imports. Currently the library contains over 50 components and flows.
The entire library is written in TypeScript and has full TypeScript interfaces and documentation that is built and ships with the library. This should allow easier development and enforcing of prop rules via TypeScript. Supported code editors will also show the documentation and supported types directly as you code and allow quicker typeahead support.
We actively work to improve and enhance the components and ensure they are customizable to meet all use cases and needs of consumers. We also would love any contributions or expansions and open to any tickets for feature requests or changes that would simplify your app development. We welcome all Github Issues to improve and expand this library.
Components
Components in the library follow the Carbon Native Mobile design kit. This kit is designed specifically for mobile and the unique demands that mobile user interaction requests. This is used in the library to ensure that everything is fully usable and accessible.
Most components are available in standard and full-bleed format that allows for feeling more native compared to web variants. Full bleed components are usually available as a separate component overloading the underlying component.
Many components are also designed specifically for Android and iOS. The library will automatically use the appropriate style based on the OS the app is running on. The consumer does not have to do anything. The consumer can override this and force a specific design regardless of OS if they wish.
Patterns
Many standard patterns for mobile are available from the library. These are patterns designed for IBM mobile applications but are available for all. This includes accepting terms and conditions, opening document and web views as an overlay, showing Action Sheets for multiple options and confirmation flows, navigation flows, permission granting, and many more. These patterns allow simple prop passing to take advantage of and all micro flows are handled within the pattern and no coding is required on the consumer side.
Getting started
Integrating this library in existing apps or new apps is standard and simple as installing the package and using the React Native to link assets. This is all documented on the README of the project. We do require a few third party and other Carbon libraries that need to be installed. This includes:
- react-native
- @carbon/themes
- @carbon/icons
- @carbon/icon-helpers
- react-native-svg
- react-native-webview
After this simply use the components by importing them into your application in the appropriate place as needed. We also offer a demo application that is shipped with the library that you can use see real world examples and full running examples.
Example application
The library repository provides a full example application that can be ran directly in Xcode or Android Studio for seeing the components and patterns in a real working application. The example application is also in the process of being released in the App Stores and we will share when that is available and include this on the README.
Summary
We are excited that this new library is available and that mobile application developers have a full component and pattern library to provide rapid application development with minimal code. We welcome all contributions and feature requests and bug reports on our Github repository. There are not many design system libraries available for React Native so we are excited to offer this based on the Carbon Native Mobile designs!
