@towsila/expo-ui-library 3.3.16 → 3.5.0

package/package.json

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

package/src/components/screens/sucessScreen.tsx

@@ -0,0 +1,49 @@
+import { Text, View } from "react-native";
+import AnimatedSuccessIcon from "../ui/AnimatedSuccessIcon";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
+import ScreenHeader from "../ui/PageTopBar";
+import SharpButton from "../ui/sharpButton";
+import { Fonts, textSize } from "../../tokens/typography";
+
+interface SuccessScreenProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  buttonText: string;
+  children: React.ReactNode;
+  onNext: () => void;
+  footer?:React.ReactNode;
+}
+
+export default function SuccessScreen({
+  title = "Password Changed",
+  subtitle = "",
+  description,
+  buttonText,
+  children,
+  onNext,
+  footer,
+}: SuccessScreenProps) {
+  const { colors } = useAppTheme();
+    const {isRTL} =  useLanguage();
+  return (
+  <View style={{ flex: 1, paddingHorizontal: 32, paddingVertical: 60 }}>
+    <ScreenHeader title={title} description={subtitle} />
+    <View style={{ flex: 1, marginTop: 30, alignItems: isRTL ? "flex-start" : "flex-end", gap: 20 }}>
+      <View style={{ backgroundColor: colors.primary + "30", padding: 20, borderRadius: 20 }}>
+        <AnimatedSuccessIcon color={colors.primary} size={50} strokeWidth={2} />
+      </View>
+      <Text style={{ color: colors.text.secondary, textAlign: isRTL ? "left" : "right", fontFamily: Fonts.montserrat.regular, fontSize: textSize.md }}>
+        {description}
+      </Text>
+      {children}
+    </View>
+    <SharpButton text={buttonText} onPress={onNext} bgColor={colors.primary}/>
+    {footer && (
+        <View style={{marginTop: 20}}/>
+    )}
+    {footer}
+  </View>
+  );
+}

package/src/components/ui/AnimatedSuccessIcon.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, Easing, View } from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedSuccessIconProps {
+  size?: number;
+  color?: string; // stroke color for both the circle and the checkmark
+  strokeWidth?: number;
+}
+
+const CHECK_PATH = "M18 33 L27 42 L46 20";
+const CHECK_PATH_LENGTH = 40;
+const CIRCLE_RADIUS = 28;
+const CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS;
+
+export default function AnimatedSuccessIcon({
+  size = 120,
+  color = "#22C55E",
+  strokeWidth = 5,
+}: AnimatedSuccessIconProps) {
+  const circleProgress = useRef(new Animated.Value(0)).current;
+  const checkProgress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.sequence([
+      // Stage 1 — circle outline draws itself in, starting from the top
+      Animated.timing(circleProgress, {
+        toValue: 1,
+        duration: 600,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false, // strokeDashoffset can't run on the native driver
+      }),
+      // Stage 2 — checkmark draws itself, only after the circle completes
+      Animated.timing(checkProgress, {
+        toValue: 1,
+        duration: 400,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false,
+      }),
+    ]).start();
+  }, []);
+
+  const circleDashoffset = circleProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [CIRCLE_CIRCUMFERENCE, 0],
+  });
+
+  const checkDashoffset = checkProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [CHECK_PATH_LENGTH, 0],
+  });
+
+  return (
+    <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+      <Svg width={size} height={size} viewBox="0 0 64 64">
+        <AnimatedCircle
+          cx={32}
+          cy={32}
+          r={CIRCLE_RADIUS}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={CIRCLE_CIRCUMFERENCE}
+          strokeDashoffset={circleDashoffset}
+          rotation="-90" // starts the draw from the top (12 o'clock) instead of the default 3 o'clock
+          origin="32, 32"
+        />
+        <AnimatedPath
+          d={CHECK_PATH}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          strokeDasharray={CHECK_PATH_LENGTH}
+          strokeDashoffset={checkDashoffset}
+        />
+      </Svg>
+    </View>
+  );
+}

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

@@ -65,4 +65,7 @@ export {default as RatingStars} from "./components/ui/rating";
 export { getFcmToken } from "./hooks/useFcmToken";
 export {useArrivalDetection} from "./hooks/useArrivalDetection";
 export {default as Toggle} from "./components/ui/toggle";
-export {default as BackIcon} from "./components/ui/backIcon";
+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 {ScrollWithIndicator} from "./components/ui/scrollIndicator"