react-native-ruler-view

A customizable, interactive ruler picker component for React Native. Perfect for selecting values in a range using a ruler-style interface. This library is a fork and modification of react-native-ruler-picker, with added enhancements and improved functionality.

Full credits to the original author of react-native-ruler-picker.

Features

• Vertical and horizontal orientations.
• Highly customizable step sizes, unit labels, and themes.
• Animated step movement with support for spring or timing animations.
• Haptic feedback and accessibility support.
• Supports both integer and fractional values.
• Fine-tuned customization for step heights, widths, and gaps.
• Ability to configure a range of values with min, max, and step parameters.
• Option to show labels and unit names next to the value.
• Full customization over the ruler's theme (colors, text style, background, etc.).

Installation

To install react-native-ruler-view into your project, use the following command:

npm install react-native-ruler-view or if you're using yarn yarn add react-native-ruler-view

For iOS:

Make sure to install the necessary CocoaPods dependencies: cd ios; pod install; cd ..

Usage

Basic Examples

import * as React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { RulerPicker } from 'react-native-ruler-view';

export default function App() {
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={{ alignItems: 'center', justifyContent: 'center' }}
    >
      {/* Basic Ruler */}
      <RulerPicker
        min={0}
        unit="cm"
        max={240}
        step={1}
        width={300}
        height={300}
        fractionDigits={0}
        initialValue={0}
        onValueChange={(number) => console.log('onValueChange', number)}
        onValueChangeEnd={(number) => console.log('onValueChangeEnd', number)}
      />

      {/* Vertical Ruler */}
      <RulerPicker
        min={0}
        max={200}
        height={300}
        width={300}
        step={1}
        initialValue={0}
        vertical
      />

      {/* Ruler with Custom Theme */}
      <RulerPicker
        min={0}
        max={200}
        step={2}
        width={240}
        indicatorHeight={70}
        height={400}
        vertical
        showLabels={false}
        containerStyle={{
          backgroundColor: '#876796'
        }}
        accessibility={{
          enabled: true,
          labelFormat: 'Value: ${value} centimeters',
          announceValues: true,
        }}
        animationConfig={{
          type: 'spring',
          springConfig: {
            tension: 40,
            friction: 7,
          },
        }}
      />

      {/* Custom themed ruler with haptic feedback */}
      <RulerPicker
        min={0}
        max={200}
        step={1}
        hapticFeedback
        width={300}
        height={200}
        containerStyle={{
          backgroundColor: 'red'
        }}
        theme={{
          indicatorColor: 'green',
          shortStepColor: 'green',
          longStepColor: 'blue',
          textColor: 'green',
          backgroundColor: 'light',
        }}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
});

Props

RulerPickerProps

Name	Type	Required	Default Value	Description
width	number	No	windowWidth	Width of the ruler picker
height	number	No	300	Height of the ruler picker
min	number	Yes	-	Minimum value of the ruler picker
max	number	Yes	-	Maximum value of the ruler picker
step	number	No	1	Step of the ruler picker
initialValue	number	No	min	Initial value of the ruler picker
fractionDigits	number	No	1	Number of digits after the decimal point
unit	string	No	'cm'	Unit of the ruler picker
indicatorHeight	number	No	80	Height of the indicator
vertical	boolean	No	false	Enables vertical orientation
theme	RulerTheme or ThemeName	No	'light'	Theme for the ruler picker
hapticFeedback	boolean	No	false	Enables haptic feedback
animated	boolean	No	true	Enables animation
valueTextStyle	TextStyle	No	-	Text style of the value
unitTextStyle	TextStyle	No	-	Text style of the unit
decelerationRate	'fast' | 'normal' | number	No	'normal'	Deceleration rate of the ruler picker
accessibility	RulerAccessibilityConfig	No	-	Accessibility configuration
showLabels	boolean	No	true	Show labels
onValueChange	(value: number) => void	No	-	Callback when the value changes
onValueChangeEnd	(value: string) => void	No	-	Callback when the value changes end

RulerPickerItemProps

Name	Type	Required	Default Value	Description
gapBetweenSteps	number	No	10	Gap between steps
shortStepHeight	number	No	20	Height of the short step
longStepHeight	number	No	40	Height of the long step
stepWidth	number	No	2	Width of the steps
shortStepColor	string	No	'lightgray'	Color of the short steps
longStepColor	string	No	'darkgray'	Color of the long steps
vertical	boolean	No	false	Enables vertical orientation
containerStyle	ViewStyle	No	-	Style of the container
stepStyle	ViewStyle	No	-	Style of the steps

RulerTheme

Name	Type	Required	Default Value	Description
indicatorColor	string	No	'black'	Color of the center line
shortStepColor	string	No	'lightgray'	Color of the short steps
longStepColor	string	No	'darkgray'	Color of the long steps
textColor	string	No	'black'	Text color
backgroundColor	string	No	'white'	Background color

RulerAccessibilityConfig

Name	Type	Required	Default Value	Description
enabled	boolean	No	false	Enables accessibility
labelFormat	string	No	-	Format for accessibility labels
announceValues	boolean	No	false	Announce values during adjustment
minimumAdjustment	number	No	-	Minimum adjustment value
incrementAnnouncement	string	No	-	Announcement for increment action
decrementAnnouncement	string	No	-	Announcement for decrement action

Contributing

Contributions are welcome! Please fork the repository, make your changes, and submit a pull request.

This library is forked from the original react-native-ruler-picker repository, and full credit goes to them. This is my first npm package, so there might be bugs. Let’s use it, find and fix issues, and add new features together!

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

This project is licensed under the MIT License. See the LICENSE file for details.

Made with create-react-native-ruler-view