React-native: WebView ignores document lang / encoding

Created on 23 Jan 2018  ·  6Comments  ·  Source: facebook/react-native

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 9.3.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Steps to Reproduce

(Write your steps here:)

  1. Init a new project.
  2. Copy/Paste the code I provide.
  3. See - the characters are wrong.

Expected Behavior

Show the word in Hebrew:

שלום

Actual Behavior

Shows some bad characters.

image

Reproducible Demo

Link:
https://snack.expo.io/HkmOZ0VHG

If it's not a bug then how can I achieve this relatively simple task of setting the encoding to Hebrew? I've search all over the internet, as well as the docs and this very repo issue tracker :)

Thank you!

Ran Commands Stale
Source
picture elyran
👍1

Most helpful comment

try add baseUrl:''

  render() {
    const theText = decodeURIComponent("%D7%A9%D7%9C%D7%95%D7%9D")

  const htmlSrc = `
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8">
<title>The Title</title>
</head>

<body>
${theText}
</body>

</html>
    `

    // Case 1: No encoding set, just passing a string in Hebrew
    // return <WebView source={{ html: theText }} />

    // Case 2: Setting encoding in a fully fledged HTML5 document
    return <WebView source={{ html: htmlSrc, baseUrl:'' }} />
  }
picture 4external on 25 Jan 2018
🎉5

All 6 comments

try add baseUrl:''

  render() {
    const theText = decodeURIComponent("%D7%A9%D7%9C%D7%95%D7%9D")

  const htmlSrc = `
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8">
<title>The Title</title>
</head>

<body>
${theText}
</body>

</html>
    `

    // Case 1: No encoding set, just passing a string in Hebrew
    // return <WebView source={{ html: theText }} />

    // Case 2: Setting encoding in a fully fledged HTML5 document
    return <WebView source={{ html: htmlSrc, baseUrl:'' }} />
  }
4external picture 4external on 25 Jan 2018
🎉5

@4external man you made my day!!! Huge thanks for this hint!! It worked!

GrigoryPtashko picture GrigoryPtashko on 25 Jan 2018

Thanks @4external .
For others: Check out react-native-htmlview .

For the team: Isn't that a bug, though? Adding 'baseUrl' as an empty string sounds like a workaround..

elyran picture elyran on 28 Jan 2018
👍1

@elyran it looks like it might be a "bug" with Android?

See the source here.

The same mime type and encoding are passed to the native control, the only difference is that if the baseUrl is specified it calls loadDataWithBaseURL instead of loadData.

brendanmckenzie picture brendanmckenzie on 29 Jan 2018

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to Contribute • What to Expect from Maintainers

react-native-bot picture react-native-bot on 24 Feb 2018

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain salmanwaheed.info has exceeded the max emails per hour (177/150 (118%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from o6.sgmail.github.com ([192.254.113.101]:47823)
by box1177.bluehost.com with esmtps (TLSv1.2:ECDHE-RSA-AES128-GCM-SHA256:128)
(Exim 4.89_1)
(envelope-from )
id 1epQVk-003Jcd-U7
for [email protected]; Fri, 23 Feb 2018 20:28:33 -0700
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed/relaxed; d=github.com;
h=from:reply-to:to:cc:in-reply-to:references:subject:mime-version:content-type:content-transfer-encoding:list-id:list-archive:list-post:list-unsubscribe;
s=s20150108; bh=haPewJ8npgYvRmImxMPFkvQC++E=; b=pcn9+VXQ1h61WtY8
1Sgha3mrsh+7nLU3rCjUhL0JMF1aJCAL9+3cAsgUmud1g9DrRafb5vvsm69dczmj
dnB0hkjkoeS9E4Rs82ibgM4/MMYxSGKYid/M9bhQfvrvt2qJItwWPwGKp9WYbCs1
poBYPXrmEt1DW6/m7EvQ5hdsnc8=
Received: by filter0223p1iad2.sendgrid.net with SMTP id filter0223p1iad2-21069-5A90DBD6-1
2018-02-24 03:28:22.166790286 +0000 UTC
Received: from github-smtp2b-ext-cp1-prd.iad.github.net (github-smtp2b-ext-cp1-prd.iad.github.net [192.30.253.17])
by ismtpd0002p1iad1.sendgrid.net (SG) with ESMTP id r8-c51xqTLqVX-lcSNLWow
for hello@salmanwaheed.info; Sat, 24 Feb 2018 03:28:22.051 +0000 (UTC)
Date: Sat, 24 Feb 2018 03:28:22 +0000 (UTC)
From: React Native Bot notifications@github.com
Reply-To: facebook/react-native reply@reply.github.com
To: facebook/react-native react-native@noreply.github.com
Cc: Subscribed subscribed@noreply.github.com
Message-ID:
In-Reply-To:
References:
Subject: Re: [facebook/react-native] WebView ignores document lang / encoding
(#17717)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5a90daa451a30_28a13fde246eef28155013";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: react-native-bot
X-GitHub-Recipient: salmanwaheed
X-GitHub-Reason: subscribed
List-ID: facebook/react-native
List-Archive: https://github.com/facebook/react-native
List-Post: reply@reply.github.com
List-Unsubscribe: ,
https://github.com/notifications/unsubscribe/AO8bOAqeWETUU1xnTZCHf5LhYwHgYTuWks5tX4CkgaJpZM4Rpzw8
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]
X-SG-EID: 92ws1MVnlto3blxqXlf5goB0ee0kdDGWR6vcWx8d649xd0kWqihDpfYarJdioTTaWzo0gXgrG0HhFk
HAqOBye9zWI/6clKMwtkbp6a4/uflocRWBLpPCIFHB39RTNpo2JFzhB+VXwhZnr+5qPTTeK586A95u
IHeTUeClUDeJEcryYFaReec5egFKdHdx9NZizWdz9SbhnqXzVe/xltfzkVJc8LmwfwtDiTrosEWBv6
c=
X-Spam-Status: No, score=-1.3
X-Spam-Score: -12
X-Spam-Bar: -
X-Ham-Report: Spam detection software, running on the system "box1177.bluehost.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root\@localhost for details.

Content preview: Thanks for posting this! It looks like you may not be using
the latest version of React Native, v0.53.0, released on January 2018. Can
you make sure this issue can still be reproduced in the latest version? [...]

Content analysis details: (-1.3 points, 5.0 required)

pts rule name description

0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked.
See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block
for more information.
[URIs: github.com]
-0.5 RCVD_IN_MSPIKE_H2 RBL: Average reputation (+2)
[192.254.113.101 listed in wl.mailspike.net]
-0.5 SPF_PASS SPF: sender matches SPF record
-0.0 T_RP_MATCHES_RCVD Envelope sender domain matches handover relay
domain
0.0 HTML_IMAGE_ONLY_32 BODY: HTML: images with 2800-3200 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.2 AWL AWL: Adjusted score from AWL reputation of From: address
X-Spam-Flag: NO

----==_mimepart_5a90daa451a30_28a13fde246eef28155013
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: quoted-printable

Thanks for posting this! It looks like you may not be using the latest vers=
ion of React Native, v0.53.0, released on January 2018. Can you make sure t=
his issue can still be reproduced in the latest version?=20

I am going to close this, but please feel free to open a new issue if you a=
re able to confirm that this is still a problem in v0.53.0 or newer.

How to Contribute =E2=80=A2 What to Expect from Maintainers

--=20
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/facebook/react-native/issues/17717#issuecomment-368194981=

----==_mimepart_5a90daa451a30_28a13fde246eef28155013
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: quoted-printable

Thanks for posting this! It looks like you may not be using the latest v= ersion of React Native, v0.53.0, released on January 2018. Can you make sur= e this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if yo= u are able to confirm that this is still a problem in v0.53.0 or newer.

How to Contribute =E2=80=A2 What to Expect from Maintainers

&mda= sh;
You are receiving this because you are subscribed to this thread.<= br />Reply to this email directly, view it on GitHub, or = mute the thread.3D""


=

----==_mimepart_5a90daa451a30_28a13fde246eef28155013--

salmanwaheed picture salmanwaheed on 24 Feb 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

DreySkee picture DreySkee  ·  3Comments
upbit picture upbit  ·  3Comments
madwed picture madwed  ·  3Comments
ghost picture ghost  ·  3Comments
oney picture oney  ·  3Comments