Bringing Material Palette API to React Native
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
android
docs Feat/docs prerelease (#39) Aug 20, 2017
example
flow-typed/npm
src
.editorconfig
.eslintignore
.eslintrc
.flowconfig
.gitignore
.yo-rc.json
CODE_OF_CONDUCT.md
LICENSE
README.md
jsconfig.json
package.json
testSetup.js
yarn.lock

README.md

react-native-material-palette

Build Status Code Coverage Version MIT License

PRs Welcome Chat Code of Conduct

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!

image

image

Development

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