« Back
read.

Converting localisation of numerical values in React Native applications.

TLDR: Not translations with L18N, but handling numerical localisation https://github.com/fixdio/react-native-locale.

The application we are currently writing at fixd.io allows users to enter several numerical values. This poses a problem with localisation due to the point based system used in device locale. As an example, the below shows the Danish locale vs the UK locale; the point system in Denmark uses comma notation, in the UK full-stops/periods/points.

The API for the app assumes, and requires, that numerical values passed to it are in decimal format with a point (full-stop/period/.); anything else will fail validation. Although we wanted to build a flexible API that can be used for various endpoints, we didn't feel that we should be handling the conversion of different point notations to the one which we require.

Rather, we enforce the conversion on the client. For our mobile app, this meant converting the notation used to the standard point notation.

There are several existing projects for React Native L18N, but none for localisation such as this. So, it was down to me to write the conversion. iOS has this localisation conversion system built in; I "just" needed to expose it to our React Native JavaScript.

The React Native localisation project is available as open source on the Fixd GitHub: https://github.com/fixdio/react-native-locale.

It allows one to to format numerical values based on the point system to a users locale format in number of different styles, including decimal, currency, percentage etc. The core functionality required for conversion of locale notation to point notation is the function numberFromDecimalString.

This function takes a numerical string in the locale notation and returns the point system value via the Promise resolve function. The function is to be used when a user has interacted to use the value with the API. In the Fixd application, on the Save functionality, we show a loading interface, run the function, wait for the Promise to return, interact with the API, and then display a state change based on success or failure.

comments powered by Disqus