@harya72/react-native-ruler 1.0.0

package/src/Ruler.tsx

@@ -0,0 +1,457 @@
+import {
+  View,
+  Dimensions,
+  StyleSheet,
+  Platform,
+  TextInput,
+} from 'react-native';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  memo,
+} from 'react';
+import Animated, {
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+import type {
+  RulerProps,
+  AnimatedTextInputProps,
+  AnimatedGradientTextProps,
+  BarProps,
+} from './types';
+
+let LinearGradient: any = 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 } = Dimensions.get('window');
+const { width: screenWidth } = 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 = memo(
+  ({
+    index,
+    longBarHeight,
+    longBarWidth,
+    shortBarHeight,
+    shortBarWidth,
+    longBarColor,
+    shortBarColor,
+    borderRadius,
+  }: BarProps) => {
+    const isLong = index % 10 === 0;
+    const barWidth = isLong ? longBarWidth : shortBarWidth;
+    const barHeight = isLong ? longBarHeight : shortBarHeight;
+
+    const margin = (longBarWidth - barWidth) / 2;
+
+    return (
+      <View
+        style={{
+          height: barHeight,
+          backgroundColor: isLong ? longBarColor : shortBarColor,
+          width: barWidth,
+          borderRadius: borderRadius,
+          marginHorizontal: margin,
+        }}
+      />
+    );
+  }
+);
+
+Bar.displayName = 'Bar';
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const AnimatedText = memo(({
+  text,
+  fontSize = 96,
+  style,
+}: AnimatedGradientTextProps) => {
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: text.value,
+      defaultValue: text.value,
+    } as Partial<AnimatedTextInputProps>;
+  });
+
+  const textStyle = [
+    style,
+    {
+      fontSize: fontSize,
+      padding: 0,
+      margin: 0,
+      textAlign: 'center' as const,
+      textAlignVertical: 'center' as const,
+    },
+  ];
+
+  return (
+    <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
+}: RulerProps) => {
+  // 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 = useMemo(() => {
+    if (step >= 1) return 0;
+    const decimals = step.toString().split('.')[1]?.length || 0;
+    return Math.min(decimals, 10);
+  }, [step]);
+
+  const formatValue = useCallback(
+    (value: number) => value.toFixed(fractionDigits),
+    [fractionDigits]
+  );
+
+  const getInitialValue = useCallback(() => {
+    const initialVal =
+      rest?.initialValue !== undefined ? rest.initialValue : MIN;
+    return Math.max(MIN, Math.min(initialVal, MAX));
+  }, [rest?.initialValue, MIN, MAX]);
+  
+  const prevInitialValue = useRef(getInitialValue());
+  const prevMomentumValue = useSharedValue<string>(
+    formatValue(getInitialValue())
+  );
+  const isUserInteractingRef = useRef(false);
+  const isUserInteracting = useSharedValue(false);
+
+  const setIsUserInteracting = useCallback((value: boolean) => {
+    isUserInteractingRef.current = value;
+  }, []);
+
+  const currentValue = useSharedValue<string>(formatValue(getInitialValue()));
+
+  const listRef = useRef<Animated.FlatList<any>>(null);
+  const isInitialMount = useRef(true);
+
+  const data = 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 = useMemo(() => {
+    return data.map((_, index) => index * (longBarWidth + gap));
+  }, [data, longBarWidth, gap]);
+
+  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 = useAnimatedScrollHandler({
+    onBeginDrag: () => {
+      'worklet';
+      isUserInteracting.value = true;
+      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) {
+            runOnJS(onChange)(parseFloat(formattedValue));
+          }
+        }
+      }
+
+      prevMomentumValue.value = formattedValue;
+      isUserInteracting.value = false;
+      runOnJS(setIsUserInteracting)(false);
+    },
+  });
+
+  const Spacer = useCallback(
+    () => <View style={{ width: SCREEN_WIDTH / 2 - longBarWidth / 2 }} />,
+    [longBarWidth]
+  );
+
+  const onContentSizeChange = 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 = useCallback(
+    ({ index }: { index: number }) => (
+      <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 = useCallback(
+    () => <View style={{ width: gap }} />,
+    [gap]
+  );
+
+  const getItemLayout = useCallback(
+    (_data: any, index: number) => ({
+      length: longBarWidth + gap,
+      offset: (longBarWidth + gap) * index,
+      index,
+    }),
+    [longBarWidth, gap]
+  );
+
+  // Check if linear gradient is supported
+  const shouldShowGradient = rest?.supportLinearGradient && LinearGradient;
+
+  return (
+    <View style={{ width: screenWidth }}>
+      {!rest?.textComponent ? (
+        <AnimatedText
+          text={currentValue}
+          style={[styles.valueText, rest?.textStyle]}
+        />
+      ) : (
+        rest.textComponent(currentValue)
+      )}
+
+      <View style={{ justifyContent: 'center', maxHeight: rest?.height }}>
+        <Animated.FlatList
+          ref={listRef}
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={(_, i) => i.toString()}
+          horizontal
+          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={Platform.OS === 'android'}
+        />
+        {shouldShowGradient && (
+          <LinearGradient
+            colors={['rgba(0,0,0,0.9)', `rgba(0,0,0,${fadeOpacity})`] as const}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={[
+              styles.fadeOverlay,
+              {
+                left: 0,
+                width: SCREEN_WIDTH * fadeWidth,
+              },
+            ]}
+            pointerEvents="none"
+          />
+        )}
+        {shouldShowGradient && (
+          <LinearGradient
+            colors={[`rgba(0,0,0,${fadeOpacity})`, 'rgba(0,0,0,0.9)'] as const}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={[
+              styles.fadeOverlay,
+              {
+                right: 0,
+                width: SCREEN_WIDTH * fadeWidth,
+              },
+            ]}
+            pointerEvents="none"
+          />
+        )}
+        <View
+          style={{
+            position: 'absolute',
+            alignSelf: 'center',
+            zIndex: 1,
+          }}
+          pointerEvents="none"
+        >
+          {rest?.barComponent ?? (
+            <View
+              style={{
+                height: rest?.indicatorHeight ?? 100,
+                width: rest?.indicatorWidth ?? 10,
+                backgroundColor: rest?.indicatorColor ?? 'white',
+                borderRadius: rest?.borderRadius ?? BORDER_RADIUS,
+              }}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Ruler;
+
+const styles = 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,
+  },
+});

package/src/index.ts

@@ -0,0 +1,8 @@
+export { default as Ruler } from './Ruler';
+export { default } from './Ruler';
+export type {
+  RulerProps,
+  AnimatedTextInputProps,
+  AnimatedGradientTextProps,
+  BarProps,
+} from './types';

package/src/types.ts

@@ -0,0 +1,182 @@
+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;
+}