@mgcrea/react-native-tailwind 0.13.0 → 0.14.0

package/dist/babel/plugin/state.ts

@@ -103,6 +103,10 @@ export type PluginState = PluginPass & {
   needsWindowDimensionsImport: boolean;
   windowDimensionsVariableName: string;
   windowDimensionsLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
+  hasI18nManagerImport: boolean;
+  needsI18nManagerImport: boolean;
+  i18nManagerVariableName: string; // Variable name for the RTL state (e.g., '_twIsRTL')
+  i18nManagerLocalIdentifier?: string; // Local identifier if I18nManager is already imported with an alias
   customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   supportedAttributes: Set<string>;
@@ -163,6 +167,10 @@ export function createInitialState(
     needsWindowDimensionsImport: false,
     windowDimensionsVariableName: "_twDimensions",
     windowDimensionsLocalIdentifier: undefined,
+    hasI18nManagerImport: false,
+    needsI18nManagerImport: false,
+    i18nManagerVariableName: "_twIsRTL",
+    i18nManagerLocalIdentifier: undefined,
     customTheme,
     schemeModifierConfig,
     supportedAttributes: exactMatches,

package/dist/babel/plugin/visitors/className.test.ts

@@ -76,6 +76,35 @@ describe("className visitor - basic transformation", () => {
     expect(output).toMatch(/_state\s*=>/);
   });
 
+  it("should preserve 'use client' directive when injecting StyleSheet.create", () => {
+    const input = `
+      'use client';
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="m-4 p-2" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // 'use client' should be the first statement
+    const lines = output.split("\n").filter((l: string) => l.trim());
+    const useClientIndex = lines.findIndex(
+      (l: string) => l.includes("'use client'") || l.includes('"use client"'),
+    );
+    expect(useClientIndex).toBe(0);
+
+    // StyleSheet.create should be in the output
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_twStyles");
+
+    // Imports should come after 'use client', before StyleSheet.create
+    const importIndex = lines.findIndex((l: string) => l.includes("import"));
+    const styleSheetIndex = lines.findIndex((l: string) => l.includes("StyleSheet.create"));
+    expect(importIndex).toBeGreaterThan(useClientIndex);
+    expect(styleSheetIndex).toBeGreaterThan(importIndex);
+  });
+
   it("should merge dynamic className with function-based style prop", () => {
     const input = `
       import { TextInput } from 'react-native';
@@ -1310,3 +1339,287 @@ describe("className visitor - directional border colors", () => {
     expect(output).toMatch(/isError\s*\?\s*_twStyles\._border_t_red_500/);
   });
 });
+
+describe("className visitor - directional modifiers (RTL/LTR)", () => {
+  it("should transform rtl: modifier and inject I18nManager import", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="rtl:mr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should import I18nManager
+    expect(output).toContain("I18nManager");
+
+    // Should declare _twIsRTL variable
+    expect(output).toContain("_twIsRTL");
+    expect(output).toContain("I18nManager.isRTL");
+
+    // Should have StyleSheet with rtl style
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_rtl_mr_4");
+
+    // Should have conditional for RTL
+    expect(output).toMatch(/_twIsRTL\s*&&\s*_twStyles\._rtl_mr_4/);
+  });
+
+  it("should transform ltr: modifier with negated conditional", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="ltr:ml-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should import I18nManager
+    expect(output).toContain("I18nManager");
+
+    // Should have StyleSheet with ltr style
+    expect(output).toContain("_ltr_ml_4");
+
+    // Should have negated conditional for LTR (!_twIsRTL)
+    expect(output).toMatch(/!\s*_twIsRTL\s*&&\s*_twStyles\._ltr_ml_4/);
+  });
+
+  it("should combine rtl: and ltr: modifiers", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="rtl:mr-4 ltr:ml-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have both styles
+    expect(output).toContain("_rtl_mr_4");
+    expect(output).toContain("_ltr_ml_4");
+
+    // Should have both conditionals
+    expect(output).toMatch(/_twIsRTL\s*&&\s*_twStyles\._rtl_mr_4/);
+    expect(output).toMatch(/!\s*_twIsRTL\s*&&\s*_twStyles\._ltr_ml_4/);
+  });
+
+  it("should combine directional modifiers with base classes", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="p-4 bg-white rtl:pr-8 ltr:pl-8" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have base style
+    expect(output).toContain("_bg_white_p_4");
+
+    // Should have directional styles
+    expect(output).toContain("_rtl_pr_8");
+    expect(output).toContain("_ltr_pl_8");
+
+    // Should generate an array with base and conditional styles
+    expect(output).toMatch(/style:\s*\[/);
+  });
+
+  it("should combine directional modifiers with platform modifiers", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="p-4 ios:p-6 rtl:mr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Should have I18nManager import
+    expect(output).toContain("I18nManager");
+
+    // Should have all styles
+    expect(output).toContain("_p_4");
+    expect(output).toContain("_ios_p_6");
+    expect(output).toContain("_rtl_mr_4");
+
+    // Should have Platform.select
+    expect(output).toContain("Platform.select");
+
+    // Should have RTL conditional
+    expect(output).toMatch(/_twIsRTL\s*&&/);
+  });
+
+  it("should not add I18nManager import if already present", () => {
+    const input = `
+      import { View, I18nManager } from 'react-native';
+      export function Component() {
+        return <View className="rtl:mr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have only one I18nManager import (merged, not duplicated)
+    const i18nMatches = output.match(/I18nManager/g);
+    // Should have I18nManager in: import, variable declaration, and style usage
+    expect(i18nMatches).toBeTruthy();
+    // Should not have duplicate imports
+    expect(output).not.toMatch(/import\s*\{[^}]*I18nManager[^}]*I18nManager[^}]*\}/);
+  });
+
+  it("should work with directional logical properties", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="rtl:ms-4 ltr:me-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have logical property styles
+    expect(output).toContain("_rtl_ms_4");
+    expect(output).toContain("_ltr_me_4");
+
+    // Should contain marginStart and marginEnd in the StyleSheet
+    expect(output).toContain("marginStart");
+    expect(output).toContain("marginEnd");
+  });
+
+  it("should combine directional modifiers with color scheme modifiers", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="bg-white dark:bg-gray-900 rtl:pr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have useColorScheme
+    expect(output).toContain("useColorScheme");
+
+    // Should have I18nManager
+    expect(output).toContain("I18nManager");
+
+    // Should have all styles
+    expect(output).toContain("_bg_white");
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toContain("_rtl_pr_4");
+
+    // Should have both conditionals
+    expect(output).toMatch(/_twColorScheme\s*===\s*["']dark["']/);
+    expect(output).toMatch(/_twIsRTL\s*&&/);
+  });
+
+  it("should handle aliased I18nManager import", () => {
+    const input = `
+      import { View, I18nManager as RTL } from 'react-native';
+      export function Component() {
+        // Use RTL somewhere so TypeScript doesn't strip the unused import
+        const isRtl = RTL.isRTL;
+        return <View className="rtl:mr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should use the aliased identifier RTL.isRTL instead of I18nManager.isRTL
+    expect(output).toContain("RTL.isRTL");
+    // Should preserve the aliased import
+    expect(output).toContain("I18nManager as RTL");
+    // Should not add a separate I18nManager import without alias
+    expect(output).not.toMatch(/I18nManager,|,\s*I18nManager\s*[,}]/);
+  });
+
+  it("should preserve 'use client' directive when injecting I18nManager variable", () => {
+    const input = `
+      'use client';
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="rtl:mr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // 'use client' should be the first statement
+    const lines = output.split("\n").filter((l: string) => l.trim());
+    const useClientIndex = lines.findIndex(
+      (l: string) => l.includes("'use client'") || l.includes('"use client"'),
+    );
+    expect(useClientIndex).toBe(0);
+
+    // I18nManager variable should come after imports, not before 'use client'
+    expect(output).toContain("_twIsRTL");
+    expect(output).toContain("I18nManager.isRTL");
+  });
+
+  it("should preserve 'use strict' directive when injecting I18nManager variable", () => {
+    const input = `
+      'use strict';
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="rtl:mr-4" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // 'use strict' should be preserved at the top
+    const lines = output.split("\n").filter((l: string) => l.trim());
+    const useStrictIndex = lines.findIndex(
+      (l: string) => l.includes("'use strict'") || l.includes('"use strict"'),
+    );
+    expect(useStrictIndex).toBe(0);
+
+    // I18nManager variable should work correctly
+    expect(output).toContain("_twIsRTL");
+    expect(output).toContain("I18nManager.isRTL");
+  });
+
+  it("should expand text-start to directional modifiers", () => {
+    const input = `
+      import { Text } from 'react-native';
+      export function Component() {
+        return <Text className="text-start" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have I18nManager import (text-start expands to ltr:/rtl: modifiers)
+    expect(output).toContain("I18nManager");
+
+    // Should have both ltr and rtl styles
+    expect(output).toContain("_ltr_text_left");
+    expect(output).toContain("_rtl_text_right");
+
+    // Should have conditionals for both
+    expect(output).toMatch(/_twIsRTL\s*&&/);
+    expect(output).toMatch(/!\s*_twIsRTL\s*&&/);
+  });
+
+  it("should expand text-end to directional modifiers", () => {
+    const input = `
+      import { Text } from 'react-native';
+      export function Component() {
+        return <Text className="text-end" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have I18nManager import
+    expect(output).toContain("I18nManager");
+
+    // text-end expands to ltr:text-right rtl:text-left
+    expect(output).toContain("_ltr_text_right");
+    expect(output).toContain("_rtl_text_left");
+  });
+});

package/dist/babel/plugin/visitors/className.ts

@@ -8,6 +8,7 @@ import type { ParsedModifier, StateModifierType } from "../../../parser/index.js
 import {
   expandSchemeModifier,
   isColorSchemeModifier,
+  isDirectionalModifier,
   isPlatformModifier,
   isSchemeModifier,
   isStateModifier,
@@ -19,6 +20,7 @@ import { generateStyleKey } from "../../../utils/styleKey.js";
 import { getTargetStyleProp, isAttributeSupported } from "../../utils/attributeMatchers.js";
 import { processColorSchemeModifiers } from "../../utils/colorSchemeModifierProcessing.js";
 import { getComponentModifierSupport, getStatePropertyForModifier } from "../../utils/componentSupport.js";
+import { processDirectionalModifiers } from "../../utils/directionalModifierProcessing.js";
 import { processDynamicExpression } from "../../utils/dynamicProcessing.js";
 import { createStyleFunction, processStaticClassNameWithModifiers } from "../../utils/modifierProcessing.js";
 import { processPlatformModifiers } from "../../utils/platformModifierProcessing.js";
@@ -107,6 +109,7 @@ export function jsxAttributeVisitor(
     const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
     const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
     const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+    const directionalModifiers = modifierClasses.filter((m) => isDirectionalModifier(m.modifier));
     const stateModifiers = modifierClasses.filter(
       (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder",
     );
@@ -138,6 +141,7 @@ export function jsxAttributeVisitor(
     // Handle combination of modifiers
     const hasPlatformModifiers = platformModifiers.length > 0;
     const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+    const hasDirectionalModifiers = directionalModifiers.length > 0;
     const hasStateModifiers = stateModifiers.length > 0;
     const hasBaseClasses = baseClasses.length > 0;
 
@@ -160,14 +164,14 @@ export function jsxAttributeVisitor(
     }
 
     // If we have multiple modifier types, combine them in an array expression
-    // For state modifiers, wrap in arrow function; for color scheme, they're just conditionals
-    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
+    // For state modifiers, wrap in arrow function; for color scheme and directional, they're just conditionals
+    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers)) {
       // Get the JSX opening element for component support checking
       const jsxOpeningElement = path.parent;
       const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
 
       if (componentSupport) {
-        // Build style array: [baseStyle, Platform.select(...), colorSchemeConditionals, stateConditionals]
+        // Build style array: [baseStyle, Platform.select(...), colorSchemeConditionals, directionalConditionals, stateConditionals]
         const styleArrayElements: BabelTypes.Expression[] = [];
 
         // Add base classes
@@ -179,7 +183,7 @@ export function jsxAttributeVisitor(
           if (hasRuntimeDimensions(baseStyleObject)) {
             throw path.buildCodeFrameError(
               `w-screen and h-screen cannot be combined with modifiers. ` +
-                `Found: "${baseClassName}" with state, platform, or color scheme modifiers. ` +
+                `Found: "${baseClassName}" with state, platform, color scheme, or directional modifiers. ` +
                 `Use w-screen/h-screen without modifiers instead.`,
             );
           }
@@ -215,6 +219,18 @@ export function jsxAttributeVisitor(
           styleArrayElements.push(...colorSchemeConditionals);
         }
 
+        // Add directional modifiers as conditionals
+        if (hasDirectionalModifiers) {
+          const directionalConditionals = processDirectionalModifiers(
+            directionalModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t,
+          );
+          styleArrayElements.push(...directionalConditionals);
+        }
+
         // Add state modifiers as conditionals
         // Group by modifier type
         const modifiersByType = new Map<StateModifierType, ParsedModifier[]>();
@@ -267,9 +283,9 @@ export function jsxAttributeVisitor(
       }
     }
 
-    // Handle platform and/or color scheme modifiers (no state modifiers)
-    if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
-      // Build style array/expression: [baseStyle, Platform.select(...), colorSchemeConditionals]
+    // Handle platform, color scheme, and/or directional modifiers (no state modifiers)
+    if ((hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers) && !hasStateModifiers) {
+      // Build style array/expression: [baseStyle, Platform.select(...), colorSchemeConditionals, directionalConditionals]
       const styleExpressions: BabelTypes.Expression[] = [];
 
       // Add base classes
@@ -281,7 +297,7 @@ export function jsxAttributeVisitor(
         if (hasRuntimeDimensions(baseStyleObject)) {
           throw path.buildCodeFrameError(
             `w-screen and h-screen cannot be combined with modifiers. ` +
-              `Found: "${baseClassName}" with platform or color scheme modifiers. ` +
+              `Found: "${baseClassName}" with platform, color scheme, or directional modifiers. ` +
               `Use w-screen/h-screen without modifiers instead.`,
           );
         }
@@ -317,6 +333,18 @@ export function jsxAttributeVisitor(
         styleExpressions.push(...colorSchemeConditionals);
       }
 
+      // Add directional modifiers as conditionals
+      if (hasDirectionalModifiers) {
+        const directionalConditionals = processDirectionalModifiers(
+          directionalModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t,
+        );
+        styleExpressions.push(...directionalConditionals);
+      }
+
       // Generate style attribute
       const styleExpression =
         styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);

package/dist/babel/plugin/visitors/imports.ts

@@ -17,7 +17,7 @@ export function importDeclarationVisitor(
 ): void {
   const node = path.node;
 
-  // Track react-native StyleSheet and Platform imports
+  // Track react-native StyleSheet, Platform, and I18nManager imports
   if (node.source.value === "react-native") {
     const specifiers = node.specifiers;
 
@@ -35,6 +35,21 @@ export function importDeclarationVisitor(
       return false;
     });
 
+    // Check for I18nManager import (only value imports, not type-only)
+    if (node.importKind !== "type") {
+      for (const spec of specifiers) {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          if (spec.imported.name === "I18nManager") {
+            state.hasI18nManagerImport = true;
+            // Track the local identifier (handles aliased imports)
+            // e.g., import { I18nManager as RTL } → local name is 'RTL'
+            state.i18nManagerLocalIdentifier = spec.local.name;
+            break;
+          }
+        }
+      }
+    }
+
     // Check for useWindowDimensions import (only value imports, not type-only)
     if (node.importKind !== "type") {
       for (const spec of specifiers) {

package/dist/babel/plugin/visitors/program.ts

@@ -6,10 +6,12 @@ import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
 import {
   addColorSchemeImport,
+  addI18nManagerImport,
   addPlatformImport,
   addStyleSheetImport,
   addWindowDimensionsImport,
   injectColorSchemeHook,
+  injectI18nManagerVariable,
   injectStylesAtTop,
   injectWindowDimensionsHook,
 } from "../../utils/styleInjection.js";
@@ -39,8 +41,13 @@ export function programExit(
     removeTwImports(path, t);
   }
 
-  // If no classNames were found and no hooks needed, skip processing
-  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport) {
+  // If no classNames were found and no hooks/imports needed, skip processing
+  if (
+    !state.hasClassNames &&
+    !state.needsWindowDimensionsImport &&
+    !state.needsColorSchemeImport &&
+    !state.needsI18nManagerImport
+  ) {
     return;
   }
 
@@ -54,6 +61,16 @@ export function programExit(
     addPlatformImport(path, t);
   }
 
+  // Add I18nManager import if directional modifiers were used and not already present
+  if (state.needsI18nManagerImport && !state.hasI18nManagerImport) {
+    addI18nManagerImport(path, t);
+  }
+
+  // Inject I18nManager.isRTL variable at module level (not a hook, so no component scope needed)
+  if (state.needsI18nManagerImport) {
+    injectI18nManagerVariable(path, state.i18nManagerVariableName, state.i18nManagerLocalIdentifier, t);
+  }
+
   // Add color scheme hook import if color scheme modifiers were used and not already present
   if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
     addColorSchemeImport(path, state.colorSchemeImportSource, state.colorSchemeHookName, t);

package/dist/babel/plugin/visitors/tw.test.ts

@@ -618,3 +618,154 @@ describe("tw/twStyle - integration with className", () => {
     expect(output).toContain("_m_4_p_2");
   });
 });
+
+describe("tw visitor - directional modifiers (RTL/LTR)", () => {
+  it("should transform rtl: modifier in tw template", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`p-4 rtl:mr-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should import I18nManager
+    expect(output).toContain("I18nManager");
+
+    // Should declare _twIsRTL variable
+    expect(output).toContain("_twIsRTL");
+    expect(output).toContain("I18nManager.isRTL");
+
+    // Should have style array with conditional
+    expect(output).toContain("style:");
+    expect(output).toContain("_twStyles._p_4");
+    expect(output).toMatch(/_twIsRTL\s*&&\s*_twStyles\._rtl_mr_4/);
+
+    // Should have rtlStyle property
+    expect(output).toContain("rtlStyle:");
+    expect(output).toContain("_twStyles._rtl_mr_4");
+  });
+
+  it("should transform ltr: modifier with negated conditional", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`p-4 ltr:ml-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should import I18nManager
+    expect(output).toContain("I18nManager");
+
+    // Should have negated conditional for LTR (!_twIsRTL)
+    expect(output).toMatch(/!\s*_twIsRTL\s*&&\s*_twStyles\._ltr_ml_4/);
+
+    // Should have ltrStyle property
+    expect(output).toContain("ltrStyle:");
+  });
+
+  it("should combine rtl: and ltr: modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`rtl:mr-4 ltr:ml-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have both conditionals
+    expect(output).toMatch(/_twIsRTL\s*&&\s*_twStyles\._rtl_mr_4/);
+    expect(output).toMatch(/!\s*_twIsRTL\s*&&\s*_twStyles\._ltr_ml_4/);
+
+    // Should have both style properties
+    expect(output).toContain("rtlStyle:");
+    expect(output).toContain("ltrStyle:");
+  });
+
+  it("should combine directional modifiers with platform modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`p-4 ios:p-6 rtl:mr-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Should have I18nManager import
+    expect(output).toContain("I18nManager");
+
+    // Should have both modifiers in style array
+    expect(output).toContain("Platform.select");
+    expect(output).toMatch(/_twIsRTL\s*&&/);
+
+    // Should have iosStyle and rtlStyle properties
+    expect(output).toContain("iosStyle:");
+    expect(output).toContain("rtlStyle:");
+  });
+
+  it("should combine directional modifiers with state modifiers", () => {
+    const input = `
+      import { tw } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = tw\`bg-white active:bg-blue-500 rtl:pr-4\`;
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should have I18nManager import
+    expect(output).toContain("I18nManager");
+
+    // Should have directional conditional
+    expect(output).toMatch(/_twIsRTL\s*&&/);
+
+    // Should have activeStyle property
+    expect(output).toContain("activeStyle:");
+    expect(output).toContain("_twStyles._active_bg_blue_500");
+
+    // Should have rtlStyle property
+    expect(output).toContain("rtlStyle:");
+  });
+
+  it("should work with twStyle function for RTL modifiers", () => {
+    const input = `
+      import { twStyle } from '@mgcrea/react-native-tailwind';
+
+      function MyComponent() {
+        const styles = twStyle('p-4 rtl:mr-4 ltr:ml-4');
+        return null;
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should import I18nManager
+    expect(output).toContain("I18nManager");
+
+    // Should have both conditionals
+    expect(output).toMatch(/_twIsRTL\s*&&/);
+    expect(output).toMatch(/!\s*_twIsRTL\s*&&/);
+
+    // Should have both style properties
+    expect(output).toContain("rtlStyle:");
+    expect(output).toContain("ltrStyle:");
+  });
+});