@towsila/expo-ui-library 3.3.11 → 3.3.13

package/package.json

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

package/src/components/reusable/templateSubPage.tsx

@@ -1,4 +1,4 @@
-import { View, ScrollView } from "react-native";
+import { View, ScrollView, KeyboardAvoidingView, Platform  } from "react-native";
 import PageTopBar from "../ui/PageTopBar";
 import { useAppTheme } from "../../context/ThemeContext";
 import ErrorMessage from "../ui/error";
@@ -29,6 +29,11 @@ export default function TemplateSubPage({
   const { colors } = useAppTheme();
 
   return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 20}
+    >
     <View style={{
       flex: 1,
       paddingBottom: 60,
@@ -40,6 +45,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 +53,7 @@ export default function TemplateSubPage({
           )}
           {children}
         </View>
-
+      </ScrollView>
         {buttonText && (
           <View style={{ marginTop: 32 }}>
             <SharpButton
@@ -59,7 +65,8 @@ export default function TemplateSubPage({
             />
           </View>
         )}
-      </ScrollView>
+      
     </View>
+    </KeyboardAvoidingView>
   );
 }

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}
@@ -73,13 +74,13 @@ export default function ResetPasswordScreen({
           onClearError={() => form.clearError("oldPassword")}
         />
       )}
-      <SharpInput
+      <Input
         label={passwordLabel}
         value={form.password}
         onChangeText={form.setPassword}
         placeholder={passwordPlaceholder}
-        iconLeft={(color) => <LockClosed width={18} height={18} color={color}/>}
-        iconRight={form.showPassword ? (color)=><EyeOff width={18} height={18} color={color}/> : (color)=><Eye width={18} height={18} color={color}/>}
+        iconLeft={"lock-closed-outline"}
+        iconRight={form.showPassword ? "eye-off-outline" : "eye-outline"}
         onPressIconRight={() => form.setShowPassword(!form.showPassword)}
         secureTextEntry={!form.showPassword}
         textContentType="password"
@@ -95,13 +96,13 @@ export default function ResetPasswordScreen({
       />
       )}
       
-      <SharpInput
+      <Input
         label={confirmPasswordLabel}
         value={form.confirmPassword}
         onChangeText={form.setConfirmPassword}
         placeholder={confirmPasswordPlaceholder}
-        iconLeft={(color) => <LockClosed width={18} height={18} color={color}/>}
-        iconRight={form.showConfirmPassword ? (color)=><EyeOff width={18} height={18} color={color}/> : (color)=><Eye width={18} height={18} color={color}/>}
+        iconLeft={"lock-closed-outline"}
+        iconRight={form.showConfirmPassword ? "eye-off-outline" : "eye-outline"}
         onPressIconRight={() => form.setShowConfirmPassword(!form.showConfirmPassword)}
         secureTextEntry={!form.showConfirmPassword}
         textContentType="password"

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 && (
@@ -29,13 +31,14 @@ export default function PasswordRequirementsCard({
           fontFamily: Fonts.montserrat.semiBold,
           color: colors.text.primary,
           marginBottom: 4,
+          textAlign: isRTL?"left":"right"
         }}>
           {cardTitle}
         </Text>
       )}
 
       {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}