feat: add showValueText prop to control value text display

README.md

@@ -13,6 +13,25 @@
 
 ## Usage
 
+### Basic Usage
+
+```js
+import { RulerPicker } from 'react-native-ruler-picker';
+
+<RulerPicker
+  min={0}
+  max={240}
+  step={1}
+  fractionDigits={0}
+  initialValue={0}
+  onValueChange={(number) => 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      |

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 (
     <View style={styles.container}>
-      <RulerPicker
-        min={0}
-        unit="cm"
-        max={240}
-        step={1}
-        fractionDigits={0}
-        initialValue={0}
-        onValueChange={(number) => console.log('onValueChange', number)}
-        onValueChangeEnd={(number) => console.log('onValueChangeEnd', number)}
-      />
+      <Text style={styles.title}>Ruler Picker Examples</Text>
+
+      <View style={styles.exampleContainer}>
+        <Text style={styles.exampleTitle}>With Value Text (Default)</Text>
+        <RulerPicker
+          min={0}
+          unit="cm"
+          max={240}
+          step={1}
+          fractionDigits={0}
+          initialValue={120}
+          onValueChange={(number) => console.log('onValueChange', number)}
+          onValueChangeEnd={(number) => console.log('onValueChangeEnd', number)}
+        />
+      </View>
+
+      <View style={styles.exampleContainer}>
+        <Text style={styles.exampleTitle}>Without Value Text</Text>
+        <RulerPicker
+          min={0}
+          unit="cm"
+          max={240}
+          step={1}
+          fractionDigits={0}
+          initialValue={120}
+          showValueText={false}
+          onValueChange={(number) => console.log('onValueChange (no text)', number)}
+          onValueChangeEnd={(number) => console.log('onValueChangeEnd (no text)', number)}
+        />
+      </View>
     </View>
   );
 }
@@ -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,

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,
           },
         ]}
       >
-        <View
-          style={[
-            styles.displayTextContainer,
-            {
-              height: valueTextStyle?.fontSize ?? styles.valueText.fontSize,
-              transform: [
-                {
-                  translateY:
-                    -(valueTextStyle?.fontSize ?? styles.valueText.fontSize) *
-                    0.5,
-                },
-              ],
-            },
-          ]}
-        >
-          <TextInput
-            ref={stepTextRef}
-            defaultValue={initialValue.toFixed(fractionDigits)}
+        {showValueText && (
+          <View
             style={[
+              styles.displayTextContainer,
               {
-                lineHeight:
-                  valueTextStyle?.fontSize ?? styles.valueText.fontSize,
+                height: valueTextStyle?.fontSize ?? styles.valueText.fontSize,
+                transform: [
+                  {
+                    translateY:
+                      -(valueTextStyle?.fontSize ?? styles.valueText.fontSize) *
+                      0.5,
+                  },
+                ],
               },
-              styles.valueText,
-              valueTextStyle,
             ]}
-          />
-          {unit && (
-            <Text
+          >
+            <TextInput
+              ref={stepTextRef}
+              defaultValue={initialValue.toFixed(fractionDigits)}
               style={[
                 {
                   lineHeight:
-                    unitTextStyle?.fontSize ?? styles.unitText.fontSize,
+                    valueTextStyle?.fontSize ?? styles.valueText.fontSize,
                 },
-                styles.unitText,
-                unitTextStyle,
+                styles.valueText,
+                valueTextStyle,
               ]}
-            >
-              {unit}
-            </Text>
-          )}
-        </View>
+            />
+            {unit && (
+              <Text
+                style={[
+                  {
+                    lineHeight:
+                      unitTextStyle?.fontSize ?? styles.unitText.fontSize,
+                  },
+                  styles.unitText,
+                  unitTextStyle,
+                ]}
+              >
+                {unit}
+              </Text>
+            )}
+          </View>
+        )}
         <View
           style={[
             {