react-native-palette-picker

Android Color-palette API implementation for React Native Apps

Installation

• React Native CLI
• Install this package using npm or yarn

with npm:

npm install react-native-palette-picker

with yarn:

yarn add react-native-palette-picker

Usage

import React from 'react'
import { getPalette, type ImageColorsResult} from 'react-native-palette-picker';

const useImageColors = () => {
  const [colors, setColors] = React.useState<ImageColorsResult>(null);
  const [err, setErr] = React.useState<unknown>();

   React.useEffect(() => {
    const imgUri = "https://i.imgur.com/RCRf1Sx.jpeg";
    (async () => {
      try {
        const res = await getPalette(imgUri, {
          fallback: '#ff0000',
          fallbackTextColor: '#ffffff',
        });
        setColors(res);
      } catch (error) {
        setErr(error);
      }
    })();
  }, []);

  return colors
}

API

getPalette(source: string | number, config?: Config): Promise<ImageColorsResult>

uri

A string which can be:

• URL:

  https://i.imgur.com/RCRf1Sx.jpeg

• Local file:

  const img = require('../assets/img.jpg');

• Base64:

  const base64 = 'data:image/jpeg;base64,/9j/4Ri...';

  The mime type prefix for base64 is required (e.g. data:image/png;base64).

Config?

The config object is optional.

| Property | Description | Type | Default | | ------------------- | ------------------------------------------------------------------------------------ | -------- | --------- | | fallback | If a color property couldn't be retrieved, it will default to this hex color string | string | "#000000" | | fallbackTextColor | Text color used when getting color fails.(titleTextColor,bodyTextColor). Must be hex | string | "#FFFFFF" |

ImageColorsResult

| Property | Type | | ---------------- | -------- | | dominant | string | | vibrant | string | | darkVibrant | string | | lightVibrant | string | | darkMuted | string | | lightMuted | string | | muted | string | | titleTextColor | string | | bodyTextColor | string |

Notes

• There is an example app.

Future work

• [ ] iOS support (need ios dev)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

If you are experienced with iOS development and would like to contribute, please feel free to submit pull requests or open issues related to iOS support. Your contributions will be greatly appreciated and will help make this library more versatile.

License

MIT

Made with create-react-native-library