React Native WebView Android: arabic text showing up as weird character - android-webview

Question

I'm using React Native WebView to show html content from a file. I tested using iOS Simulator, it's working fine. But somehow when I test it on Android Emulator, the arabic text is not showing properly, instead of weird characters like: ä, ö, ü are appearing.
This is my code:
render() {
const { content } = this.state
return (
<View style={style.container}>
...
<WebView
source={{ html: content }}
onMessage={(event) => this.playAudio.call(this, event.nativeEvent.data)}
/>
</View>
)
}
componentDidMount() {
const { state } = this.props.navigation
RNFS.readFileAssets(`content/${state.params.item.id}`, 'utf8')
.then((content) => {
console.log('content', content)
this.setState({ ...this.state, content })
})
.catch((err) => {
console.log('error', err.message, err.code)
})
}
My package.json:
{
"name": "doadzikirandroid",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-admob": "^2.0.0-beta.4",
"react-native-fs": "^2.9.6",
"react-native-gesture-handler": "^1.0.0-alpha.35",
"react-native-search-box": "^0.0.13",
"react-native-sound": "^0.10.4",
"react-native-tab-view": "^0.0.73",
"react-native-vector-icons": "^4.4.3",
"react-navigation": "^1.0.0-beta.22"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
Output:
Browser console log:
How should I do to fix this? Thanks in advance.

Answer 1

Here's the solution that worked for me. Add baseUrl: '' to source property of the WebView. UTF-8 displays correctly then!
<WebView
source={{baseUrl: '', html: "Your HTML content here"}}
style={}
bounces={true}
/>

Answer 2

source={{baseUrl: '', html: "..."}}
fixed it for me