Skip to content

rtl and ltr doesn't work on nativewind4 #959

@ws-rush

Description

@ws-rush

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

To Reproduce
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

Screenshots
middle text is always red, it doesnt respect direction
image

Additional context
there is no

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue-wipe-pre-v4If your issue persists in v4, open a new issue & reference this one in the description.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions