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', () => {