@towsila/expo-ui-library 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/ui/scrollIndicator.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  LayoutChangeEvent,
+  ScrollViewProps,
+  View,
+} from "react-native";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
+
+interface Props extends ScrollViewProps {
+  trackWidth?: number;
+  trackLength?: number;
+  children: React.ReactNode;
+}
+
+const IDLE_OPACITY = 0.45;
+
+export const ScrollWithIndicator: React.FC<Props> = ({
+  children,
+  trackWidth = 5,
+  trackLength = 200,
+  style,
+  contentContainerStyle,
+  ...rest
+}) => {
+  const { colors } = useAppTheme();
+  const { isRTL } = useLanguage();
+
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const fade = useRef(new Animated.Value(IDLE_OPACITY)).current;
+  const awake = useRef(false);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [viewH, setViewH] = useState(0);
+  const [contentH, setContentH] = useState(0);
+
+  const scrollable = viewH > 0 && contentH > viewH + 1;
+
+  // short fixed-length track instead of full height
+  const trackH = Math.min(trackLength, viewH);
+  const thumbH = scrollable
+    ? Math.min(trackH * 0.7, Math.max(24, (viewH / contentH) * trackH))
+    : 0;
+  const maxScroll = Math.max(contentH - viewH, 1);
+  const maxThumb = Math.max(trackH - thumbH, 1);
+
+  const translateY = scrollY.interpolate({
+    inputRange: [0, maxScroll],
+    outputRange: [0, maxThumb],
+    extrapolate: "clamp",
+  });
+
+  // brighter while scrolling, softer when idle
+  const wake = () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    if (!awake.current) {
+      awake.current = true;
+      Animated.timing(fade, { toValue: 1, duration: 120, useNativeDriver: true }).start();
+    }
+    hideTimer.current = setTimeout(() => {
+      awake.current = false;
+      Animated.timing(fade, { toValue: IDLE_OPACITY, duration: 400, useNativeDriver: true }).start();
+    }, 900);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+    };
+  }, []);
+
+  return (
+    <View style={[{ flex: 1, flexDirection: isRTL ? "row" : "row-reverse" }, style]}>
+      <Animated.ScrollView
+        {...rest}
+        style={{ flex: 1 }}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={10}
+        onLayout={(e: LayoutChangeEvent) => setViewH(e.nativeEvent.layout.height)}
+        onContentSizeChange={(_, h) => setContentH(h)}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: true, listener: wake }
+        )}
+      >
+        {children}
+      </Animated.ScrollView>
+
+      {scrollable && (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            {
+              width: trackWidth,
+              height: trackH,
+              alignSelf: "center",
+              opacity: fade,
+            },
+            isRTL ? { marginLeft: 15 } : { marginRight: 15 },
+          ]}
+        >
+          {/* soft track */}
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              width: trackWidth,
+              borderRadius: trackWidth / 2,
+              backgroundColor: colors.primary,
+              opacity: 0.15,
+            }}
+          />
+          {/* thumb */}
+          <Animated.View
+            style={{
+              width: trackWidth,
+              height: thumbH,
+              borderRadius: trackWidth / 2,
+              backgroundColor: colors.primary,
+              transform: [{ translateY }],
+            }}
+          />
+        </Animated.View>
+      )}
+    </View>
+  );
+};

package/src/index.ts

@@ -67,4 +67,5 @@ export {useArrivalDetection} from "./hooks/useArrivalDetection";
 export {default as Toggle} from "./components/ui/toggle";
 export {default as BackIcon} from "./components/ui/backIcon";
 export {default as SuccessScreen} from "./components/screens/sucessScreen";
-export {default as AnimatedSuccessIcon} from "./components/ui/AnimatedSuccessIcon";
+export {default as AnimatedSuccessIcon} from "./components/ui/AnimatedSuccessIcon";
+export {ScrollWithIndicator} from "./components/ui/scrollIndicator"