Render unicode characters in react native using variable
If you want to store unicode characters / html entities in a variable, you need to replace the html entity with the unicode number.
For example:
const arabic = "س";
needs to be replaced with:
const arabic = "\u0633";
The are several unicode tables online where you can translate your html entity to the raw unicode number.
Working example:
https://snack.expo.io/BJp-jL004
UPDATE with second approach:
Instead of a manual translation of the html entities to unicode numbers, you can use the npm module html-entities. Here the biggest advantage is, that you can use the regular <Text>
Component to render your characters.
Here is an example:
import { Html5Entities } from 'html-entities';
const arabic = "سُبْحَانَ اللهِ وَبِحَمْدِهِ"
render() {
const entities = new Html5Entities();
return (
<SafeAreaView style={styles.container}>
<View>
<Text> {entities.decode(arabic)} </Text>
</View>
</SafeAreaView>
);
}
Output:
Working example:
https://snack.expo.io/Hk5b3IykS
Solution provided by Tim was correct but in my case, there was a collection of Unicode characters provided by some service
سُبْحَانَ
#1575;للهِ
وَبِحَمْدِ
هِ
so it was a hectic process to convert individual unicode character and then render it . there is simple workaorund for this, react-native-htmlview
import HTMLView from 'react-native-htmlview';
export default class Myclass extends Componet{
render(){
const arabic = "سُبْحَانَ اللهِ وَبِحَمْدِهِ"
return(
<HTMLView
value={"<div>" +arabic+ "</div>"}
/>
)
}
}
which renders the desired out put