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