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