objectstack-ai · os-zhuang · Jun 11, 2026 · Jun 11, 2026
diff --git a/__tests__/snapshots/__snapshots__/batch-components.test.tsx.snap b/__tests__/snapshots/__snapshots__/batch-components.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`BatchActionBar matches snapshot with all actions 1`] = `
         size={14}
       />
       <Text
-        className="ml-1.5 text-xs font-semibold text-primary"
+        className="ms-1.5 text-xs font-semibold text-primary"
       >
         Edit
       </Text>
@@ -133,7 +133,7 @@ exports[`BatchActionBar matches snapshot with all actions 1`] = `
         size={14}
       />
       <Text
-        className="ml-1.5 text-xs font-semibold text-destructive"
+        className="ms-1.5 text-xs font-semibold text-destructive"
       >
         Delete
       </Text>

diff --git a/__tests__/snapshots/__snapshots__/common-components-extended.test.tsx.snap b/__tests__/snapshots/__snapshots__/common-components-extended.test.tsx.snap
@@ -97,7 +97,7 @@ exports[`OfflineIndicator snapshots renders syncing in progress 1`] = `
       size={12}
     />
     <Text
-      className="ml-1 text-xs font-medium text-primary"
+      className="ms-1 text-xs font-medium text-primary"
     >
       Syncing…
     </Text>
@@ -155,7 +155,7 @@ exports[`OfflineIndicator snapshots renders syncing state when online with pendi
       size={12}
     />
     <Text
-      className="ml-1 text-xs font-medium text-primary"
+      className="ms-1 text-xs font-medium text-primary"
     >
       Sync
     </Text>

diff --git a/app/(app)/[appName]/index.tsx b/app/(app)/[appName]/index.tsx
@@ -77,7 +77,7 @@ export default function AppHomeScreen() {
         <View className="rounded-xl bg-primary/10 p-2.5">
           <Icon size={20} color={accent} />
         </View>
-        <Text className="ml-3 flex-1 text-base font-medium text-card-foreground">
+        <Text className="ms-3 flex-1 text-base font-medium text-card-foreground">
           {item.label}
         </Text>
         {navigable ? <ChevronRight size={18} color="#94a3b8" /> : null}
@@ -92,7 +92,7 @@ export default function AppHomeScreen() {
       <View key={group.id} className="mt-5">
         <View className="mb-2 flex-row items-center px-1">
           <GroupIcon size={14} color="#94a3b8" />
-          <Text className="ml-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          <Text className="ms-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
             {group.label}
           </Text>
         </View>

diff --git a/app/(tabs)/apps.tsx b/app/(tabs)/apps.tsx
@@ -89,7 +89,7 @@ export default function AppsScreen() {
                   <View className="rounded-xl bg-primary/10 p-3">
                     <Icon size={24} color={accent} />
                   </View>
-                  <View className="ml-4 flex-1">
+                  <View className="ms-4 flex-1">
                     <Text className="text-base font-semibold text-card-foreground">
                       {app.label}
                     </Text>

diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -133,7 +133,7 @@ export default function HomeScreen() {
         }
       >
         <View className="mb-5 flex-row items-start justify-between">
-          <View className="flex-1 pr-3">
+          <View className="flex-1 pe-3">
             <Text className="text-2xl font-bold text-foreground">{heading}</Text>
             <Text className="mt-1 text-sm text-muted-foreground">
               {t("home.subtitle")}
@@ -161,7 +161,7 @@ export default function HomeScreen() {
           <View className="rounded-xl bg-primary/10 p-3">
             <Sparkles size={24} color={accent} />
           </View>
-          <View className="ml-4 flex-1">
+          <View className="ms-4 flex-1">
             <Text className="text-base font-semibold text-card-foreground">
               {t("home.assistantTitle")}
             </Text>
@@ -206,7 +206,7 @@ export default function HomeScreen() {
                   <View className="rounded-xl bg-primary/10 p-2.5">
                     <Clock size={18} color={accent} />
                   </View>
-                  <View className="ml-3 flex-1">
+                  <View className="ms-3 flex-1">
                     <Text
                       className="text-base font-medium text-card-foreground"
                       numberOfLines={1}
@@ -265,7 +265,7 @@ export default function HomeScreen() {
                 <View className="rounded-xl bg-primary/10 p-3">
                   <LayoutDashboard size={24} color={accent} />
                 </View>
-                <View className="ml-4 flex-1">
+                <View className="ms-4 flex-1">
                   <Text className="text-base font-semibold text-card-foreground">
                     {d.label}
                   </Text>

diff --git a/app/(tabs)/more.tsx b/app/(tabs)/more.tsx
@@ -34,7 +34,7 @@ function MenuItem({ icon, label, onPress, showChevron = true, destructive = fals
       accessibilityLabel={label}
       accessibilityRole="button"
     >
-      <View className="mr-3">{icon}</View>
+      <View className="me-3">{icon}</View>
       <Text
         className={`flex-1 text-base ${
           destructive ? "text-red-600" : "text-foreground"
@@ -98,7 +98,7 @@ export default function MoreScreen() {
           <View className="rounded-full bg-muted p-3">
             <UserCircle size={32} color="#94a3b8" />
           </View>
-          <View className="ml-3 flex-1">
+          <View className="ms-3 flex-1">
             <Text className="text-lg font-bold text-foreground">
               {session?.user.name ?? t("more.profileFallbackName")}
             </Text>

diff --git a/app/(tabs)/search.tsx b/app/(tabs)/search.tsx
@@ -32,7 +32,7 @@ export default function SearchScreen() {
         <View className="flex-row items-center rounded-xl bg-muted px-4 py-3">
           <SearchIcon size={20} color="#94a3b8" />
           <Input
-            className="ml-2 flex-1 border-0 bg-transparent p-0 text-base"
+            className="ms-2 flex-1 border-0 bg-transparent p-0 text-base"
             placeholder={t("search.placeholder")}
             value={query}
             onChangeText={setQuery}
@@ -93,7 +93,7 @@ export default function SearchScreen() {
                     accessibilityLabel={q}
                   >
                     <Clock size={16} color="#94a3b8" />
-                    <Text className="ml-3 flex-1 text-base text-foreground" numberOfLines={1}>
+                    <Text className="ms-3 flex-1 text-base text-foreground" numberOfLines={1}>
                       {q}
                     </Text>
                   </TouchableOpacity>
@@ -163,7 +163,7 @@ export default function SearchScreen() {
                     accessibilityRole="button"
                     accessibilityLabel={t("search.openLabel", { title: rec.title })}
                   >
-                    <View className="mr-3 rounded-lg bg-primary/10 p-2">
+                    <View className="me-3 rounded-lg bg-primary/10 p-2">
                       <FileText size={16} color={accent} />
                     </View>
                     <View className="flex-1">

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,5 +1,6 @@
 import "../global.css";
-import "~/lib/i18n"; // Initialize i18next before any screen calls useTranslation()
+import i18n from "~/lib/i18n"; // Initialize i18next before any screen calls useTranslation()
+import { syncRTL } from "~/lib/rtl";
 
 import { useCallback, useEffect, useMemo } from "react";
 import { Stack, useRouter, useSegments } from "expo-router";
@@ -88,6 +89,12 @@ export default function RootLayout() {
     colorScheme.set(themeMode);
   }, [themeMode]);
 
+  // Apply the writing direction (LTR/RTL) for the active language on launch —
+  // on web this sets the document `dir`; on native it forces RTL (persisted).
+  useEffect(() => {
+    syncRTL(i18n.language);
+  }, []);
+
   useProtectedRoute(serverUrl, isReady);
 
   const { data: session } = authClient.useSession();

diff --git a/components/actions/ResultDialog.tsx b/components/actions/ResultDialog.tsx
@@ -88,7 +88,7 @@ function ResultField({ field, value }: { field: ResolvedField; value: unknown })
         </Text>
         {isSecret && (
           <Pressable onPress={() => setRevealed((r) => !r)} accessibilityRole="button">
-            <Text className="ml-3 text-xs font-semibold text-primary">
+            <Text className="ms-3 text-xs font-semibold text-primary">
               {revealed ? "Hide" : "Reveal"}
             </Text>
           </Pressable>

diff --git a/components/batch/BatchActionBar.tsx b/components/batch/BatchActionBar.tsx
@@ -54,7 +54,7 @@ export function BatchActionBar({
             className="flex-row items-center rounded-lg bg-primary/10 px-3 py-2"
           >
             <Edit3 size={14} color={accent} />
-            <Text className="ml-1.5 text-xs font-semibold text-primary">{t("common.edit")}</Text>
+            <Text className="ms-1.5 text-xs font-semibold text-primary">{t("common.edit")}</Text>
           </Pressable>
         )}
         {onBatchDelete && (
@@ -63,7 +63,7 @@ export function BatchActionBar({
             className="flex-row items-center rounded-lg bg-destructive/10 px-3 py-2"
           >
             <Trash2 size={14} color="#ef4444" />
-            <Text className="ml-1.5 text-xs font-semibold text-destructive">{t("common.delete")}</Text>
+            <Text className="ms-1.5 text-xs font-semibold text-destructive">{t("common.delete")}</Text>
           </Pressable>
         )}
       </View>

diff --git a/components/common/FloatingActionButton.tsx b/components/common/FloatingActionButton.tsx
@@ -32,7 +32,7 @@ export function FloatingActionButton({
   };
 
   return (
-    <View testID={testID} className="absolute bottom-6 right-6 items-end">
+    <View testID={testID} className="absolute bottom-6 end-6 items-end">
       {/* Expanded action items */}
       {expanded && actions && actions.map((action) => (
         <TouchableOpacity

diff --git a/components/common/OfflineIndicator.tsx b/components/common/OfflineIndicator.tsx
@@ -55,7 +55,7 @@ export function OfflineIndicator({
           className="flex-row items-center rounded-lg bg-primary/10 px-2.5 py-1"
         >
           <RefreshCw size={12} color={accent} />
-          <Text className="ml-1 text-xs font-medium text-primary">
+          <Text className="ms-1 text-xs font-medium text-primary">
             {isSyncing ? "Syncing…" : "Sync"}
           </Text>
         </Pressable>

diff --git a/components/common/ScreenHeader.tsx b/components/common/ScreenHeader.tsx
@@ -97,7 +97,7 @@ export function ScreenHeader({
         </View>
 
         {right ? (
-          <View className="flex-row items-center pr-1">{right}</View>
+          <View className="flex-row items-center pe-1">{right}</View>
         ) : (
           <View className="w-2" />
         )}

diff --git a/components/common/SkeletonList.tsx b/components/common/SkeletonList.tsx
@@ -15,7 +15,7 @@ export function SkeletonList({ rows = 5, showAvatar = true, testID = "skeleton-l
       {Array.from({ length: rows }).map((_, i) => (
         <View key={i} className="flex-row items-center px-4 py-3 border-b border-border/30">
           {showAvatar && (
-            <View className="h-10 w-10 rounded-full bg-muted animate-pulse mr-3" />
+            <View className="h-10 w-10 rounded-full bg-muted animate-pulse me-3" />
           )}
           <View className="flex-1">
             <View className="h-4 w-3/4 rounded bg-muted animate-pulse mb-2" />

diff --git a/components/common/UndoSnackbar.tsx b/components/common/UndoSnackbar.tsx
@@ -56,7 +56,7 @@ export function UndoSnackbar({
         accessibilityLabel={t("common.undo")}
         accessibilityRole="button"
       >
-        <Text className="ml-3 text-sm font-bold text-primary">{t("common.undo")}</Text>
+        <Text className="ms-3 text-sm font-bold text-primary">{t("common.undo")}</Text>
       </TouchableOpacity>
     </View>
   );

diff --git a/components/home/QuickCreateSheet.tsx b/components/home/QuickCreateSheet.tsx
@@ -98,7 +98,7 @@ export function QuickCreateSheet({
                 <View className="rounded-lg bg-primary/10 p-2">
                   <Icon size={18} color={accent} />
                 </View>
-                <View className="ml-3 flex-1">
+                <View className="ms-3 flex-1">
                   <Text className="text-base text-foreground">{o.label}</Text>
                   <Text className="text-xs text-muted-foreground">{o.appLabel}</Text>
                 </View>

diff --git a/components/query/QueryBuilder.tsx b/components/query/QueryBuilder.tsx
@@ -61,15 +61,15 @@ export function QueryBuilder({
           className="flex-row items-center rounded-lg border border-primary/30 bg-primary/10 px-3 py-1.5"
         >
           <ToggleLeft size={14} color={accent} />
-          <Text className="ml-1.5 text-xs font-semibold text-primary">
+          <Text className="ms-1.5 text-xs font-semibold text-primary">
             Match {root.logic === "AND" ? "ALL" : "ANY"}
           </Text>
         </Pressable>
 
         {root.filters.length > 0 && (
           <Pressable onPress={onClear} className="flex-row items-center rounded-lg px-2 py-1">
             <Trash2 size={14} color="#ef4444" />
-            <Text className="ml-1 text-xs text-destructive">{t("common.clear")}</Text>
+            <Text className="ms-1 text-xs text-destructive">{t("common.clear")}</Text>
           </Pressable>
         )}
       </View>
@@ -100,7 +100,7 @@ export function QueryBuilder({
         className="mt-3 flex-row items-center self-start rounded-lg border border-dashed border-border px-3 py-2"
       >
         <Plus size={14} color="#64748b" />
-        <Text className="ml-1.5 text-xs font-medium text-muted-foreground">{t("filter.addFilter")}</Text>
+        <Text className="ms-1.5 text-xs font-medium text-muted-foreground">{t("filter.addFilter")}</Text>
       </Pressable>
     </View>
   );

diff --git a/components/realtime/CollaborationIndicator.tsx b/components/realtime/CollaborationIndicator.tsx
@@ -47,7 +47,7 @@ export function CollaborationIndicator({
 
   return (
     <View className="flex-row items-center gap-1 px-4 py-2" accessible={true} accessibilityLabel={`${members.length} viewer${members.length !== 1 ? "s" : ""} active`}>
-      <Text className="mr-1 text-xs text-muted-foreground">Viewing:</Text>
+      <Text className="me-1 text-xs text-muted-foreground">Viewing:</Text>
       {visible.map((member) => (
         <View
           key={member.userId}
@@ -57,7 +57,7 @@ export function CollaborationIndicator({
             {getInitial(member.userId)}
           </Text>
           <View
-            className="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-white"
+            className="absolute -bottom-0.5 -end-0.5 h-2 w-2 rounded-full border border-white"
             style={{
               backgroundColor: statusColors[member.status] ?? "#94a3b8",
             }}

diff --git a/components/renderers/CalendarViewRenderer.tsx b/components/renderers/CalendarViewRenderer.tsx
@@ -268,7 +268,7 @@ export function CalendarViewRenderer({
                 onPress={() => onEventPress?.(ev)}
               >
                 <View
-                  className="mr-3 h-3 w-3 rounded-full"
+                  className="me-3 h-3 w-3 rounded-full"
                   style={{ backgroundColor: ev.color ?? "#3b82f6" }}
                 />
                 <Text className="flex-1 text-sm font-medium text-card-foreground" numberOfLines={1}>

diff --git a/components/renderers/ChartViewRenderer.tsx b/components/renderers/ChartViewRenderer.tsx
@@ -157,7 +157,7 @@ function PieChartView({ data }: { data: AnalyticsDataPoint[] }) {
               {point.label}
             </Text>
             <Text className="text-sm font-medium text-foreground">{point.value}</Text>
-            <Text className="text-xs text-muted-foreground w-12 text-right">{pct}%</Text>
+            <Text className="text-xs text-muted-foreground w-12 text-end">{pct}%</Text>
           </View>
         );
       })}

diff --git a/components/renderers/DashboardViewRenderer.tsx b/components/renderers/DashboardViewRenderer.tsx
@@ -104,7 +104,7 @@ function MetricWidget({
     <Card className="mb-3 p-4">
       <View className="flex-row items-start justify-between">
         <Text
-          className="min-h-[40px] flex-1 pr-2 text-sm font-medium text-muted-foreground"
+          className="min-h-[40px] flex-1 pe-2 text-sm font-medium text-muted-foreground"
           numberOfLines={2}
         >
           {widget.title ?? widget.name}
@@ -137,7 +137,7 @@ function MetricWidget({
                   <TrendingDown size={12} color="#dc2626" />
                 )}
                 <Text
-                  className={`ml-1 text-xs font-semibold ${
+                  className={`ms-1 text-xs font-semibold ${
                     isPositive ? "text-emerald-600" : "text-red-600"
                   }`}
                 >

diff --git a/components/renderers/DetailViewRenderer.tsx b/components/renderers/DetailViewRenderer.tsx
@@ -300,7 +300,7 @@ function DetailActionBar({
       {hasMore && (
         <>
           <Pressable
-            className="ml-auto h-9 w-9 items-center justify-center rounded-lg active:bg-muted"
+            className="ms-auto h-9 w-9 items-center justify-center rounded-lg active:bg-muted"
             onPress={() => setMoreOpen(true)}
             accessibilityRole="button"
             accessibilityLabel={t("records.moreActions")}
@@ -393,7 +393,7 @@ function RelatedListSection({
                   {config.columns.map((col) => (
                     <View key={col} className="flex-row justify-between gap-3">
                       <Text className="text-xs text-muted-foreground">{humanizeField(col)}</Text>
-                      <Text className="flex-1 text-right text-sm text-card-foreground" numberOfLines={1}>
+                      <Text className="flex-1 text-end text-sm text-card-foreground" numberOfLines={1}>
                         {rec[col] == null ? "—" : String(rec[col])}
                       </Text>
                     </View>
@@ -444,7 +444,7 @@ function RecordNavigator({
         <ChevronLeft size={16} color={hasPrevious ? accent : "#94a3b8"} />
         <Text
           className={cn(
-            "ml-1 text-sm font-medium",
+            "ms-1 text-sm font-medium",
             hasPrevious ? "text-primary" : "text-muted-foreground",
           )}
         >
@@ -466,7 +466,7 @@ function RecordNavigator({
       >
         <Text
           className={cn(
-            "mr-1 text-sm font-medium",
+            "me-1 text-sm font-medium",
             hasNext ? "text-primary" : "text-muted-foreground",
           )}
         >

diff --git a/components/renderers/FilterDrawer.tsx b/components/renderers/FilterDrawer.tsx
@@ -77,11 +77,11 @@ export function FilterDrawer({
           <View className="flex-row items-center justify-between border-b border-border px-4 py-3">
             <View className="flex-row items-center">
               <Filter size={18} color={accent} />
-              <Text className="ml-2 text-lg font-semibold text-foreground">
+              <Text className="ms-2 text-lg font-semibold text-foreground">
                 Filters
               </Text>
               {filterCount > 0 && (
-                <View className="ml-2 min-w-[20px] items-center rounded-full bg-primary px-1.5 py-0.5">
+                <View className="ms-2 min-w-[20px] items-center rounded-full bg-primary px-1.5 py-0.5">
                   <Text className="text-[10px] font-bold text-primary-foreground">
                     {filterCount}
                   </Text>
@@ -166,15 +166,15 @@ export function FilterButton({ count = 0, onPress, className }: FilterButtonProp
       <Filter size={16} color={isActive ? "#1e40af" : "#64748b"} />
       <Text
         className={cn(
-          "ml-1.5 text-xs font-medium",
+          "ms-1.5 text-xs font-medium",
           isActive ? "text-primary" : "text-muted-foreground",
         )}
       >
         Filter
       </Text>
 
       {isActive && (
-        <View className="absolute -right-1.5 -top-1.5 min-w-[18px] items-center rounded-full bg-primary px-1 py-0.5">
+        <View className="absolute -end-1.5 -top-1.5 min-w-[18px] items-center rounded-full bg-primary px-1 py-0.5">
           <Text className="text-[10px] font-bold text-primary-foreground">
             {count}
           </Text>