react-native-palette-picker

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