diff --git a/README.md b/README.md index 6b0b591..befc593 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,25 @@ ## Usage +### Basic Usage + +```js +import { RulerPicker } from 'react-native-ruler-picker'; + + console.log(number)} + onValueChangeEnd={(number) => console.log(number)} + unit="cm" +/>; +``` + +### Hide Value Text Display + ```js import { RulerPicker } from 'react-native-ruler-picker'; @@ -22,6 +41,7 @@ import { RulerPicker } from 'react-native-ruler-picker'; step={1} fractionDigits={0} initialValue={0} + showValueText={false} onValueChange={(number) => console.log(number)} onValueChangeEnd={(number) => console.log(number)} unit="cm" @@ -44,6 +64,7 @@ import { RulerPicker } from 'react-native-ruler-picker'; | indicatorColor | string | No | 'black' | Color of the center line | | valueTextStyle | RulerPickerTextProps | No | - | Text style of the value | | unitTextStyle | RulerPickerTextProps | No | - | Text style of the unit | +| showValueText | boolean | No | true | Whether to show the value text display | | decelerationRate | 'fast' \| 'normal' \| number | No | 'normal' | Deceleration rate of the ruler picker | | onValueChange | (value: string) => void | No | - | Callback when the value changes | | onValueChangeEnd | (value: string) => void | No | - | Callback when the value changes end | diff --git a/example/src/App.tsx b/example/src/App.tsx index dffc4f9..83cff18 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,21 +1,41 @@ import * as React from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet, View, Text } from 'react-native'; import { RulerPicker } from 'react-native-ruler-picker'; export default function App() { return ( - console.log('onValueChange', number)} - onValueChangeEnd={(number) => console.log('onValueChangeEnd', number)} - /> + Ruler Picker Examples + + + With Value Text (Default) + console.log('onValueChange', number)} + onValueChangeEnd={(number) => console.log('onValueChangeEnd', number)} + /> + + + + Without Value Text + console.log('onValueChange (no text)', number)} + onValueChangeEnd={(number) => console.log('onValueChangeEnd (no text)', number)} + /> + ); } @@ -25,6 +45,23 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', + padding: 20, + }, + title: { + fontSize: 24, + fontWeight: 'bold', + marginBottom: 30, + textAlign: 'center', + }, + exampleContainer: { + marginBottom: 40, + alignItems: 'center', + }, + exampleTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 10, + textAlign: 'center', }, box: { width: 60, diff --git a/src/components/RulerPicker.tsx b/src/components/RulerPicker.tsx index 8d1f0d1..2278f69 100644 --- a/src/components/RulerPicker.tsx +++ b/src/components/RulerPicker.tsx @@ -93,6 +93,12 @@ export type RulerPickerProps = { * Text style of the unit */ unitTextStyle?: RulerPickerTextProps; + /** + * Whether to show the value text display + * + * @default true + */ + showValueText?: boolean; /** * A floating-point number that determines how quickly the scroll view * decelerates after the user lifts their finger. You may also use string @@ -139,6 +145,7 @@ export const RulerPicker = ({ longStepColor = 'darkgray', valueTextStyle, unitTextStyle, + showValueText = true, decelerationRate = 'normal', onValueChange, onValueChangeEnd, @@ -168,12 +175,14 @@ export const RulerPicker = ({ if (prevValue.current !== newStep) { onValueChange?.(newStep); - stepTextRef.current?.setNativeProps({ text: newStep }); + if (showValueText) { + stepTextRef.current?.setNativeProps({ text: newStep }); + } } prevValue.current = newStep; }, - [fractionDigits, gapBetweenSteps, stepWidth, max, min, onValueChange, step] + [fractionDigits, gapBetweenSteps, stepWidth, max, min, onValueChange, step, showValueText] ); useEffect(() => { @@ -300,55 +309,57 @@ export const RulerPicker = ({ { translateY: -indicatorHeight * 0.5 - - (valueTextStyle?.fontSize ?? styles.valueText.fontSize), + (showValueText ? (valueTextStyle?.fontSize ?? styles.valueText.fontSize) : 0), }, ], left: stepWidth * 0.5, }, ]} > - - - {unit && ( - + - {unit} - - )} - + /> + {unit && ( + + {unit} + + )} + + )}