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
ticksCount
dotColor
ticksCountHover
ticksLength
ticksWidth
dotIsShadow
pathColor
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}
>