react-native-semicircle-slider-color-picker v0.1.0

react-native-semicircle-slider-color-picker

This component is actually a semi circle slider but it is designed in this way that you can use it as color picker too.

Install

npm i react-native-semicircle-slider-color-picker

Usage

import React, { useState } from 'react';
import {
  SafeAreaView,
  Text, 
  StyleSheet,
} from 'react-native';
import ColorPickerSlider from 'react-native-semicircle-slider-color-picker';

const App = () => {

  const [colorValue, setColorValue] = useState<number>()
  const [color, setColor] = useState()

  const colorChanged = (value: number) => {
    //console.log('here is value', value)
    setColorValue(value)
  };

  return (
    <SafeAreaView style={styles.mainContainer}>
      <ColorPickerSlider
            thumbColor={color?.hexColor?? 'grey'}
            trackStrokeWidth={20}
            gestureDisabled={false}
            trackRadius={150}
            circleType={"Top"}
            value={colorValue}
            onValueChange={value => colorChanged(value)}
            onChangeColor={color => setColor(color)}
          />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    width: '100%', 
    height: '100%', 
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default App;

Props

MIT Licensed