react native webview right to left language components shown with mirror writing ios 17

Question

react native webview right to left language components shown with mirror writing ios 17

43 Views Asked by Riv At 29 February 2024 at 14:26

I have an application in react native that includes a web-view, the content of the web view is in Hebrew (a right-to-left language), on iOS 17 I get a strange result, And all the lists were shown as mirror writing, also open file input dialog box in mirror writing, and when long press input I also get mirror writing. Any help? Screenshots attached input text mirror writing, input file mirror writing, select mirror writing

react native code:

 <WebView ref={webViewRef} source={{ html: `<!DOCTYPE html>
<html dir="rtl" lang="he">
<head>
<meta charset="utf-8">
</head>
<body>

<h1>דף נסיון</h1>

<p>דוגמא לקומבו</p>
<form action="/action_page.php">
  <label for=”cars">בחר צבע</label>
  <select name="cars" id="cars">
    <option value="volvo">ירוק</option>
    <option value="saab">כחול</option>
    <option value="opel">אדום</option>
    <option value="audi">צהוב</option>
  </select>
  <br><br>

<label for=”myfile">דוגמא לקובץ</label>
<br><br>
<input type="file" id="myfile" name=“myfile">
<br><br>

<label for=”text1">דוגמא לטקסט</label>
<br><br>
<input type="text" id="text1" name="text1" placeholder="נסיון">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>` }} onError={onWebViewError} onLoadStart={onWebViewLoadStart} onLoadEnd={onWebViewLoadEnd}
                onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} originWhitelist={['http://*', 'https://*', 'intent://*', 'tel:*', 'WebBrowser:*', 'webbrowser:*']}
                onNavigationStateChange={(navState) => { setCanGoBack(navState.canGoBack) }} sharedCookiesEnabled={true} 
                mediaPlaybackRequiresUserAction={false} javaScriptEnabled={true} nativeConfig={{props: {webContentsDebuggingEnabled: true}}}/>

It does not reproduce on other versions of iOS.

Original Q&A

There are 1 best solutions below

**Aqeel Ahmad** · Answer 1 · 2024-03-01T05:18:55.663000

To render HTLM & seamlessly change the content LTR and RTL in react native use can use combination of react-native-render-html and react-native-webview

1.install both packages;

yarn add react-native-render-html react-native-webview

2.render html in webview

import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';

<RenderHTML
   renderers={{iframe: IframeRenderer}}
   WebView={WebView}
   renderersProps={{autoplay: true}}
   customHTMLElementModels={{
   iframe: iframeModel,
    }}
   source={{
   html: `<iframe width=${wp('85%')} height='250' src=${source)} 
   </iframe>`}}
   contentWidth={wp('100%')}
   tagsStyles={{
   body: {
   textAlign: language === 'Arabic' ? 'left' : '',
    },
   }}
 />

3.explanation

tagsStyles={{
   body: {
    : language === 'Arabic' ? 'left' : '',
    },
  }}

tagsStyle painless switch the content based on your language. As I'm using Arabic and English. when arabic language is selected content automatically change to RLT and vice versa.

react native webview right to left language components shown with mirror writing ios 17

There are 1 best solutions below

Related Questions in REACT-NATIVE

Related Questions in WEBVIEW

Related Questions in LOCALIZATION

Related Questions in IOS17

Trending Questions

Popular # Hahtags

Popular Questions