meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

RTL is not working on p or div tag #653

Open Mohul44 opened 8 months ago

Mohul44 commented 8 months ago

Decision Table

Good Faith Declaration

Description

the rtl tags are not working in following code

const source = {
    html: `
    <p dir="rtl">This is a paragraph of text in RTL.</p>
<p style="direction: rtl;">This is a paragraph of text in RTL.</p>

    <p>Alexa ما هو الطقس ليوم غ! (default dir!)</p>
<p dir="ltr">Alexa ما هو الطقس ليوم غد! (ltr dir!)</p>
<p dir="rtl">Alexa ما هو الطقس ليوم غد! (rtl dir!)</p>
<p style="direction: rtl;">Alexa ما هو الطقس ليوم غد! <span dir='ltr'>(rtl with inline ltr span!)</span></p>
<hr />
<p>ما هو الطقس ليوم غ! Hello World كيف حالك (default dir!)</p>
<p dir='auto'>ما هو الطقس ليوم غ! Hello World كيف حالك (auto dir!)</p>
<p dir='ltr'>ما هو الطقس ليوم غ! Hello World كيف حالك (ltr dir!)</p>
<p dir='rtl'>ما هو الطقس ليوم غ! Hello World كيف حالك (rtl dri!)</p>
<p dir='rtl'>ما هو الطقس ليوم غ! Hello World كيف حالك <span dir='ltr'>(rtl with inline ltr span!)</span></p>`
  };

i have set

<RenderHtml source={source} renderersProps={{ p: { enableExperimentalRtl: true }, }} />

React Native Information

https://snack.expo.dev/QR9QKiweTqnT7LmQzJFtW

RNRH Version

"react-native-render-html": "^6.3.4",

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

https://snack.expo.dev/QR9QKiweTqnT7LmQzJFtW

Additional Notes

No response

fkazemi5236 commented 7 months ago

you should to set RTL into your RN app

https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps and after that you can use RTL in this package