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

Font issue on Android 4.x WebView #17385

Closed
huynhtansi opened this issue Dec 29, 2017 · 11 comments
Closed

Font issue on Android 4.x WebView #17385

huynhtansi opened this issue Dec 29, 2017 · 11 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@huynhtansi
Copy link

Is this a bug report?

Yes. It appears when this commit is merged. On RN 0.50.0 above, Android 4.x WebView cannot display text/html format.

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.9.1
Yarn: Not Found
npm: 5.5.1
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

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

Target Platform: Android 4.1.2 (API 16)

Steps to Reproduce

Render this component:

`export default class TestWebView extends Component<{}> {

render() {
    const html = "<html>\n <body>" +
    "※Facebook，並びにGoogle＋へ許可なく投稿がされることはありません。" +
    "</body>\n</html>";

    return (
        <WebView
			style={{flex:1}}
			source={{html}}/>
    );
}

}`

Expected Behavior

expect_behavior

Actual Behavior

actual_behavior

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)
@lvmtam
Copy link

lvmtam commented Dec 29, 2017

I have the same issue :(

adrianomelo pushed a commit to adrianomelo/react-native that referenced this issue Dec 30, 2017
Android WebView Bugfix: loadUrl() ignores default encoding
54e1c4e 
Closes facebook#17385

The loadUrl() method ignores the default encoding on Android KitKat.
@adrianomelo adrianomelo mentioned this issue Dec 30, 2017
Closed
@derakhshanfar
Copy link

same issue

@derakhshanfar
Copy link

derakhshanfar commented Jan 2, 2018 •
edited
Loading

@adrianomelo thanks but how can i upgrade react-native that refer to specific commit or tag when it is not release on NPM?

@huynhtansi
Copy link
Author

@adrianomelo same question with @derakhshanfar. Should we create a PR to react-native repo? BTW, I will clone your repo to check again.

@adrianomelo
Copy link
Contributor

@derakhshanfar, I can see two options if you need the fix for this problem asap. The first choice is using an older React Native version while the fix is not published. I guess that 0.49 is working fine. The second option is using a fork of React Native with my commit. You can use my branch if you don't want to fork RN. In this case, you can follow this tutorial on how to use RN built from the source replacing:

npm install --save github:facebook/react-native#master
with:
npm install --save github:adrianomelo/react-native#loadurl

I don't recommend the second approach unless you are an experienced developer. This process usually takes a lot of time. Maintaining a fork is not fun. :)

@huynhtansi, I already submitted a pull request with a fix for it. However, if you can test, it would be awesome. You can comment on the PR and it might speed up the process of merging it to upstream.

@GrigoryPtashko
Copy link

Same here.

@GrigoryPtashko
Copy link

This is really bad. I've almost finished my app before submission to the Google Play and stumbed upon this issue. Is there a workaround for this?

@GrigoryPtashko
Copy link

Guys! Here's the solution that worked for me. On Platform.OS === 'android' add baseUrl: '' to source property of the WebView. UTF-8 displays correctly then!

@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
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 24, 2018
@huynhtansi
Copy link
Author

huynhtansi commented Feb 27, 2018 •
edited
Loading

Hi @GrigoryPtashko , how to resolve in case I load a string html in source property? btw, it's still a problem in v0.53.0 and newer.

Update: Got it, it should be 'source={{html, 'baseUrl': 'about:blank'}}'

@GrigoryPtashko
Copy link

@huynhtansi see my comment above. baseUrl must be ''.

@facebook facebook locked as resolved and limited conversation to collaborators Feb 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 24, 2019
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. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Android WebView Bugfix: loadUrl() ignores default encoding adrianomelo/react-native
6 participants
@adrianomelo @GrigoryPtashko @lvmtam @huynhtansi @derakhshanfar @react-native-bot