Text direction

The React SDK handles left-to-right (LTR) and right-to-left (RTL) text independently for its interface and Scripture. For example, you can display an English Bible in an Arabic interface, or an Arabic Bible in an English interface.

Automatic direction

You usually don't need to set direction props:

• Interface direction controls SDK buttons, pickers, dialogs, and navigation icons. It follows the YouVersionProvider locale, or the browser's detected UI language when you omit locale. Currently, only Arabic (ar, including tags such as ar-EG) automatically uses RTL; other locales use LTR unless you set direction="rtl".
• Scripture direction controls Bible text, references, and footnote content. It uses the direction declared in the passage HTML. If the passage has no shared, explicit direction, the browser determines direction from the text with dir="auto".

Choosing a Bible version or changing the version picker's language doesn't change the interface direction. The locale prop doesn't select a Bible translation.

Set the interface language and direction

Most apps don't need to manage the SDK's language or direction. If your app manages its own language, pass that language to YouVersionProvider through locale.

This example displays Arabic controls with the English Berean Standard Bible (version 3034). The interface flows right to left, while the Scripture flows left to right. Replace YOUR_APP_KEY with your app key.

Code
import { BibleCard, YouVersionProvider } from "@youversion/platform-react-ui";

export default function App() {
  return (
    <YouVersionProvider appKey="YOUR_APP_KEY" locale="ar">
      <BibleCard reference="JHN.3.16" versionId={3034} showVersionPicker />
    </YouVersionProvider>
  );
}

If your interface needs a direction that differs from the locale's default, set direction="ltr" or direction="rtl" on the provider. For example, locale="ar" direction="ltr" keeps Arabic UI labels but lays out SDK controls from left to right. The explicit direction takes precedence over locale detection and doesn't change Scripture direction.

The provider configures SDK components, including their popovers and dialogs. Set direction separately for your own app elements or custom UI that you render through callbacks.

Override Scripture direction

You can set scriptureDirection on BibleCard, BibleTextView, BibleReader.Root, and VerseOfTheDay.

If the passage's automatic direction doesn't meet your needs, set scriptureDirection="ltr" or scriptureDirection="rtl" on the Scripture component. For example, to explicitly keep the English passage in the previous example left to right, replace its BibleCard with:

Code
<BibleCard
  reference="JHN.3.16"
  versionId={3034}
  showVersionPicker
  scriptureDirection="ltr"
/>

The override takes precedence over passage HTML direction. It doesn't change the Bible translation or interface direction. Omit scriptureDirection to restore automatic behavior; "auto" isn't an accepted prop value.