react-native-knob

A simple and fully customizable React Native component that implements circular progress bar.

It uses react-native-reanimated to get 60fps animation. and react-native-gesture-handler for the gestures.

NPM package

Works on both iPhone and Android

| Iphone | Android | | :---: | :---: | | | |

Installation

If using yarn :

yarn add react-native-knob

If using npm :

npm i react-native-knob

Additional installation steps

Don´t forget to install pods if they are not installed yet

For ios from your root app folder run :

cd ios && pod install

For android :

You will need to add those lines in your java files if not already done on your project. It concerns the react-native-gesture-handler package see documentation here

Usage

See Example app for testing.

import React, { useState } from 'react';
import { StyleSheet, View, TextInput, Button, Text, Dimensions } from 'react-native';

import { Knob } from 'react-native-knob';

export default App = () => {
  const [val1, setVal1] = useState(0);
  const [knobValue, setKnobValue] = useState(0);
  const { width, height } = Dimensions.get("window");
  const [isLandscape, setIsLandscape] = useState(height < width);
  let buttons = [-100, -33, -25, 0, 25, 33, 100];

  callback = (values) => {
    setKnobValue(values[0]);
  }

  updateKnobValue = (value) => {
    _knobRef.setValue(value === 0 ? value : knobValue + value);
  }

  onLayout = () => {
    console.log("layautChangeApp");
    const { width, height } = Dimensions.get("window");
    setIsLandscape(height < width);
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: isLandscape ? 'row' : 'column',
      alignItems: 'center',
    },
    labels: {
      flex: 1,
      flexDirection: isLandscape ? 'column' : 'row',
      justifyContent: 'center',
    },
    label: {
      flex: 1,
      textAlign: 'center',
    },
    buttons: {
      flex: 1,
      flexDirection: isLandscape ? 'column' : 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      padding: 10,
      marginHorizontal: 50,
      backgroundColor: '#E03997',
      color: 'white',
    },
  });

  return (
    <View style={styles.container} onLayout={this.onLayout}>
      <View style={styles.labels}>
        <TextInput
          value={knobValue.toString()}
          style={styles.label}
          ref={component => _textInput1 = component}
        />
        <TextInput
          style={styles.label}
          ref={component => _textInput2 = component}
        />
        <TextInput
          value={val1.toString()}
          style={styles.label}
        />
      </View>
      <View style={styles.buttons}>
        <Button
          style={styles.button}
          title="Change State"
          onPress={() => setVal1(val1 + 1)}
        />
      </View>
      <View style={styles.buttons}>
        {buttons.map((val, i) => <Button
          key={i}
          style={styles.button}
          title={val.toString()}
          onPress={() => updateKnobValue(val)}
        />)}
      </View>
      <Knob
        ref={component => _knobRef = component}
        margin={0}
        padding={32}
        strokeWidth={80}
        value={knobValue}
        maxValue={100}
        rotation={0}
        negative={true}
        colors={['#F0EFF5', '#E03997', '#6435C9', '#A5673F', '#AAA', '#888', '#666', '#444', '#222', '#000']}
        gradientInt={[{ offset: '50%', stopColor: '#000' }, { offset: '80%', stopColor: '#E03997' }]}
        gradientExt={[{ offset: '100%', stopColor: '#E03997' }, { offset: '80%', stopColor: '#000' }]}
        textStyle={{ color: '#E03997' }}
        {...{ callback }}
        style={{ flex: 2 }}
      />
    </View>
  );
};

Controlled component

You can set the Knob´s value imperatively using a ref on the Knob component and calling the _knobRef.setValue(value : number) on it. (See example above)

If you change the state of the parent´s knob component, it will not rerender the knob. So you can´t control the value of the knob with a parent variable state.

Other imperative calls

initKnob(val: number)

You HAVE TO call setValue(value) before using initKnob, if you want to set a value.

resetInit

When callbackInit is called, use this function to reset the 'init' state of the knob. You can´t set the 'init' state and reset it in the same call.

Responsive

The component will resize automatically to take all the space available by his container in landscape mode or not.

Documentation

Knob Component

| Name | Description | Type | Default | |---------------------------|------------------------------------------|-------------|--------| | margin | Space between edge of canvas and knob (included the knob´s decoration internal gradient). You can provide a percent like this xx.xx% | number | string | 0 | padding | Space between gradientInt and knob. You can provide a percent like this xx.xx% | number | string | 0 | strokeWidth | Width of the animated circle. You can provide a percent like this xx.xx% | number | string | 20% | strokeWidthDecoration | The circle under the progress one | number | 30 | value | Explicit | number | 25 | maxValue | You can set any number value that you want. The full knob will reach on maxValue | number | 100 | rotation | Begin position where the knob start. Value unit is in Radians. 0 is position to the right like in trigonometric circle. Under the hood, it´s a style transform using here. | number | -Math.PI / 2 | negative | If your want the knob can be negative and goes inverted | boolean | true | colors | The colors of each loop. The first color is for decoration knob. | Array | ['#F0EFF5', '#00b5ad', '#2185D0', '#B5CC18', '#FBBD08', '#F2711C', '#DB2828', '#E03997', '#6435C9', '#A5673F', '#AAA', '#888', '#666', '#444', '#222', '#000'] | gradientInt | If you want to decorate your knob with an internal radial gradient | Array | [{ offset: '50%', stopColor: '#000' }, { offset: '80%', stopColor: '#fff' }] | gradientExt | If you want to decorate your knob with an external radial gradient | Array | [{ offset: '100%', stopColor: '#fff' }, { offset: '90%', stopColor: '#000' }] | textStyle | You can customize the text inside. FontSize is a percent of the canvasSize | object | { color: 'white', textAlign: 'center', fontSize: '12.5%' } | textDisplay | If you don´t want the text in the middle | boolean | true | style | Change style of the knob main container | object | true | callback | This function will be called each time the knob´s value change. First param is an array and first value is the value of the knob | (values: readonly number[]) => void | callback: () => { } | callbackInit | This function will be called if you call imperatively the initKnob function. Allow you to know when the knob is ready to be dispayed if you have performance or refresh issues. In this callback, you can setState a display variable to show your parent component when the knob is ready. | (values: readonly number[]) => void | callback: () => { } | canvasSize | Fix the size of the canvas. Optional, if not provided, the size adapt to the space available to his container | number | undefined

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Compilation

npm run build

Test on Example App

npm pack && cd example/ && npm i ../react-native-knob-2.3.2.tgz

Author

Réan Guillaume

If you want to eat better and healthy, i recommand to check out my mobile app dietethic this component was created to allow daily better food recording.

License

MIT

Special Thanks

Thanks to William Candillon and his youtube chanel | can it be done in React Native ?