@towsila/expo-ui-library 3.3.10 → 3.3.12

package/package.json

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

package/src/components/reusable/templateSubPage.tsx

@@ -40,6 +40,7 @@ export default function TemplateSubPage({
         style={{ flex: 1 }}
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
       >
         <View style={{ flex: 1, gap: 20, marginTop: 20 }}>
           {error && (
@@ -47,7 +48,7 @@ export default function TemplateSubPage({
           )}
           {children}
         </View>
-
+      </ScrollView>
         {buttonText && (
           <View style={{ marginTop: 32 }}>
             <SharpButton
@@ -59,7 +60,7 @@ export default function TemplateSubPage({
             />
           </View>
         )}
-      </ScrollView>
+      
     </View>
   );
 }

package/src/components/screens/resetPassword.tsx

@@ -3,6 +3,7 @@ import { useResetPasswordForm } from "../../hooks/useResetPasswordForm";
 import PasswordRequirementsCard from "../ui/passwordRequirmentCard";
 import SharpInput from "../ui/sharpInput";
 import  {LockClosed, EyeOff, Eye} from "@towsila/icons";
+import Input from "../ui/input";
 
 
 interface ResetPasswordScreenProps {
@@ -55,15 +56,15 @@ export default function ResetPasswordScreen({
       loading={form.loading}
     >
       {includeOldPassword && (
-        <SharpInput
+        <Input
           label={oldPasswordLabel}
           value={form.oldPassword}
           onChangeText={form.setOldPassword}
           placeholder={oldPasswordPlaceholder}
-          iconLeft={(color) => <LockClosed width={18} height={18} color={color} />}
+          iconLeft={"lock-closed-outline"}
           iconRight={form.showOldPassword
-            ? (color) => <EyeOff width={18} height={18} color={color} />
-            : (color) => <Eye width={18} height={18} color={color} />
+            ? "eye-off-outline"
+            : "eye-outline"
           }
           onPressIconRight={() => form.setShowOldPassword(!form.showOldPassword)}
           secureTextEntry={!form.showOldPassword}

package/src/components/ui/OTPInput.tsx

@@ -28,10 +28,12 @@ export default function OtpInput({ length = 6, onComplete, onChange, style, size
     const code = newDigits.join("");
     onChange?.(code);
 
-    if (text && index < length - 1) {
-      refs.current[index + 1]?.focus();
-    } else if (!text && index > 0) {
-      refs.current[index - 1]?.focus();
+        if (text.length > 0 && index < length - 1) {
+      const nextIndex = index + 1;
+
+      requestAnimationFrame(() => {
+        refs.current[nextIndex]?.focus();
+      });
     }
 
     if (code.length === length && newDigits.every((d) => d !== "")) {
@@ -40,14 +42,14 @@ export default function OtpInput({ length = 6, onComplete, onChange, style, size
   };
 
   return (
-    <View style={{ flexDirection: "row", justifyContent: "center", gap: 12, marginHorizontal: 20 }}>
+    <View style={{ flexDirection: "row", justifyContent: "center", gap: 12, marginHorizontal: 20, direction: "ltr",}}>
       {digits.map((digit, index) => (
         <TextInput
           key={index}
           ref={(r) => { if (r) refs.current[index] = r; }}
           style={[
             styles.otpInput,
-            { borderColor: focusedIndex === index ? colors.primary : colors.semantic.border, width: size, height: size, borderRadius: borderRadius, fontFamily:fontFamily },
+            { borderColor: focusedIndex === index ? colors.primary : colors.text.primary, width: size, height: size, borderRadius: borderRadius, fontFamily:fontFamily },
             style
           ]}
           keyboardType="number-pad"

package/src/components/ui/input.tsx

@@ -103,7 +103,7 @@ export default function Input({
                 ? colors.semantic.error
                 : focused
                 ? colors.primary
-                : colors.semantic.border,
+                : colors.text.primary,
             borderWidth: error ? 1.5 : focused ? 1.5 : 1,
             }}
           {...rest}

package/src/components/ui/passwordRequirmentCard.tsx

@@ -2,6 +2,7 @@ import { View, Text } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useAppTheme } from "../../context/ThemeContext";
 import { textSize, Fonts } from "../../tokens/typography";
+import { useLanguage } from "../../context/LanguageContext";
 
 interface PasswordRequirementsCardProps {
   checks: boolean[];   // ← array of booleans instead of named object
@@ -15,12 +16,13 @@ export default function PasswordRequirementsCard({
   cardTitle,
 }: PasswordRequirementsCardProps) {
   const { colors } = useAppTheme();
-
+const {isRTL} = useLanguage();
   return (
     <View style={{
       backgroundColor: colors.background.card,
       borderRadius: 14,
       padding: 16,
+      justifyContent:isRTL? "flex-start":"flex-end",
       gap: 10,
     }}>
       {cardTitle && (
@@ -35,7 +37,7 @@ export default function PasswordRequirementsCard({
       )}
 
       {cardItems.map((item, index) => (
-        <View key={index} style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <View key={index} style={{ flexDirection:isRTL ?"row": "row-reverse", alignItems: "center", gap: 8 }}>
           <Ionicons
             name={checks[index] ? "checkmark-circle" : "ellipse-outline"}
             size={16}