diff --git a/apps/expo-example/App.tsx b/apps/expo-example/App.tsx
index fb29cfa2..d40353b9 100644
--- a/apps/expo-example/App.tsx
+++ b/apps/expo-example/App.tsx
@@ -231,6 +231,12 @@ const TailwindTestPage = () => {
border-l-4 border-yellow-500
+
+ border-s-4 border-orange-500
+
+
+ border-e-4 border-violet-500
+
diff --git a/packages/uniwind/src/metro/processor/rn.ts b/packages/uniwind/src/metro/processor/rn.ts
index d347a346..2b55ca89 100644
--- a/packages/uniwind/src/metro/processor/rn.ts
+++ b/packages/uniwind/src/metro/processor/rn.ts
@@ -195,6 +195,12 @@ export class RN {
.replace('Block', 'Vertical')
}
+ if (x.includes('border')) {
+ return x
+ .replace('InlineStart', 'Start')
+ .replace('InlineEnd', 'End')
+ }
+
return x
},
)
diff --git a/packages/uniwind/tests/native/styles-parsing/borders.test.tsx b/packages/uniwind/tests/native/styles-parsing/borders.test.tsx
index 2853f2c1..7c35c738 100644
--- a/packages/uniwind/tests/native/styles-parsing/borders.test.tsx
+++ b/packages/uniwind/tests/native/styles-parsing/borders.test.tsx
@@ -140,6 +140,22 @@ describe('Borders', () => {
expect(getStylesFromId('border-dashed').borderStyle).toBe('dashed')
expect(getStylesFromId('border-dotted').borderStyle).toBe('dotted')
})
+
+ test('Inline border', () => {
+ const { getStylesFromId } = renderUniwind(
+
+
+
+
+
+ ,
+ )
+
+ expect(getStylesFromId('border-s-2').borderStartWidth).toBe(2)
+ expect(getStylesFromId('border-e-4').borderEndWidth).toBe(4)
+ expect(getStylesFromId('border-e-red-500').borderEndColor).toBe(TW_RED_500)
+ expect(getStylesFromId('rounded-s-2xl').borderStartStartRadius).toBe(16)
+ })
})
describe('Outline', () => {