react-native-legend-ruler-picker

⚡ A high-performance, customizable Ruler Picker component for React Native — powered by LegendList for buttery-smooth scrolling.

---

✨ Why Legend Ruler Picker?

This library is an upgraded, more performant alternative to react-native-ruler-picker which I have been using it for more than a year without issues.

When I upgraded from old architecture to new architecture for my apps, the performance was not good and I had flickering issues on the labels and inconsistent positioning issues of the indicator.

I decided to create this library, which is actively used in my work app in the appstores.

This library works well for new architecture as it is going to be the defacto and recommended architecture for react native moving forward.

LegendList provides superior performance through advanced item recycling, reduced re-renders, and optimized memory usage — making this the ideal choice for production apps.

---

Demo

🍏 iOS Demo	🤖 Android Demo

--

📦 Installation

# Using npm
npm install react-native-legend-ruler-picker @legendapp/list

# Using yarn
yarn add react-native-legend-ruler-picker @legendapp/list

# Using pnpm
pnpm add react-native-legend-ruler-picker @legendapp/list

Note: @legendapp/list is a peer dependency and must be installed separately.

---

🚀 Quick Start

import { RulerPicker } from 'react-native-legend-ruler-picker';

export default function App() {
  return (
    <RulerPicker
      min={0}
      max={200}
      step={1}
      initialValue={170}
      fractionDigits={0}
      unit="cm"
      onValueChangeEnd={(value) => console.log('Selected:', value)}
    />
  );
}

---

📖 Complete Example

import { useState, useCallback } from 'react';
import { View, StyleSheet, Text, SafeAreaView } from 'react-native';
import { RulerPicker } from 'react-native-legend-ruler-picker';

export default function App() {
  const [height, setHeight] = useState(170);

  const handleValueChangeEnd = useCallback((value: string) => {
    setHeight(Number(value));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Select Your Height</Text>
      </View>

      <View style={styles.pickerContainer}>
        <RulerPicker
          min={100}
          max={220}
          step={1}
          initialValue={height}
          fractionDigits={0}
          unit="cm"
          onValueChangeEnd={handleValueChangeEnd}
          indicatorColor="#6366F1"
          shortStepColor="#E5E7EB"
          longStepColor="#9CA3AF"
          valueTextStyle={styles.valueText}
          unitTextStyle={styles.unitText}
        />
      </View>

      <View style={styles.footer}>
        <Text style={styles.resultText}>{height} cm</Text>
        <Text style={styles.subtitleText}>
          ≈ {Math.floor(height / 30.48)}'{Math.round((height % 30.48) / 2.54)}"
        </Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FAFAFA',
  },
  header: {
    paddingHorizontal: 24,
    paddingTop: 32,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#111827',
  },
  pickerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  footer: {
    paddingBottom: 48,
    alignItems: 'center',
  },
  resultText: {
    fontSize: 32,
    fontWeight: '700',
    color: '#6366F1',
  },
  subtitleText: {
    fontSize: 16,
    color: '#6B7280',
    marginTop: 4,
  },
  valueText: {
    fontSize: 48,
    fontWeight: '700',
    color: '#6366F1',
  },
  unitText: {
    fontSize: 24,
    fontWeight: '500',
    color: '#9CA3AF',
  },
});

---

⚙️ Props

Prop	Type	Default	Description
min	number	Required	Minimum value of the ruler
max	number	Required	Maximum value of the ruler
step	number	1	Step increment between values
initialValue	number	min	Initial selected value
fractionDigits	number	1	Decimal places to display
unit	string	'cm'	Unit label displayed next to value
width	number	screenWidth	Width of the ruler picker
height	number	500	Height of the ruler picker
indicatorHeight	number	80	Height of the center indicator line
indicatorColor	string	'black'	Color of the center indicator
gapBetweenSteps	number	10	Spacing between step markers
shortStepHeight	number	20	Height of minor step markers
longStepHeight	number	40	Height of major step markers (every 10th)
stepWidth	number	2	Width of step markers
shortStepColor	string	'lightgray'	Color of minor step markers
longStepColor	string	'darkgray'	Color of major step markers
valueTextStyle	TextStyle	-	Custom styles for the value text
unitTextStyle	TextStyle	-	Custom styles for the unit text
decelerationRate	'fast' | 'normal' | number	'normal'	Scroll deceleration rate
onValueChange	(value: string) => void	-	Called on every value change while scrolling
onValueChangeEnd	(value: string) => void	-	Called when scrolling ends

---

🎨 Customization Examples

Weight Picker (kg)

<RulerPicker
  min={30}
  max={200}
  step={0.5}
  initialValue={70}
  fractionDigits={1}
  unit="kg"
  indicatorColor="#10B981"
/>

Temperature Picker (°F)

<RulerPicker
  min={32}
  max={120}
  step={1}
  initialValue={72}
  fractionDigits={0}
  unit="°F"
  indicatorColor="#F59E0B"
  longStepColor="#F59E0B"
/>

Water Intake (ml)

<RulerPicker
  min={500}
  max={5000}
  step={50}
  initialValue={2000}
  fractionDigits={0}
  unit="ml"
  indicatorColor="#3B82F6"
/>

---

🧩 Supported Platforms

Platform	Status
iOS	✅ Fully Supported
Android	✅ Fully Supported

---

🤝 Contributing

Contributions are welcome! Please see the contributing guide to get started.

---

📄 License

MIT © Gautham Vijayan

---

🙏 Acknowledgments

• Inspired by react-native-ruler-picker
• Powered by LegendList from Legend App