CODEWITHSUNDEEP
androidreactjsreact-nativeaxios
Mohammed Alawneh
Mohammed Alawneh

Reputation: 306

Arabic text not rendered correctly (rendered as rubbish)

I am working on a react-native app and I have a problem when rendering some Arabic text that returned from API most of the times the text looks like rubbish (check screenshot 1)

And for a few times, it rendered correctly (check screenshot 2)

screenshot 1 screenshot 1

screenshot 2 screenshot 2

I checked the API response and it always returns the text correctly.

FYI I am using axios to fetch the data.

EDIT

Here is my axios code : 

const headers = {
  "Content-Type": "application/json",
  Accept: "application/json"
};

const requestBody = {
  msgUID: getMsgUID(),
  uid: this.props.user.uid
};

axios
  .post(Config.FETCH_VISITS_URL, requestBody, { headers: headers })
  .then(response => response.data)
  .then(response => {
    console.log(JSON.stringify(response));

    this.setState({
      loading: false,
      arrayOfVisits: response.visits
    });
  })
  .catch(error => {
    console.log(
      "Error getting documnets",
      error + " msgUID " + requestBody.msgUID
    );
  });

EDIT 2

Here is the API response:

{
    "msgUID": "654894984984",
    "responseTime": 1567253177771,
    "size": 4,
    "visits": [{
            "visitExitTimestamp": "",
            "changeHistory": [],
            "entryType": {
                "vehicleDetails": {},
                "by": ""
            },
            "createdBy": "fz085jMMedPApY0tp9L1e7iqyfO2",
            "visitEntryTimestamp": "",
            "visitStatus": "new",
            "visitTypeObject": {
                "lastName": "السيد",
                "durationAmount": "30",
                "firstName": "علي",
                "phoneNumber": "(123) 456 - 7890",
                "notes": "Test",
                "durationType": "days",
                "type": "person"
            },
            "timestampFrom": "2019-08-28T16:56:00.000Z",
            "isDeleted": false,
            "key": "oTAJ8WbVh54tVaemVoz6",
            "createTime": "2019-08-27T16:56:45.286Z",
            "checkInTime": "",
            "checkOutTime": ""
        },
        {
            "visitExitTimestamp": "",
            "changeHistory": [],
            "entryType": {
                "vehicleDetails": {},
                "by": ""
            },
            "createdBy": "fz085jMMedPApY0tp9L1e7iqyfO2",
            "visitEntryTimestamp": "",
            "visitStatus": "new",
            "visitTypeObject": {
                "lastName": "",
                "durationAmount": "30",
                "firstName": "محمد",
                "phoneNumber": "(123) 456 - 7890",
                "notes": "Test",
                "durationType": "days",
                "type": "person"
            },
            "timestampFrom": "2019-08-28T16:46:00.000Z",
            "isDeleted": false,
            "key": "oTAJ8WbVh54tVaemVoz6",
            "createTime": "2019-08-27T16:46:45.286Z",
            "checkInTime": "",
            "checkOutTime": ""
        }
    ],
    "status": 200,
    "statusString": "OK"
}

below you can find the render method that I am using:

renderVisitorName(firstName,lastName) {
      return (
        <Text style={styles.name}>
          {firstName + " " + lastName}
        </Text>
      );
}

I am only testing this on Android.

Upvotes: 4

Views: 4499

Answers (3)

Kiran Maniya
Kiran Maniya

Reputation: 9009

It seems that you have a character encoding issue. Your issue could be solved with a package utf8. It will help you a lot when you are working with utf8 text. The error is just because of your font does not support Arabic language and hence it returns weird characters.

First, install the utf8 package in your project as,

npm i --save utf8

Another important thing is if you are using custom font-face in react native, make sure your font is supported for the language you are using. You can use a combination of fonts as well. Similar issues found with languages such as, • Chinese • Hebrew • Hindi • Japanese • Korean

But still, you can overcome the issue by using custom fonts and encoding as utf8. You can find Arabic fonts Here. Set it up as font-family from you react-native stylesheet and then give it a try.

dart:convert package has encode/decode functions available, you'll need it if the API returns encoded text. You can use it as,

import 'dart:convert' show utf8;
var encoded = utf8.encode('Text');
var decoded = utf8.decode(encoded);

Upvotes: 1

Muhammad Amir
Muhammad Amir

Reputation: 672

The accepted answer was not clear for me. But I found the place where the thing went wrong. So, wherever you are saving the text to the database or sending to the server, just encode before sending the text using utf8:

First install utf8:

yarn add utf8 or npm i --save utf8

then encode like so,

import utf8 from 'utf8';
...


utf8.encode(mytext);

There is no need to decode and no issue with fonts (at least in my case).

Just render the text again, and it should work.

Upvotes: 1

olir
olir

Reputation: 66

I would guess on a UTF handling problem to. Please check the following thread, maybe you have the same issue:

react-native-base64-encoding-string

Upvotes: 1

Related Questions