jaredh159 / tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native
2.08k stars 84 forks source link

RTL Support #316

Closed Ali-Aref closed 3 months ago

Ali-Aref commented 3 months ago

First of all, this is an awesome library! ❤️

I am building a full component library based on this library, I need RTL support. Is RTL Support Available ? I couldn't find anything about that in docs (Readme file).

currently I am doing something like this in my tailwind.config.ts

// if this helps
import { I18nManager } from "react-native";

const isRTL = I18nManager.isRTL

// other configs
plugins: [
    plugin(({ addUtilities }: any) => {
        addUtilities({
            ".text": "text-gray-900 dark:text-gray-100",
            ".placeholder-text": "text-gray-500 dark:text-gray-500",
            ".view": "bg-slate-100 dark:bg-slate-900",
            ".card": "bg-white dark:bg-slate-800",
            ".header": "bg-slate-50 dark:bg-slate-800",
            ".header-text": "",
            ".input": "px-2 rounded-md border-2 border-gray-200 dark:border-slate-500",
            ".vstack": "flex flex-col flex-1",
            ".hstack": "flex flex-row flex-1",
        });
    }),
],

when I use the stylesheet when I use

I18Manager.isRTL = true
I18Manager.allowRTL(true)

They values such as paddingLeft: 5 it becomes paddingRight: 5. but the pl-2 or pr-2 doesn't become RTL.

however ml-2 becomes mr-2 and works perfectly fine

Ali-Aref commented 3 months ago

my bad, I solved that was releted to twrnc :)