Intl.NumberFormat with compact notation doesn't display formatting
- 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 |
| ------ | ----- |
| |  |
Contributor 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