Color Your Apps in React Native Using Material Palette

No items found.

In short

The article introduces "react-native-material-palette," a React Native library wrapping the Palette API for extracting prominent colors from images. Developed in Kotlin, it offers 100% test coverage, supports image caching, and facilitates tasks like styling screen color schemes based on images. Future plans include extending support to iOS and allowing customization of color profiles. The open-source library is available on GitHub for developers to explore.

Introduction

Successful apps invest in good visual design. That’s essential for a pleasant user experience, where our eyes are delighted with every interaction that occurs inside. Material design meant a big step forward on that matter, providing a visual language that synthesises the classic principles of good design with the innovation and possibility of technology and science. Material as a metaphor, graphically intentional and motion as a way of providing meaning are some of the principles they established to layout beautiful experiences.

With the release of Android 7.0 Nougat, the Palette API was born. It allows you to extract prominent colors from images to help you create visually engaging apps. Mobile apps like WhatsApp leverage it (see the contact details page) and whether you are building an application following material design spec or not, that’s a really powerful feature you can make use of.

Today, I’m excited to announce react-native-material-palette, a library which wraps the Palette API in a nice JS API to use in React Native.

Which colors can I get?

According to the specification, the palette API defines by default six color profiles for a given image, being those:

  • Light Vibrant
  • Vibrant
  • Dark Vibrant
  • Light Muted
  • Muted
  • Dark Muted

Probably that sounds to you like a hieroglyph, like it did for me the first time I saw them. Let’s try to get a better insight by understanding how are they calculated.

The profiles are determined by analyzing the HSL (Hue, Saturation and Luminosity) color profile of the pixels on the image, based on predefined target ranges for luminance, saturation, and population (how many pixels in the image are represented by that particular profile). It uses a weighted average calculation with preference given to luminance, then it comes saturation and finally population.

Generally speaking, vibrant colors are more saturated than muted colors and the light/dark variations of the profiles operate on luminosity.

Enough technicalities, let’s move to the library itself.

The React Native module

Let me highlight some of the features the library offers in terms of implementation details.

Kotlin

Since Google announced on their keynote the support of Kotlin as first class language for developing Android apps, we wanted to give it a try for implementing the native part. Kotlin is certainly an awesome language to work with, very easy to set up and the runtime library is less than 1KB. Also, as of RN 0.47, react-native link works for modules developed in Kotlin, so you don’t have to worry about manually setting up project dependencies.

100% test coverage

We have created this library having in mind robustness but also future external contributions. The JS logic is fully tested with Jest, so not only we make sure the functionality works as expected, but also external contributions can be speeded up by just committing to the test suite we put into place.

Caching

We use Fresco on the native side to automatically cache images downloaded from the internet, so that we have a good performance in our applications.

Use cases

Our API supports basically two use cases, which are image galleries and styling screen color schemes based on a particular image. A picture paints a thousand words so here you have a visual cue of what you can achieve with the library:

Image gallery

Image gallery library material pallet

Styling screen color scheme based on an image

Styling screen color screen

Future plans

There are still some limitations that we are planning to overcome for the upcoming future:

iOS support

At the moment the library only supports Android. However it’s feasible to extend the functionality to iOS as well, since the algorithm is open source and there’s been already successful attempts to port it to other environments, such as web. If you would like to help out on that, PRs are more than welcome!

Customizing your own profiles

The API provides six color targets by default. Sometimes, a given image has no colors fulfilling the criteria of the predefined profiles. It’d be useful to define some custom targets in addition to the existing ones, with different weighting and target lightness and saturation values, in order to increase the chance of finding a useful color. It’s in our roadmap to support that as well.

Example app

You can find the whole API in the github repository. We also have an example app available for you so that you can play with it immediately :)

What are you waiting for? Take the brush and enjoy! You can also discover services offered by our React Native development company.

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.