Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebView ignores document lang / encoding #17717

Closed
elyran opened this issue Jan 23, 2018 · 6 comments
Closed

WebView ignores document lang / encoding #17717

elyran opened this issue Jan 23, 2018 · 6 comments
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@elyran
Copy link

elyran commented Jan 23, 2018

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!
@4external
Copy link

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:'' }} />
  }

@GrigoryPtashko
Copy link

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

@elyran
Copy link
Author

elyran commented Jan 28, 2018 •
edited
Loading

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..

@brendanmckenzie
Copy link

brendanmckenzie commented Jan 29, 2018 •
edited
Loading

@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.

@react-native-bot
Copy link
Collaborator

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 react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@salmanwaheed
Copy link

salmanwaheed commented Feb 24, 2018 via email

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@brendanmckenzie @elyran @GrigoryPtashko @salmanwaheed @react-native-bot @4external