Skip to main content

Getting Started

Installation​

Simply install the material-color-react-native on your React Native project

npm​

npm install material-color-react-native

yarn​

yarn add material-color-react-native

pnpm​

pnpm install material-color-react-native

🎉 That's it, no additional steps needed.

Usage​

Basically, the main purpose of this library is to get material color from an source color (Hex code), from an source image, or from an Android personal wallpaper or selected color in their system style.

Choose one (or all) of these ways to fulfill your needs

Build Material Color from Source Color and/or Image​

Build a material color from a hex code color, or from source image. This is similar as you choose a source color or an image from Material Theme Builder website to get color scheme of Material Color. Let's learn how to use it.

Android Dynamic Color​

Special utility in Android platform since Android 12 (SDK 31), that Google introduced Material Design 3 a.k.a Material You, and brought their APIs for enabling users to personalize their color experience in your app from user personal wallpaper or through selected color variants in the wallpaper picker. Let's try in my Android app.

Theming with React Native Paper​

Fortunately, you can bring this library with react-native-paper seamlessly to build your app beautifully with Material Design components. Get material color from this library, and provide it to React Native Paper color provider. Go for it!