[🐛] Can not change stickyHeaderFormatDate format, hardcoded value

[hoang-van-nhat]

Issue

stream-chat-react-native/package/src/components/MessageList/MessageList.tsx

Line 928 in a983781

stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';

This value is for english format date only, for other language, for example, the formated value is 5月12, it leads to confusion because the right value is 5月12日, but I couldn't able to change it

Steps to reproduce

Steps to reproduce the behavior:

1. Use localization to change to Japanese
2. Go to Channel List
3. Go to Channel screen
4. Scroll up old messages

---

Expected behavior

The format should have not hardcoded into the library, or has some ways to receive the format.

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

---

Environment

Click To Expand

package.json:

{
  "name": "koiney-app",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client --clear",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "build:dev": "eas build --profile development",
    "build:preview": "eas build --profile preview",
    "build:production": "eas build --profile production",
    "android:dev-client": "expo start --dev-client --android --clear",
    "ios:dev-client": "expo start --dev-client --ios --clear",
    "postinstall": "husky install",
    "prettier": "npx prettier --write src/**/*.tsx src/**/*.ts",
    "lint": "eslint ./",
    "lint:fix": "eslint ./ --fix"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^9.3.7",
    "@react-native-firebase/app": "^17.3.0",
    "@react-native-firebase/auth": "^17.3.0",
    "@react-native-firebase/messaging": "^17.5.0",
    "@react-navigation/bottom-tabs": "^6.5.5",
    "@react-navigation/material-top-tabs": "^6.6.2",
    "@react-navigation/native": "^6.1.4",
    "@react-navigation/native-stack": "^6.9.10",
    "@shopify/flash-list": "1.4.0",
    "@stream-io/flat-list-mvcp": "^0.10.2",
    "@tanstack/query-async-storage-persister": "^4.26.1",
    "@tanstack/react-query": "^4.26.1",
    "@tanstack/react-query-persist-client": "^4.26.1",
    "@team-zabton/koiney-types": "^0.0.18",
    "axios": "^1.3.3",
    "date-fns": "^2.29.3",
    "expo": "~48.0.15",
    "expo-av": "~13.2.1",
    "expo-build-properties": "~0.5.1",
    "expo-clipboard": "~4.1.2",
    "expo-dev-client": "~2.1.5",
    "expo-device": "~5.2.1",
    "expo-file-system": "~15.2.2",
    "expo-haptics": "~12.2.1",
    "expo-image-manipulator": "~11.1.1",
    "expo-image-picker": "~14.1.1",
    "expo-intent-launcher": "~10.5.2",
    "expo-linear-gradient": "~12.1.2",
    "expo-localization": "~14.1.1",
    "expo-location": "~15.1.1",
    "expo-media-library": "~15.2.3",
    "expo-notifications": "~0.18.1",
    "expo-sharing": "~11.2.2",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-system-ui": "~2.2.1",
    "expo-updates": "~0.16.4",
    "formik": "^2.2.9",
    "i18next": "^22.4.10",
    "intl-pluralrules": "^1.3.1",
    "lodash": "^4.17.21",
    "native-base": "^3.4.25",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^12.1.5",
    "react-native": "0.71.7",
    "react-native-date-picker": "^4.2.9",
    "react-native-document-picker": "^8.2.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-figma-squircle": "^0.3.3",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-gifted-chat": "^2.0.1",
    "react-native-haptic-feedback": "^2.0.3",
    "react-native-maps": "1.3.2",
    "react-native-pager-view": "6.1.2",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-tab-view": "^3.5.1",
    "react-native-web": "~0.18.9",
    "stream-chat-expo": "^5.14.0",
    "stream-chat-react-native": "^5.14.0",
    "yup": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/lodash": "^4.14.191",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.70.6",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "dotenv": "^16.0.3",
    "eslint": "^8.34.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-react": "^7.32.2",
    "husky": "^8.0.0",
    "lint-staged": "^12.0.0",
    "react-native-svg-transformer": "^1.0.0",
    "typescript": "^4.6.3"
  },
  "private": true,
  "packageManager": "[email protected]",
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npx prettier --write",
      "npx eslint --fix"
    ]
  }
}

react-native info output:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 1.88 GB / 15.83 GB
  Binaries:
    Node: 16.15.1 - ~\AppData\Local\nvs\default\node.EXE
    Yarn: 3.4.1 - ~\AppData\Local\nvs\default\yarn.CMD
    npm: 8.11.0 - ~\AppData\Local\nvs\default\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
  IDEs:
    Android Studio: Version     2021.1.0.0 AI-211.7628.21.2111.8309675
    Visual Studio: Not Found
  Languages:
    Java: 11.0.14.1
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.7 => 0.71.7
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Foun

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • 5.14.0
• Device/Emulator info:
  • I am using a physical device
  • OS version: Android 10
  • Device/Emulator: iPhone 12

---

Additional context

---

Screenshots

Click To Expand

---

[vanGalilea]

@hoang-van-nhat, thanks for reaching out. What should be the Japanese format? How is it different than MMM D ?

[hoang-van-nhat]

@vanGalilea turns out it is dayjs format issue https://oss.issuehunt.io/r/iamkun/dayjs/issues/922
So correct format for Japanese should be "M月D日", as in the issue description, the format should not have stick to one value.

[khushal87]

@hoang-van-nhat is the above working now for you? If yes, please feel free to close it. Thanks 😄

[hoang-van-nhat]

@khushal87 but there is no fix for the hardcoded format in the stream chat react native component, as in decribed above, it should have an optional props for receiving date format string

[stream-ci-bot]

🎉 This issue has been resolved in version 5.32.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[khushal87]

Hey, @hoang-van-nhat, you can follow our new global date formatting guide that is done using i18n translations to achieve this customization - https://getstream.io/chat/docs/sdk/reactnative/guides/date-time-formatting/.