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:
- Go to issues.
- Open an issue with a clear title, description and tag.
- 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:
- Fork repository
- Clone your fork
- Make your changes (add branches if needed)
Committing:
- Check that your code is running properly on your local machine.
- 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).
- Merge PR into the main branch.
- 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