@towsila/expo-ui-library 1.9.0 → 1.10.0

package/package.json

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

package/src/components/screens/VerificationCodeScreen.tsx

@@ -1,5 +1,5 @@
 import {  useState } from "react";
-import { Text, TouchableOpacity } from "react-native";
+import { I18nManager, Text, TouchableOpacity } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
 import { textSize, Fonts} from "../../tokens/typography";
 import TemplateSubPage from "../reusable/templateSubPage";
@@ -17,6 +17,7 @@ interface VerificationCodeScreenProps {
   resendBtn?:string;
   onBack: ()=>void;
   loading?: boolean;
+  unit?: string;
 }
 
 export default function VerificationCodeScreen({
@@ -30,6 +31,7 @@ export default function VerificationCodeScreen({
   onBack,
   loading,
   resendBtn="Resend Code",
+  unit,
 }: VerificationCodeScreenProps) {
   const { colors } = useAppTheme();
   const [code, setCode] = useState("");
@@ -52,7 +54,7 @@ export default function VerificationCodeScreen({
       <SharpOtpInput length={4} onChange={setCode} />
       {count !== 0 ? (
         <Text style={{ textAlign: "center", color: colors.text.placeholder, fontSize: textSize.xs, fontFamily: Fonts.montserrat.regular}}>
-          {resendText}: {count} seconds
+          {resendText}: {count} {unit}
         </Text>
       ) : (
         <TouchableOpacity onPress={handleResend}>

package/src/components/screens/onBoarding.tsx

@@ -4,6 +4,7 @@ import { useAppTheme } from "../../context/ThemeContext";
 import { Fonts, textSize } from "../../tokens/typography";
 import {Arrow} from "@towsila/icons";
 import SharpButton from "../ui/sharpButton";
+import { I18nManager } from "react-native";
 
 interface OnBoardingProps {
   onSkip: () => void;
@@ -48,7 +49,15 @@ export default function OnBoarding({
           >
             {skipLabel}
           </Text>
-            <Arrow width={20} height={20} color={colors.text.primary} style={styles.skipIcon}/>
+          <Arrow
+            width={20}
+            height={20}
+            color={colors.text.primary}
+            style={[
+              styles.skipIcon,
+              I18nManager.isRTL && { transform: [{ scaleX: -1 }] },
+            ]}
+          />        
         </TouchableOpacity>
       </View>
 

package/src/components/ui/PageTopBar.tsx

@@ -1,6 +1,6 @@
 import { Fonts, textSize } from "../../tokens/typography";
 import { useAppTheme } from "../../context/ThemeContext";
-import {  Text, TouchableOpacity, View } from "react-native";
+import {  I18nManager, Text, TouchableOpacity, View } from "react-native";
 import {ArrowBack} from "@towsila/icons";
 
 interface PageProps{
@@ -18,7 +18,7 @@ export default function PageTopBar({title, description, onBack}:PageProps){
                 flexDirection: "row", 
                 alignItems: "center", marginBottom: 10 }}>
                 <TouchableOpacity onPress={onBack}>
-                    <ArrowBack width={24} height={24} color={colors.text.primary}/>
+                    <ArrowBack width={24} height={24} color={colors.text.primary} style={[I18nManager.isRTL && { transform: [{ scaleX: -1 }] },]}/>
                 </TouchableOpacity>
                 <Text style={{ flex: 1, textAlign: "center", color: colors.text.primary, fontSize: textSize.xxl, fontFamily: Fonts.montserrat.bold }}>
                     {title}

package/src/components/ui/sharpInput.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import { Text, TextInput, TextInputProps, View, StyleSheet, TouchableOpacity } from "react-native";
+import { Text, TextInput, TextInputProps, View, StyleSheet, TouchableOpacity, I18nManager } from "react-native";
 import { useAppTheme } from "../../context/ThemeContext";
 import { textSize, Fonts } from "../../tokens/typography";
 import ErrorMessage from "./error";
 import SharpContainer from "./sharpContainer";
+
 interface InputProps extends TextInputProps {
   value: string;
   onChangeText: (text: string) => void;
@@ -44,76 +45,61 @@ export default function SharpInput({
     return colors.semantic.border; // default border color
   };
 
-  return (
-    <View style={{ marginBottom: 4 }}>
-      {label && (
-        <Text
-          style={{
-            color: colors.text.primary,
-            fontSize: textSize.xs,
-            fontFamily: Fonts.montserrat.semiBold,
-            marginBottom: 6,
-          }}
-        >
-          {label}
-        </Text>
-      )}
 
-      {/* Sharp container wraps the input + icons */}
-      <SharpContainer
-        height={height}
-        bgColor={bgColor ?? colors.background.main}
-        borderColor={getBorderColor()} // dynamic border
-        
-      >
-        <View style={styles.inputWrapper}>
-          {iconLeft && (
-            <View style={styles.iconLeft}>
-              {iconLeft(getBorderColor())}
-            </View>
-          )}
-          {prefix && (
-            <View style={styles.prefix}>
-              {prefix}
-            </View>
-          )}
+return (
+  <View style={{ marginBottom: 4 }}>
+    {label && (
+      <Text style={{ color: colors.text.primary, fontSize: textSize.xs, fontFamily: Fonts.montserrat.semiBold, marginBottom: 6 }}>
+        {label}
+      </Text>
+    )}
 
-          <TextInput
-            value={value}
-            onChangeText={(text) => {
-              onChangeText(text);
-              if (error) onClearError?.();
-            }}
-            placeholder={placeholder}
-            placeholderTextColor={colors.text.secondary}
-            onFocus={() => {
-              setFocused(true);
-              if (error) onClearError?.();
-            }}
-            onBlur={() => setFocused(false)}
-            style={[
-              styles.input,
-              {
-                color: colors.text.primary,
-                paddingLeft: iconLeft ? 42 : 16,
-                paddingRight: iconRight ? 42 : 16,
-                backgroundColor: "transparent", // let SharpContainer handle background
-              },
-            ]}
-            {...rest}
-          />
+    <SharpContainer height={height} bgColor={bgColor ?? colors.background.main} borderColor={getBorderColor()}>
+      <View style={styles.inputWrapper}>
+        {iconLeft && (
+          <View style={styles.iconSlot}>
+            {iconLeft(getBorderColor())}
+          </View>
+        )}
 
-          {iconRight && (
-            <TouchableOpacity onPress={onPressIconRight} style={styles.iconRight}>
-              {iconRight(colors.semantic.border)}
-            </TouchableOpacity>
-          )}
-        </View>
-      </SharpContainer>
+        {prefix && (
+          <View style={styles.prefix}>
+            {prefix}
+          </View>
+        )}
+
+        <TextInput
+          value={value}
+          onChangeText={(text) => {
+            onChangeText(text);
+            if (error) onClearError?.();
+          }}
+          placeholder={placeholder}
+          placeholderTextColor={colors.text.secondary}
+          onFocus={() => { setFocused(true); if (error) onClearError?.(); }}
+          onBlur={() => setFocused(false)}
+          style={[
+            styles.input,
+            {
+              color: colors.text.primary,
+              backgroundColor: "transparent",
+              textAlign: I18nManager.isRTL ? "right" : "left",
+            },
+          ]}
+          {...rest}
+        />
 
-      {error && <ErrorMessage message={error} />}
-    </View>
-  );
+        {iconRight && (
+          <TouchableOpacity onPress={onPressIconRight} style={styles.iconSlot}>
+            {iconRight(colors.semantic.border)}
+          </TouchableOpacity>
+        )}
+      </View>
+    </SharpContainer>
+
+    {error && <ErrorMessage message={error} />}
+  </View>
+);
 }
 
 const styles = StyleSheet.create({
@@ -121,17 +107,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 4, // small inner padding
-  },
-  iconLeft: {
-    position: "absolute",
-    left: 14,
-    zIndex: 1,
   },
-  iconRight: {
-    position: "absolute",
-    right: 14,
-    zIndex: 1,
+  iconSlot: {
+    paddingHorizontal: 12,
+    justifyContent: "center",
+    alignItems: "center",
   },
   input: {
     flex: 1,
@@ -143,6 +123,7 @@ const styles = StyleSheet.create({
   prefix:{
     flexDirection: "row",
     gap: 4,
-    alignItems:"center"
+    alignItems:"center",
+    paddingStart: 14,
   }
 });