# react-native-radio-trimmer

> Radio trimmer for react-native

Latest version **0.2.1** (published 2019-11-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-radio-trimmer
pnpm add react-native-radio-trimmer
yarn add react-native-radio-trimmer
bun add react-native-radio-trimmer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2019-11-12 |
| First published | 2019-11-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Łukasz Kubok |
| Maintainers | khorzon |
| Keywords | react-native, radio, trimmer, circle |

## Links

- npm: https://www.npmjs.com/package/react-native-radio-trimmer
- Repository: https://github.com/Lkubok/react-native-radio-trimmer
- Homepage: https://github.com/Lkubok/react-native-radio-trimmer#readme
- Issues: https://github.com/Lkubok/react-native-radio-trimmer/issues
- npm.io page: https://npm.io/package/react-native-radio-trimmer

## Dependencies (2)

- [react-native-svg](https://npm.io/package/react-native-svg.md) ^9.13.3
- [react-native-safe-area-view](https://npm.io/package/react-native-safe-area-view.md) ^0.14.8

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2019-11-12
- 0.2.0 — 2019-11-12
- 0.1.25 — 2019-11-12
- 0.1.24 — 2019-11-12
- 0.1.23 — 2019-11-12
- 0.1.22 — 2019-11-12
- 0.1.20 — 2019-11-12
- 0.1.19 — 2019-11-12
- 0.1.18 — 2019-11-12
- 0.1.17 — 2019-11-12
- 0.1.16 — 2019-11-11
- 0.1.15 — 2019-11-11
- 0.1.14 — 2019-11-11
- 0.1.12 — 2019-11-11
- 0.1.11 — 2019-11-11
- … 11 more at https://npm.io/package/react-native-radio-trimmer/versions

## README

# React Native Radio Trimmer


## Installation

## package installation
```
yarn add react-native-radio-trimmer
```
or
```
npm install react-native-radio-trimmer
```
### install dependencies
you need to install additional libs in your project locally
```
yarn add react-native-svg@9.13.3
yarn add react-native-safe-area-view@0.14.8

```
### install pods in your project folder
```
cd ios && pod install && cd ../
```

## Working examples

### ticksColor
<p align=center>
  <img src="./gifs/colorOfTicks.gif">
</p> 

### ticksCount
<p align=center>
  <img src="./gifs/countTicks.gif">
</p> 

### dotColor
<p align=center>
  <img src="./gifs/dotColor.gif">
</p> 

### ticksCountHover
<p align=center>
  <img src="./gifs/countHoverTicks.gif">
</p> 

### ticksLength
<p align=center>
  <img src="./gifs/tickLength.gif">
</p> 

### ticksWidth
<p align=center>
  <img src="./gifs/tickWidth.gif">
</p> 

### dotIsShadow
<p align=center>
  <img src="./gifs/shadow1.gif">
</p> 

### pathColor
<p align=center>
  <img src="./gifs/pathColor.gif">
</p> 

## Usage

It is necessary to use onMount method, otherwise app will crash

```
import React, { Component } from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import RadioTrimmer from 'react-native-radio-trimmer';


export class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      textValue: null,
    };
  }
  setValue = value => {
    this.setState({
      textValue: value,
    });
  };

  render() {
    return (
      <SafeAreaView>
        <Header />
        <RadioTrimmer
          boxSize={150}
          marginTop={50}
          onChangeValue={this.setValue}
          onMount={this.setValue}
        >
          <View>
            <Text>{this.state.textValue}</Text>
          </View>
        </RadioTrimmer>
      </SafeAreaView>
    );
  }
}

export default ExampleComponent;
```

## Few trimmers in one row:
```
   <View style={{ flexDirection: 'row' }}>
          <RadioTrimmer
            boxSize={150}
            marginTop={50}
            onChangeValue={this.setValue}
            onMount={this.setValue}
          >
            <View>
              <Text>{this.state.textValue}</Text>
            </View>
          </RadioTrimmer>
          <RadioTrimmer
            boxSize={150}
            marginTop={50}
            onChangeValue={this.setValue}
            onMount={this.setValue}
          >
            <View>
              <Text>{this.state.textValue}</Text>
            </View>
          </RadioTrimmer>

          <RadioTrimmer
            boxSize={150}
            marginTop={50}
            onChangeValue={this.setValue}
            onMount={this.setValue}
          >
            <View>
              <Text>{this.state.textValue}</Text>
            </View>
          </RadioTrimmer>
        </View>

```


## Configuration
### props:
| Property | Type | Default | Description |
|---------------|----------|-------------|----------------------------------------------------------------|
| accuracy | number | 10 | accuracy of result. 10 will result with 0.1, 0.5, etc |
| allowTap | boolean | true | when tapped on a trimmer it changes value to the tapped place|
| backgroundColor | string | transparent | background color of box with Radio Trimmer |
| boxSize | number | 200 | size of box containing the Radio Trimmer |
| dotColor | string | gray | color of radio dot |
| dotIsShadow | boolean | false | makes the dot background blurred|
| dotSize | number | 24 | width and height of the dot |
| innerDotColor | string | white | color of another dot inside the radio dot |
| innerDotSize | number | 10 | default inner dot size  |
| marginTop | number | 0 | margin that allows us to position the box fro top |
| maxValue | number | 108 | maximum scope value |
| minValue | number | 87.5 | minimal scope value |
| onChangeValue | function | null | function that is invoked on every radio text change. it return value of current text. Look at example |
| onMount | function | null | callback function that sets initial value on parent component |
| pathColor | string | lightgray | color of the path under the radio dot |
| pathIsShadow | boolean | false | makes the background of radio trimmer blurred |
| pathWidth | number | 10 | width of the path under the radio dot |
| step | number | 0.1 | value that will be added to each iteriationof calculating text value |
| textAfterNumber | string | MHz | the text that will be added to calculated text value |
| textBackgroundColor | string | transparent | the color under the inside calculated text |
| tickMargin | number | 0 | the distance between radio path and ticks |
| ticksActiveColor | string | black | color of active (hovered) tick  |
| ticksColor | string | gray | color of inactive (unhovered) tick |
| ticksCount | number | 25 | how many ticks will be generated |
| ticksCountHover | number | 5 | how many ticks will be hovered when the radio dot is near |
| ticksLength | number | 15 | the height of single tick |
| ticksWidth | number | 2 | the width of single tick  |

### onChangeValue, onMount:
```
  setValue = value => {
    this.setState({
      textValue: value,
    });
  };

<RadioTrimmer
          boxSize={150}
          marginTop={50}
          onChangeValue={this.setValue}
          onMount={this.setValue}
        >
```

---
_Source: https://npm.io/package/react-native-radio-trimmer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._