i18n.md

i18n 🗺

We use I18nManager to handler correct direction

!!! ⚠️ React Native include special mechanism to revert 'left' to 'right' value I18nManager.swapLeftAndRightInRTL(true) ⚠️ !!!

• i18n({ ltr, ltr })
• rtl(value)
• ltr(value)

It means that don't need to use this apis above for setting next values:

• Position:
  • (left|right) → (start|end)
• Margin:
  • margin(Left|Right) → margin(Start|End)
• Padding:
  • padding(Left|Right) → padding(Start|End)
• Border:
  • borderTop(Left|Right)Radius → borderTop(Start|End)Radius
  • borderBottom(Left|Right)Radius → borderBottom(Start|End)Radius
  • border(Left|Right)Width → border(Start|End)Width
  • border(Left|Right)Color → border(Start|End)Color

import { i18n } from "react-native-stylex/i18n";

// ✅ Good https://reactnative.dev/blog/2017/11/06/react-native-monthly-5#facebook
good: {
   start: 20,
}

// ❌ Bad
bad: {
   ...i18n({ ltr: { left: 20 }, rtl: { right: 20 } }),
}

Example:

import { makeUseStyles } from "react-native-stylex";
import { i18n, rtl, ltr } from "react-native-stylex/i18n";

export const useStyles = makeUseStyles(() => ({
  root: {
    // you can pass styles
    ...i18n({ ltr: { left: 20 }, rtl: { right: 20 } }),

    // or string value for property
    textAlign: i18n({ ltr: "left", rtl: "right" }),
  },
  cell: {
    // styles variant
    ...ltr({ left: 0 }),
    // specific value variant
    alignItems: ltr("flex-start"),
  },

  row: {
    // styles variant
    ...rtl({ right: 0 }),
    // specific value variant
    alignItems: rtl("flex-end"),
  },
}));