Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Font issue on Android 4.x WebView

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:11 (1 by maintainers)

Top GitHub Comments

27reactions

GrigoryPtashkocommented, Jan 25, 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!

2reactions

adrianomelocommented, Jan 3, 2018

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