@harya72/react-native-ruler 1.0.0

package/dist/index.js

@@ -0,0 +1,273 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactNative = require('react-native');
+var React = require('react');
+var Animated = require('react-native-reanimated');
+
+let LinearGradient = null;
+try {
+    // @ts-ignore
+    LinearGradient = require('expo-linear-gradient').LinearGradient;
+}
+catch (e) {
+    // expo-linear-gradient not installed, fade gradients will be disabled
+}
+const { width: SCREEN_WIDTH } = reactNative.Dimensions.get('window');
+const { width: screenWidth } = reactNative.Dimensions.get('screen');
+const FADE_CONFIG = {
+    fadeWidth: 0.25,
+    fadeOpacity: 0.1,
+};
+const STEP = 1;
+const LONG_BAR_WIDTH = 6;
+const LONG_BAR_HEIGHT = 50;
+const SHORT_BAR_WIDTH = 3;
+const SHORT_BAR_HEIGHT = 30;
+const LONG_BAR_COLOR = 'white';
+const SHORT_BAR_COLOR = '#B5B5B5';
+const GAP = 10;
+const BORDER_RADIUS = 50;
+const Bar = React.memo(({ index, longBarHeight, longBarWidth, shortBarHeight, shortBarWidth, longBarColor, shortBarColor, borderRadius, }) => {
+    const isLong = index % 10 === 0;
+    const barWidth = isLong ? longBarWidth : shortBarWidth;
+    const barHeight = isLong ? longBarHeight : shortBarHeight;
+    const margin = (longBarWidth - barWidth) / 2;
+    return (React.createElement(reactNative.View, { style: {
+            height: barHeight,
+            backgroundColor: isLong ? longBarColor : shortBarColor,
+            width: barWidth,
+            borderRadius: borderRadius,
+            marginHorizontal: margin,
+        } }));
+});
+Bar.displayName = 'Bar';
+const AnimatedTextInput = Animated.createAnimatedComponent(reactNative.TextInput);
+const AnimatedText = React.memo(({ text, fontSize = 96, style, }) => {
+    const animatedProps = Animated.useAnimatedProps(() => {
+        return {
+            text: text.value,
+            defaultValue: text.value,
+        };
+    });
+    const textStyle = [
+        style,
+        {
+            fontSize: fontSize,
+            padding: 0,
+            margin: 0,
+            textAlign: 'center',
+            textAlignVertical: 'center',
+        },
+    ];
+    return (React.createElement(AnimatedTextInput, { animatedProps: animatedProps, editable: false, underlineColorAndroid: "transparent", style: [textStyle, { opacity: 1 }], multiline: false }));
+});
+AnimatedText.displayName = 'AnimatedText';
+/**
+ * A highly customizable, performant ruler component for React Native
+ *
+ * @example
+ * ```tsx
+ * <Ruler
+ *   min={0}
+ *   max={200}
+ *   step={1}
+ *   height={100}
+ *   initialValue={50}
+ *   onChange={(value) => console.log('Selected:', value)}
+ *   supportLinearGradient={true}
+ * />
+ * ```
+ */
+const Ruler = ({ onChange, max, min, fadeWidth = FADE_CONFIG.fadeWidth, fadeOpacity = FADE_CONFIG.fadeOpacity, decelerationRate = 'normal', ...rest }) => {
+    // Prop validation
+    if (__DEV__) {
+        if (min >= max) {
+            console.error('Ruler: min must be less than max');
+        }
+        if (rest?.step !== undefined && rest.step <= 0) {
+            console.error('Ruler: step must be greater than 0');
+        }
+    }
+    const MAX = max;
+    const MIN = min;
+    const step = rest?.step ?? STEP;
+    const longBarWidth = rest?.longBarWidth ?? LONG_BAR_WIDTH;
+    const shortBarWidth = rest?.shortBarWidth ?? SHORT_BAR_WIDTH;
+    const longBarHeight = rest?.longBarHeight ?? LONG_BAR_HEIGHT;
+    const shortBarHeight = rest?.shortBarHeight ?? SHORT_BAR_HEIGHT;
+    const longBarColor = rest?.longBarColor ?? LONG_BAR_COLOR;
+    const shortBarColor = rest?.shortBarColor ?? SHORT_BAR_COLOR;
+    const gap = rest?.gapBetweenSteps ?? GAP;
+    const borderRadius = rest?.borderRadius ?? BORDER_RADIUS;
+    // Calculate fraction digits based on step precision
+    const fractionDigits = React.useMemo(() => {
+        if (step >= 1)
+            return 0;
+        const decimals = step.toString().split('.')[1]?.length || 0;
+        return Math.min(decimals, 10);
+    }, [step]);
+    const formatValue = React.useCallback((value) => value.toFixed(fractionDigits), [fractionDigits]);
+    const getInitialValue = React.useCallback(() => {
+        const initialVal = rest?.initialValue !== undefined ? rest.initialValue : MIN;
+        return Math.max(MIN, Math.min(initialVal, MAX));
+    }, [rest?.initialValue, MIN, MAX]);
+    const prevInitialValue = React.useRef(getInitialValue());
+    const prevMomentumValue = Animated.useSharedValue(formatValue(getInitialValue()));
+    const isUserInteractingRef = React.useRef(false);
+    const isUserInteracting = Animated.useSharedValue(false);
+    const setIsUserInteracting = React.useCallback((value) => {
+        isUserInteractingRef.current = value;
+    }, []);
+    const currentValue = Animated.useSharedValue(formatValue(getInitialValue()));
+    const listRef = React.useRef(null);
+    const isInitialMount = React.useRef(true);
+    const data = React.useMemo(() => {
+        // Prevent division by zero
+        if (step <= 0)
+            return [];
+        const itemAmount = (MAX - MIN) / step;
+        // Warn about large ranges
+        if (__DEV__ && itemAmount > 1000) {
+            console.warn(`Ruler: Large range (${Math.round(itemAmount)} items). Consider increasing step size for better performance.`);
+        }
+        return Array.from({ length: itemAmount + 1 }, (_, i) => MIN + i * step);
+    }, [MIN, MAX, step]);
+    const snapOffsets = React.useMemo(() => {
+        return data.map((_, index) => index * (longBarWidth + gap));
+    }, [data, longBarWidth, gap]);
+    React.useEffect(() => {
+        let isMounted = true;
+        if (isInitialMount.current || isUserInteractingRef.current) {
+            return;
+        }
+        const clampedValue = getInitialValue();
+        const prevValue = prevInitialValue.current;
+        if (Math.abs(clampedValue - prevValue) <= step) {
+            return;
+        }
+        prevInitialValue.current = clampedValue;
+        currentValue.value = formatValue(clampedValue);
+        const index = Math.round((clampedValue - MIN) / step);
+        if (isMounted) {
+            listRef.current?.scrollToOffset({
+                offset: index * (longBarWidth + gap),
+                animated: true,
+            });
+        }
+        return () => {
+            isMounted = false;
+        };
+    }, [rest?.initialValue, MIN, MAX, step, longBarWidth, gap, formatValue, getInitialValue]);
+    const scrollHandler = Animated.useAnimatedScrollHandler({
+        onBeginDrag: () => {
+            'worklet';
+            isUserInteracting.value = true;
+            Animated.runOnJS(setIsUserInteracting)(true);
+        },
+        onScroll: (event) => {
+            if (!isUserInteracting.value)
+                return;
+            const scrollX = event.contentOffset.x;
+            const index = Math.round(scrollX / (longBarWidth + gap));
+            const value = MIN + index * step;
+            if (value >= MIN && value <= MAX) {
+                currentValue.value = value.toFixed(fractionDigits);
+            }
+        },
+        onMomentumEnd: (event) => {
+            const scrollX = event.contentOffset.x;
+            const index = Math.round(scrollX / (longBarWidth + gap));
+            const value = MIN + index * step;
+            const formattedValue = value.toFixed(fractionDigits);
+            if (value >= MIN && value <= MAX) {
+                if (prevMomentumValue.value !== formattedValue) {
+                    if (isUserInteracting.value) {
+                        Animated.runOnJS(onChange)(parseFloat(formattedValue));
+                    }
+                }
+            }
+            prevMomentumValue.value = formattedValue;
+            isUserInteracting.value = false;
+            Animated.runOnJS(setIsUserInteracting)(false);
+        },
+    });
+    const Spacer = React.useCallback(() => React.createElement(reactNative.View, { style: { width: SCREEN_WIDTH / 2 - longBarWidth / 2 } }), [longBarWidth]);
+    const onContentSizeChange = React.useCallback(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            const initialIndex = Math.round((getInitialValue() - MIN) / step);
+            listRef.current?.scrollToOffset({
+                offset: initialIndex * (longBarWidth + gap),
+                animated: false,
+            });
+        }
+    }, [getInitialValue, MIN, step, longBarWidth, gap]);
+    const renderItem = React.useCallback(({ index }) => (React.createElement(Bar, { index: index, longBarColor: longBarColor, longBarHeight: longBarHeight, longBarWidth: longBarWidth, shortBarColor: shortBarColor, shortBarHeight: shortBarHeight, shortBarWidth: shortBarWidth, borderRadius: borderRadius })), [
+        longBarColor,
+        longBarHeight,
+        longBarWidth,
+        shortBarColor,
+        shortBarHeight,
+        shortBarWidth,
+        borderRadius,
+    ]);
+    const renderSeparator = React.useCallback(() => React.createElement(reactNative.View, { style: { width: gap } }), [gap]);
+    const getItemLayout = React.useCallback((_data, index) => ({
+        length: longBarWidth + gap,
+        offset: (longBarWidth + gap) * index,
+        index,
+    }), [longBarWidth, gap]);
+    // Check if linear gradient is supported
+    const shouldShowGradient = rest?.supportLinearGradient && LinearGradient;
+    return (React.createElement(reactNative.View, { style: { width: screenWidth } },
+        !rest?.textComponent ? (React.createElement(AnimatedText, { text: currentValue, style: [styles.valueText, rest?.textStyle] })) : (rest.textComponent(currentValue)),
+        React.createElement(reactNative.View, { style: { justifyContent: 'center', maxHeight: rest?.height } },
+            React.createElement(Animated.FlatList, { ref: listRef, data: data, renderItem: renderItem, keyExtractor: (_, i) => i.toString(), horizontal: true, showsHorizontalScrollIndicator: false, ListHeaderComponent: Spacer, ListFooterComponent: Spacer, ItemSeparatorComponent: renderSeparator, contentContainerStyle: {
+                    alignItems: 'center',
+                }, scrollEventThrottle: 16, onScroll: scrollHandler, overScrollMode: "never", snapToOffsets: snapOffsets, snapToAlignment: "start", onContentSizeChange: onContentSizeChange, decelerationRate: decelerationRate, maxToRenderPerBatch: 10, initialNumToRender: 20, windowSize: 21, getItemLayout: getItemLayout, removeClippedSubviews: reactNative.Platform.OS === 'android' }),
+            shouldShowGradient && (React.createElement(LinearGradient, { colors: ['rgba(0,0,0,0.9)', `rgba(0,0,0,${fadeOpacity})`], start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, style: [
+                    styles.fadeOverlay,
+                    {
+                        left: 0,
+                        width: SCREEN_WIDTH * fadeWidth,
+                    },
+                ], pointerEvents: "none" })),
+            shouldShowGradient && (React.createElement(LinearGradient, { colors: [`rgba(0,0,0,${fadeOpacity})`, 'rgba(0,0,0,0.9)'], start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, style: [
+                    styles.fadeOverlay,
+                    {
+                        right: 0,
+                        width: SCREEN_WIDTH * fadeWidth,
+                    },
+                ], pointerEvents: "none" })),
+            React.createElement(reactNative.View, { style: {
+                    position: 'absolute',
+                    alignSelf: 'center',
+                    zIndex: 1,
+                }, pointerEvents: "none" }, rest?.barComponent ?? (React.createElement(reactNative.View, { style: {
+                    height: rest?.indicatorHeight ?? 100,
+                    width: rest?.indicatorWidth ?? 10,
+                    backgroundColor: rest?.indicatorColor ?? 'white',
+                    borderRadius: rest?.borderRadius ?? BORDER_RADIUS,
+                } }))))));
+};
+const styles = reactNative.StyleSheet.create({
+    container: { justifyContent: 'center', alignItems: 'center' },
+    valueText: {
+        fontSize: 28,
+        color: 'white',
+        marginBottom: 16,
+        textAlign: 'center',
+    },
+    fadeOverlay: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        zIndex: 2,
+    },
+});
+
+exports.Ruler = Ruler;
+exports.default = Ruler;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/Ruler.tsx"],"sourcesContent":[null],"names":["Dimensions","memo","View","TextInput","useAnimatedProps","useMemo","useCallback","useRef","useSharedValue","useEffect","useAnimatedScrollHandler","runOnJS","Platform","StyleSheet"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,155 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle, TextInputProps } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+/**
+ * Props for the Ruler component
+ */
+export interface RulerProps {
+    /**
+     * Callback function called when the ruler value changes
+     * @param value - The current selected value
+     */
+    onChange: (value: number) => void;
+    /**
+     * Maximum value on the ruler
+     */
+    max: number;
+    /**
+     * Minimum value on the ruler
+     */
+    min: number;
+    /**
+     * Step increment between values
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Width of the fade gradient as a percentage of screen width (0-1)
+     * @default 0.25
+     */
+    fadeWidth?: number;
+    /**
+     * Opacity of the fade gradient (0-1)
+     * @default 0.1
+     */
+    fadeOpacity?: number;
+    /**
+     * Style for the ruler container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style for the value text
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Color of the center indicator
+     * @default "white"
+     */
+    indicatorColor?: string;
+    /**
+     * Height of the center indicator
+     * @default 100
+     */
+    indicatorHeight?: number;
+    /**
+     * Width of the center indicator
+     * @default 10
+     */
+    indicatorWidth?: number;
+    /**
+     * Height of long bars (every 10th step)
+     * @default 50
+     */
+    longBarHeight?: number;
+    /**
+     * Height of short bars
+     * @default 30
+     */
+    shortBarHeight?: number;
+    /**
+     * Width of long bars
+     * @default 6
+     */
+    longBarWidth?: number;
+    /**
+     * Width of short bars
+     * @default 3
+     */
+    shortBarWidth?: number;
+    /**
+     * Color of long bars
+     * @default "white"
+     */
+    longBarColor?: string;
+    /**
+     * Color of short bars
+     * @default "#B5B5B5"
+     */
+    shortBarColor?: string;
+    /**
+     * Gap between ruler steps
+     * @default 10
+     */
+    gapBetweenSteps?: number;
+    /**
+     * Border radius for bars and indicator
+     * @default 50
+     */
+    borderRadius?: number;
+    /**
+     * Custom component to render as the center indicator bar
+     */
+    barComponent?: ReactNode;
+    /**
+     * Enable linear gradient fade on edges (requires expo-linear-gradient)
+     * @default false
+     */
+    supportLinearGradient?: boolean;
+    /**
+     * Initial value to display
+     * @default min
+     */
+    initialValue?: number;
+    /**
+     * Scroll deceleration rate
+     * @default "normal"
+     */
+    decelerationRate?: 'fast' | 'normal';
+    /**
+     * Height of the ruler component
+     */
+    height: number;
+    /**
+     * Custom text component to display the current value
+     * @param currentValue - Shared value containing the current ruler value as a string
+     */
+    textComponent?: (currentValue: SharedValue<string>) => ReactNode;
+}
+/**
+ * Internal props for AnimatedTextInput
+ */
+export interface AnimatedTextInputProps extends TextInputProps {
+    text?: string;
+}
+/**
+ * Props for the AnimatedText component
+ */
+export interface AnimatedGradientTextProps {
+    text: SharedValue<string>;
+    fontSize?: number;
+    style?: any;
+}
+/**
+ * Props for the Bar component
+ */
+export interface BarProps {
+    index: number;
+    longBarHeight: number;
+    longBarWidth: number;
+    shortBarHeight: number;
+    shortBarWidth: number;
+    longBarColor: string;
+    shortBarColor: string;
+    borderRadius?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAErC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;CAClE;AAED;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@harya72/react-native-ruler",
+  "version": "1.0.0",
+  "description": "A highly customizable, performant ruler component for React Native with smooth animations",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prepare": "npm run build",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ruler",
+    "picker",
+    "slider",
+    "animated",
+    "reanimated",
+    "measurement",
+    "selector",
+    "ui",
+    "component"
+  ],
+  "author": "harya72",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/harya72/react-native-ruler.git"
+  },
+  "bugs": {
+    "url": "https://github.com/harya72/react-native-ruler/issues"
+  },
+  "homepage": "https://github.com/harya72/react-native-ruler#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-reanimated": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-linear-gradient": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "react": "^18.2.0",
+    "react-native": "^0.72.0",
+    "react-native-reanimated": "^3.0.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.0"
+  }
+}