{"id":13776523,"url":"https://github.com/callstack/react-native-material-palette","last_synced_at":"2025-06-28T23:41:59.336Z","repository":{"id":57338313,"uuid":"93402738","full_name":"callstack/react-native-material-palette","owner":"callstack","description":"Bringing Material Palette API to React Native","archived":false,"fork":false,"pushed_at":"2018-06-28T13:47:09.000Z","size":1541,"stargazers_count":104,"open_issues_count":7,"forks_count":11,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-05T09:58:12.367Z","etag":null,"topics":["material-design","material-ui","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/callstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-05T12:43:41.000Z","updated_at":"2024-07-13T15:01:11.000Z","dependencies_parsed_at":"2022-08-31T03:51:41.494Z","dependency_job_id":null,"html_url":"https://github.com/callstack/react-native-material-palette","commit_stats":null,"previous_names":["callstack-io/react-native-material-palette"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-material-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-material-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-material-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-material-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callstack","download_url":"https://codeload.github.com/callstack/react-native-material-palette/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551595,"owners_count":21926320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-design","material-ui","react","react-native"],"created_at":"2024-08-03T18:00:28.130Z","updated_at":"2025-05-11T10:31:05.515Z","avatar_url":"https://github.com/callstack.png","language":"JavaScript","readme":"# react-native-material-palette\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n[![Chat][chat-badge]][chat]\n[![Code of Conduct][coc-badge]][coc]\n\n[Android Palette API](https://developer.android.com/training/material/palette-colors.html) brought to react native. It extracts prominent colors from images to help you create visually engaging apps. At the moment it only supports Android.\n\nCheck out [this medium article](https://blog.callstack.io/colour-your-apps-in-react-native-using-material-palette-35448df91958) for a broader introduction!\n\n## Installation\n\nInstallation and setup guide can be found here: [Setup guide](./docs/SETUP.md).\n\n## Usage with `createMaterialPalette`\n\n```js\nimport { createMaterialPalette } from \"react-native-material-palette\";\n\nconst palette = await createMaterialPalette({ uri: 'http://dummySite/images/yummy.jpg' });\n```\n\n## Usage with `MaterialPaletteProvider` and `withMaterialPalette`\n\n```js\nimport { MaterialPaletteProvider, withMaterialPalette } from 'react-native-material-palette';\n\nconst PaletteView = withMaterialPalette(\n  palette =\u003e ({ backgroundColor: palette.vibrant.color }),\n)(View);\n\n// later ...\n\n\u003cMaterialPaletteProvider\n  image={require('../assets/image.png')}\n  options={{\n    type: 'vibrant',\n  }}\n  defaults={{\n    vibrant: {\n      color: '#3792dd',\n      bodyTextColor: '#ffffff',\n      titleTextColor: '#ffffff',\n    },\n  }}\n\u003e\n  \u003cPaletteView style={{ flex: 1 }}\u003e\n    \u003cText\u003eHello World\u003c/Text\u003e\n  \u003c/PaletteView\u003e\n\u003c/MaterialPaletteProvider\u003e\n```\n\n## API\nFull API documentation can be found here: [API documentation](./docs/API.md).\n\n## Future work\n- [ ] iOS support\n- [ ] Providing own color profiles\n\n## Example app\nThe repo includes an example app that covers all the API cases. Go [here](./example) to try it out!\n\n![image](https://user-images.githubusercontent.com/4982414/29513573-0f5acf5a-8666-11e7-989e-30409a50cb8c.png)\n\n![image](https://user-images.githubusercontent.com/4982414/29513689-5f64b4ac-8666-11e7-86fc-0eeea7813630.png)\n\n## Development\n\nDevelopment instructions can be found here: [`react-native-material-palette` development](./docs/DEVELOPMENT.md).\n\n\u003c!-- badges --\u003e\n[build-badge]: https://img.shields.io/circleci/project/github/callstack/react-native-material-palette/master.svg?style=flat-square\n[build]: https://circleci.com/gh/callstack/react-native-material-palette\n[coverage-badge]: https://img.shields.io/coveralls/github/callstack-io/react-native-material-palette.svg?style=flat-square\n[coverage]: https://coveralls.io/github/callstack-io/react-native-material-palette?branch=master\n[version-badge]: https://img.shields.io/npm/v/react-native-material-palette.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-native-material-palette\n[license-badge]: https://img.shields.io/npm/l/react-native-material-palette.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs-welcome]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/callstack/react-native-material-palette/blob/master/CODE_OF_CONDUCT.md\n[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square\u0026colorB=758ED3\n[chat]: https://discord.gg/zwR2Cdh\n","funding_links":[],"categories":["\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Freact-native-material-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallstack%2Freact-native-material-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Freact-native-material-palette/lists"}