Add other numbers to the ruler

[alexnguyen98]

Firstly, thank you for the library. I would also want to ask if there are any future plans to add numbers on the rest of the marks in the ruler?

Thank you

[youxinm24]

Hey, I have the same request. Would you consider adding scales to improve readability? 🙏 For example, like this image

[youxinm24]

Hey, I made some modifications below to display long scales. ，The effect is shown in the image.

index 8d1f0d1..13f403d 100644
--- a/node_modules/react-native-ruler-picker/src/components/RulerPicker.tsx
+++ b/node_modules/react-native-ruler-picker/src/components/RulerPicker.tsx
@@ -208,6 +208,8 @@ export const RulerPicker = ({
     ({ index }) => {
       return (
         <RulerPickerItem
+          min={min}
+          step={step}
           isLast={index === arrData.length - 1}
           index={index}
           shortStepHeight={shortStepHeight}
diff --git a/node_modules/react-native-ruler-picker/src/components/RulerPickerItem.tsx b/node_modules/react-native-ruler-picker/src/components/RulerPickerItem.tsx
index e95a6d7..2db8852 100644
--- a/node_modules/react-native-ruler-picker/src/components/RulerPickerItem.tsx
+++ b/node_modules/react-native-ruler-picker/src/components/RulerPickerItem.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 
 export type RulerPickerItemProps = {
   /**
@@ -39,6 +39,8 @@ export type RulerPickerItemProps = {
    * @default 'gray'
    */
   longStepColor: string;
+  min: number;
+  step: number;
 };
 
 type Props = {
@@ -56,9 +58,12 @@ export const RulerPickerItem = React.memo(
     stepWidth,
     shortStepColor,
     longStepColor,
+    min,
+    step,
   }: Props) => {
     const isLong = index % 10 === 0;
     const height = isLong ? longStepHeight : shortStepHeight;
+    const value = min + index * step;
 
     return (
       <View
@@ -82,6 +87,22 @@ export const RulerPickerItem = React.memo(
             },
           ]}
         />
+        {isLong && (
+          <Text
+            style={{
+              position: 'absolute',
+              bottom: 20,
+              width: 40,
+              textAlign: 'center',
+              color: longStepColor,
+              fontSize: 16,
+              transform: [{ translateX: -20 + stepWidth / 2 }],
+            }}
+            numberOfLines={1}
+          >
+            {value}
+          </Text>
+        )}
       </View>
     );
   } ```