react-native-material-palette

Android Palette API brought to react native. It extracts prominent colors from images to help you create visually engaging apps. At the moment it only supports Android.

Check out this medium article for a broader introduction!

Installation

Installation and setup guide can be found here: Setup guide.

Usage with createMaterialPalette

import { createMaterialPalette } from "react-native-material-palette";

const palette = await createMaterialPalette({ uri: 'http://dummySite/images/yummy.jpg' });

Usage with MaterialPaletteProvider and withMaterialPalette

import { MaterialPaletteProvider, withMaterialPalette } from 'react-native-material-palette';

const PaletteView = withMaterialPalette(
  palette => ({ backgroundColor: palette.vibrant.color }),
)(View);

// later ...

<MaterialPaletteProvider
  image={require('../assets/image.png')}
  options={{
    type: 'vibrant',
  }}
  defaults={{
    vibrant: {
      color: '#3792dd',
      bodyTextColor: '#ffffff',
      titleTextColor: '#ffffff',
    },
  }}
>
  <PaletteView style={{ flex: 1 }}>
    <Text>Hello World</Text>
  </PaletteView>
</MaterialPaletteProvider>

API

Full API documentation can be found here: API documentation.

Future work

• [ ] iOS support
• [ ] Providing own color profiles

Example app

The repo includes an example app that covers all the API cases. Go here to try it out!

Development

Development instructions can be found here: react-native-material-palette development.