`rtl` and `ltr` doesn't work on nativewind4 on native platforms

Author: ws-rushCreated Mar 10, 2025Updated Jul 8, 2026

Labelsneeds reproductionneeds investigationdeferred (post-5.0)

Describe the bug when use ltr: or rtl: in nativewind it should not apply calss unless direction as in prefix, but nativewind run classes without care about them, it apply the last class always as prefix direction is not exist at all

Reproduction https://github.com/ws-rush/reactive-expo

above project contain example in src/app/components/EditScreenInfo.tsx: <Text className="ltr:text-green-500 rtl:text-red-500">{description}</Text>, i tried it also as <Text className="text-green-500 rtl:text-red-500">{description}</Text> and other cominations
the code change direction in src/app/globals/i18n.ts:

  async set(value: string) {
    // load and activate locale
    const { messages, direction } = this.localesData[value];
    i18n.load(value, messages);
    i18n.activate(value);

    // reload app
    if (direction === 'rtl') {
      await I18nManager.allowRTL(true);
      await I18nManager.forceRTL(true);
    } else {
      await I18nManager.allowRTL(false);
      await I18nManager.forceRTL(false);
    }

    if ((await locale.loadLocale()) !== value) {
      // set app default lang done from app settings
      await AsyncStorage.setItem('locale', value);

      if (Platform.OS === 'ios' || Platform.OS === 'android') reloadAsync();
      else if (Platform.OS === 'web') window.location.reload();
    }
  },

finally the app should run in dvelopment build not expo go to get direction changed correctly (get I18nManager.isRTL correct value)

Expected behavior it should apply classes with direction prefix only if application run in this direction

Additional context actually original issue is https://github.com/nativewind/nativewind/issues/959 from nativewind 4.0, but problems still exist. I solved this proble currently by add this to my project

javascript

import { I18nManager, Platform } from "react-native";

export function tw(strings: TemplateStringsArray, ...values: any[]) {
    // Combine the string literals and the values into a single string
    let combinedString = strings.reduce((result, string, i) => {
      return result + string + (values[i] || '');
    }, '');
  
    // Split the combined string into an array of classes
    let classes = combinedString.split(' ');
  
    // Filter out classes that start with "rtl:"
    let filteredClasses = classes.filter(cls => {
      if (Platform.OS !== 'web') return !cls.startsWith(I18nManager.isRTL ? 'ltr:' : 'rtl:')
      else return true
    });
  
    // Join the filtered classes back into a single string
    return filteredClasses.join(' ');
}

then apply it as <Text className={twltr:text-green-500 rtl:text-red-500}>{solved ${description}}</Text>

Source: nativewind/nativewind

View original on GitHub View discussion on GitHub