CODEWITHSUNDEEP
androidreact-nativereact-navigationi18nextreact-i18next
Gray
Gray

Reputation: 578

how to change layout direction in react native?

I'm using i18next and react-i18library to change language in my react native app, but i need to change direction from ltr to rtl and vice-versa irrespective of device language and save the direction.

I have configured i18n and i'm changing the language but i have no idea how i can change direction

changeLanguage = lnName => {
  i18n.changeLanguage(lnName);
  // change direrction persian -> rtl / english -> ltr
};

"i18next": "^19.4.2",
"native-base": "^2.13.12",
"react": "16.11.0",
"react-i18next": "^11.3.4",
"react-native": "0.62.2",
"react-native-restart": "^0.0.14",

Upvotes: 2

Views: 2182

Answers (1)

felixmosh
felixmosh

Reputation: 35553

I18next has a dir method that given lang will return lrt / rtl value.

import React from 'react';
import { useTranslation } from 'react-i18next';

const Layout = () => {
  const {
    i18n: { dir, language },
  } = useTranslation();
  const changeLanguage = lnName => {
    i18n.changeLanguage(lnName);
  };

  return <View style={{ direction: dir(language) }} />;
};

Upvotes: 2

Related Questions