React Native set Text direction to RTL (non-automatic) - react-native

Question

I have some Text element with dynamically loaded text. It's an RTL language (Hebrew) text mixed with some English.
When the first char is English, it automatically sets to LTR direction.
When the first char is Hebrew, it automatically sets to RTL direction.
I'm not happy with that behavoir!
I'd like to set the element to be RTL anyway. Always.
In CSS that would be very simple:
text-align: right; direction: rtl;
How can I achieve the same in React Native?

Answer 1

When I had this problem (of individual lines of text in RTL language being incorrectly treated as LTR becuase they start with non-transliterated LTR text or numbers), I dealt with it using Unicode direction marker characters.
Here they are (they're the invisible characters between the quotes):
'‏' to force text to be treated as RTL
'‎' to force text to be treated as LTR
These change the behaviour you're seeing, explicitly saying how the text should be treated rather than letting the system assume.
How you apply these is up to you. I mostly did it with regex find-replace insertions in the source content, but you could do something like this (untested), making a swap-in replacement for useTranslation's t function that wraps the text in the appropriate Unicode control character:
import { I18nManager } from 'react-native'
// assuming you're using i18n hooks
import { useTranslation } from 'react-i18next'
const rtlMarkerChar = '‏'
const ltrMarkerChar = '‎'
const directionChar = I18nManager.isRTL ? rtlMarkerChar : ltrMarkerChar
// Use instead of `useTranslation` to force text right on RTL and left on LTR
// regardless of the initial character of the particular snippet of text
export const useLocaleAlignedText = () => {
const { t } = useTranslation()
return (key) => `${directionChar}${t(key)}`
}
// For example, this should be consistently RTL or LTR regardless of content
const SomeComponent = ({ contentKey }) => {
const t = useLocaleAlignedText()
return <Text>{t(contentKey)}</Text>
}
Be warned that the above might not work where your content contains newline characters, you might need to inject the control characters at the start of each line. This was one of the reasons I chose to inject the characters into the source material; but be warned also, that's hard work and easy to make mistakes.

Answer 2

To handle RTL for Text, Use style alignSelf: 'flex-start'
Example react-native:
<View>
<Text style={styles.headersText}>{headerTitle}</Text>
</View>
StyleSheet.create({ headersText: {
alignSelf: 'flex-start', // <- Here Handle RTL for Text
paddingHorizontal: 16,
paddingTop: 14,
color: 'black',
fontSize: 13,
},
});

Answer 3

I did this with :
textAlign:'right'
your Text should have this style.

Answer 4

This worked for me:
<Text style={{alignSelf: "flex-start"}}>
{text}
</Text>
BTW, if you wanna force RTL for the entire project you could just write something like this and run it in your main App component:
import { I18nManager } from "react-native";
const App = () => {
. . . . . . . .
const rtl = () => {
if (I18nManager.isRTL === false) {
I18nManager.allowRTL(true);
I18nManager.forceRTL(true);
}
};
. . . . . . . .
}