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.