facebook / facebook/hermes

Intl.NumberFormat with compact notation doesn't display formatting

Open
#1,318 1 comment 1 reaction 0 assignees View on GitHub
Needs: Triage :mag:
Dominant language
JavaScript
Stars
11.3k
Forks
859
Avg merge
1h 30m
Merged PRs (30d)
3

Description

### Description

`Intl.NumberFormat` has a [notation option](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation) that handles truncating a number and displaying formatting as text. This doesn't work with `notation: 'compact'` and the associated `compactDisplay` option.

Might be related to facebook/hermes#1317

### Steps to reproduce

```js
// Tested with other locales without any difference.
const locale = 'en-US'

const numberFormatter = new Intl.NumberFormat(locale, { notation: 'compact' })
const percentFormatter = new Intl.NumberFormat(locale, { style: 'percent', notation: 'compact' })
const numberLongFormatter = new Intl.NumberFormat(locale, { notation: 'compact', compactDisplay: 'long' })
const percentLongFormatter = new Intl.NumberFormat(locale, { style: 'percent', notation: 'compact', compactDisplay: 'long' })

numberFormatter.format(123456789) // Displays "123,456,789", but should display "123M"
percentFormatter.format(1234) // Displays "123,400 %", but should display "123K%"
numberLongFormatter.format(123456789) // Displays "123,456,789", but should display "123 million"
percentLongFormatter.format(1234) // Displays "123,400 %", but should display "123 thousand%"
```

### React Native Version

0.73.4

### Affected Platforms

Runtime - iOS

### Output of `npx react-native info`

```text
System:
OS: macOS 14.3
CPU: (10) arm64 Apple M2 Pro
Memory: 118.86 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.18.2
path: ~/Library/Caches/fnm_multishells/41192_1708331264383/bin/node
Yarn:
version: 1.22.19
path: ~/code/seb/Spark-blackbird/apps/blackbird/node_modules/.bin/yarn
npm:
version: 9.8.1
path: ~/Library/Caches/fnm_multishells/41192_1708331264383/bin/npm
Watchman:
version: 2024.01.22.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/rickard/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- visionOS 1.0
- watchOS 10.2
Android SDK:
API Levels:
- "33"
- "34"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
System Images:
- android-33 | Google APIs ARM 64 v8a
- android-33 | Google Play ARM 64 v8a
- android-34 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11255304
Xcode:
version: 15.2/15C500b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 3.2.2
path: /Users/rickard/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 13.5.1
wanted: "*"
react:
installed: 18.2.0
wanted: "*"
react-native:
installed: 0.73.4
wanted: "*"
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: false
```

### Stacktrace or Logs

```text
No stacktrace or logs
```

### Reproducer

https://snack.expo.dev/dgxZ741GIb4EfFyAnyQYp

### Screenshots and Videos

| Web | iOS |
| ------ | ----- |
| ![Screenshot 2024-02-19 at 09 30 36](https://github.com/facebook/react-native/assets/1478102/7658040a-cae5-4488-8558-0c005edfc0bf)| ![Screenshot 2024-02-19 at 09 30 27](https://github.com/facebook/react-native/assets/1478102/23aba429-da62-4ec2-81ae-97a1b945ab03) |

Contributor guide

Open the contributing guide

Research direction

Start with the Intl.NumberFormat entry point and the provided Expo Snack reproducer, using the compact and compactDisplay cases described in the issue. Compare the iOS Hermes output with the expected compact forms such as "123M" and "123 million"; the work is done when these cases format correctly without regressing percent formatting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
internationalization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.