React Native Color Wheel

A highly customisable hsv color wheel package for React Native projects.

Features

• Can add a custom component inside the main color wheel component
• Can convert the selected color to one of six formats (rgb, rgba, hsl, hsla, hsv, hex)
• Compatible with Android and IOS

Installation

You need to install react-native-svg to be able to use this package.

Install with CLI:

  npm install @ziadalkalza/react-native-color-wheel

OR

  yarn add @ziadalkalza/react-native-color-wheel

Install with Expo:

  expo install @ziadalkalza/react-native-color-wheel

Screenshot

Usage

import ColorWheel from "@ziadalkalza/react-native-color-wheel";

function App() {
  return (
    <ColorWheel
      lightnessSlider={{
        enable: true,
        orientation: "horizontal",
        direction: "negative",
        trackWidth: 8,
        xOffset: 30,
        yOffset: 185,
        minValue: 50,
      }}
      hueWheel={{
        size: 170,
      }}
      dimensions={{
        type: "relative",
        height: 220,
      }}
    />
  );
}

Documentation

For component reference, please check the Documentation.

Support

For any enquiries about the package, feel free to contact me through my github, or report an issue.

To report an issue:

1. Go to issues.
2. Open an issue with a clear title, description and tag.
3. Make sure you include:
   • A thorough explanation of the issue.
   • Steps to reproduce the issue.
   • Any error logs.

Contributing

Contributions are always welcome! I am happy to accept any feedback and suggestions for improvements.

Making modifications:

1. Fork repository
2. Clone your fork
3. Make your changes (add branches if needed)

Committing:

1. Check that your code is running properly on your local machine.
2. Make sure that the PR is linked to an issue. If no issue exists, please create an issue for it (this ensures there is good communication and all PRs are clear).
3. Merge PR into the main branch.
4. PR title should be in the format of prefix:issueNumber/Title

Prefixes:

• fix: bug fix
• feat: new feature
• ref: changes that dont fix issues or add new features
• perf: code that improves performance
• conf: changes that don't affect the end user
• doc: changes to documentation
• test: adding/editing tests

License

MIT