nativewind
`rtl` and `ltr` doesn't work on nativewind4 on native platforms
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.isRTLcorrect 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
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>
@danstepanov this is still happening in newer version using v4.1.21
my icon gets rotate 180, in LTR as well
<Pressable onPress={handleBackPress}>
<View className="rtl:rotate-180">
<assets.icons.back height={24} width={24} />
</View>
</Pressable>
@ws-rush i also added your code snippet but it does not fix the issue,
one more thing do we always need to reload the app after switching to LTR or RTL
Hello Nativewind team, any update regarding this issue. we are still having this in 4.1. @danstepanov
@ws-rush i also added your code snippet but it does not fix the issue,
one more thing do we always need to reload the app after switching to LTR or RTL
It work for me but not in expo go
Hi, @danstepanov, it is big issue for rtl users, I wish we can help to fix it, is there a way to help. I am not expert but I wish to help
I'll be taking a look at this and other issues on Monday as the new website launch was delayed to today.
@danstepanov any update on this? Starting a new app and trying to decide if I should work around this or if there will be a fix released in the near future.
