Render unicode characters in react native using variable

Question

I'm trying to render some Arabic text which is in the form of Unicode.

I have already tried to render this using Text component like

const arabic  = "&#1587;&#1615;&#1576;&#1618;&#1581;&#1614;&#1575;&#1606;&#1614; &#1575;&#1604;&#1604;&#1607;&#1616; &#1608;&#1614;&#1576;&#1616;&#1581;&#1614;&#1605;&#1618;&#1583;&#1616;&#1607;&#1616;"


render(){
 return(
  <Text>
   {arabic}
  </Text>
 )
}

it renders the Unicode as it is, but writing it this way

render(){
 return(
  <Text>

   &#1587;&#1615;&#1576;&#1618;&#1581;&#1614;&#1575;&#1606;&#1614;  
   #1575;&#1604;&#1604;&#1607;&#1616; 
 &#1608;&#1614;&#1576;&#1616;&#1581;&#1614;&#1605;&#1618;&#1583;&#1616; 
 &#1607;&#1616;

  </Text>
 )
}

renders the correct output

Tim · Accepted Answer · 2019-06-13 05:19:06Z

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 = "&#1587;";

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  = "&#1587;&#1615;&#1576;&#1618;&#1581;&#1614;&#1575;&#1606;&#1614; &#1575;&#1604;&#1604;&#1607;&#1616; &#1608;&#1614;&#1576;&#1616;&#1581;&#1614;&#1605;&#1618;&#1583;&#1616;&#1607;&#1616;"

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

Hassan Raza · Accepted Answer · 2019-06-12 19:17:55Z

Solution provided by Tim was correct but in my case, there was a collection of Unicode characters provided by some service

&#1587;&#1615;&#1576;&#1618;&#1581;&#1614;&#1575;&#1606;&#1614;  
   #1575;&#1604;&#1604;&#1607;&#1616; 
 &#1608;&#1614;&#1576;&#1616;&#1581;&#1614;&#1605;&#1618;&#1583;&#1616; 
 &#1607;&#1616;

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  = "&#1587;&#1615;&#1576;&#1618;&#1581;&#1614;&#1575;&#1606;&#1614; &#1575;&#1604;&#1604;&#1607;&#1616; &#1608;&#1614;&#1576;&#1616;&#1581;&#1614;&#1605;&#1618;&#1583;&#1616;&#1607;&#1616;"

  return(

     <HTMLView
      value={"<div>" +arabic+ "</div>"}
      />

  )

 }

}

which renders the desired out put

slolkunchik · Accepted Answer · 2020-10-30 19:11:36Z

2

you also can just copy the symbol and past in your code - it will work:

 <Text>• one upper case</Text>
 <Text>✔ one lower case</Text>

answered Oct 30, 2020 at 19:11

slolkunchik

1092 silver badges3 bronze badges

Collectives™ on Stack Overflow

Render unicode characters in react native using variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related