React-native: Font issue on Android 4.x WebView

Created on 29 Dec 2017 · 11Comments · Source: facebook/react-native

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

Ran Commands Locked

Source

huynhtansi

👍2

Most helpful comment

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!

GrigoryPtashko on 25 Jan 2018

🎉12 👍12 ❤3

All 11 comments

I have the same issue :(

lvmtam on 29 Dec 2017

same issue

derakhshanfar on 2 Jan 2018

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

derakhshanfar on 2 Jan 2018

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

huynhtansi on 3 Jan 2018

👍1

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

adrianomelo on 3 Jan 2018

👍2

Same here.

GrigoryPtashko on 18 Jan 2018

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 on 24 Jan 2018

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!

GrigoryPtashko on 25 Jan 2018

🎉12 👍12 ❤3

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}