1

As you can see below in the screenshot, the DOT starting the paragraph instead of ending it when aligning the text to right and do have the RTL ability in the code.

I'm using react-native-render-html Lib and tried too much options to make it fully Right to Left inside the <HTML code ... but with no success.

The Text aligned correctly Right to Left but not the Paragraph.

Also in the first line, it should began with the English words then the Hebrew ones.

Code example:

import HTML from 'react-native-render-html';


<HTML 
  html={ item.post_description } 
  tagsStyles={tagsStyles}
  containerStyle={{ alignSelf: isRTL ? 'flex-end' : 'flex-start', alignItems: isRTL ? 'flex-end' : 'flex-start'}}
  classesStyles={classesStyles}
  imagesMaxWidth={Dimensions.get('window').width * .9 } 
  staticContentMaxWidth={Dimensions.get('window').width * .9 }
  onLinkPress={(event, url) =>  Linking.openURL(url)} />



const tagsStyles = {
  p: {
    textAlign: 'center',
    marginBottom: 10,
    textAlign: 'right',
    fontSize: 18,
    dir: 'rtl',
  },
  img: {
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 20
  }
}

const classesStyles = {

}

Platform: iOS (ReactNative) in both simulator and real Device.

"react-native-render-html": "^6.1.0"

Data for testing:

    <p>High Intensity Interval Training - או בעברית: אימון הפוגות בעצימות גבוהה. משתייך לקבוצת האימונים הפונקציונליים, בדגש על שיפור מרכיב הסבולת. שיטת אימונים זו תופסת תאוצה בישראל ובעולם ויש לכך סיבה בהחלט טובה: שיטה זו מאפשרת להשיג תוצאות יוצאות דופן גם בהיבט הוויזואלי, עיצוב הגוף, וגם בהיבט הכושר הגופני על מרבית מרכיביו, בעיקרם סבולת שרירית וסבולת לב ריאה, מהירות, קואורדינציה ושיווי משקל. תוצאות שניכרות במהירות למתמידים בשיטה זו. מאוד זמין ונגיש לביצוע לאור העובדה שניתן ליישם גם ללא ציוד מיוחד.</p>

enter image description here

Rabia Abu Hanna
  • 51
  • 5
  • Thanks for your question! We need more information to help you out: (1) Can you specify on which Platform this is happening? Android is known to have issues with LTR / RTL mixed text ; (2) We need the version of RNRH and React Native; (3) we also need the HTML snippet you are rendering. On point 3, see also https://stackoverflow.com/help/minimal-reproducible-example – Jules Sam. Randolph Sep 02 '21 at 11:09
  • Finally, I suggest you add syntax coloration for JS in your snippet, that will help the readability of your code! – Jules Sam. Randolph Sep 02 '21 at 11:10

1 Answers1

0

Solution could be found here: https://stackoverflow.com/a/68284174/19460851 It worked for me! I used a function instead of a hook:

const rtlMarkerChar = '‏'; 
const ltrMarkerChar = '‎';

export function getUnicodeDirectionForce() {
  return I18nManager.isRTL ? rtlMarkerChar : ltrMarkerChar;
}

...and just called it whenever I needed.


<Text style={styles.noteText}>
  {getUnicodeDirectionForce() + t('no_guarantee')}
</Text>
Ben
  • 21
  • 4