Skip to content

Allow registering dynamic translations #471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Allow registering dynamic translations #471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a301278
Allow registering dynamic translations
LiamMorrow May 10, 2025
91bf284
Add example
LiamMorrow May 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions docusaurus/docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ registerTranslation('pl', {
selectRange: 'Select period',
notAccordingToDateFormat: (inputFormat) =>
`Date format must be ${inputFormat}`,
mustBeHigherThan: (date) => `Must be later then ${date}`,
mustBeLowerThan: (date) => `Must be earlier then ${date}`,
mustBeHigherThan: (date) => `Must be later than ${date}`,
mustBeLowerThan: (date) => `Must be earlier than ${date}`,
mustBeBetween: (startDate, endDate) =>
`Must be between ${startDate} - ${endDate}`,
dateIsDisabled: 'Day is not allowed',
Expand All @@ -69,6 +69,35 @@ registerTranslation('pl', {
})
```

### Dynamic

React-Native-Paper-Dates also provides the ability to register dynamically resolved translations. This allows you to use a different translation provider to resolve the translations. For example:

```javascript
import { translate } from 'YOUR_TRANSLATION_PROVIDER'
import { registerTranslation } from 'react-native-paper-dates'
registerTranslation('dynamic', () => {
return {
save: translate('Save'),
selectSingle: translate('Select date'),
selectMultiple: translate('Select dates'),
selectRange: translate('Select period'),
notAccordingToDateFormat: (inputFormat) =>
translate(`Date format must be ${inputFormat}`),
mustBeHigherThan: (date) => translate(`Must be later than ${date}`),
mustBeLowerThan: (date) => translate(`Must be earlier than ${date}`),
mustBeBetween: (startDate, endDate) =>
translate(`Must be between ${startDate} - ${endDate}`),
dateIsDisabled: translate('Day is not allowed'),
previous: translate('Previous'),
next: translate('Next'),
typeInDate: translate('Type in date'),
pickDateFromCalendar: translate('Pick date from calendar'),
close: translate('Close'),
}
})
```

:::info Note

If a language is not supported, consider creating a pull request so that it can officially be supported.
Expand Down
16 changes: 13 additions & 3 deletions src/translations/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,14 @@ export type TranslationsType = {
minute: string
}

let translationsPerLocale: Record<string, TranslationsType> = {}
export type TranslationResolver = (
locale: string | undefined
) => TranslationsType

let translationsPerLocale: Record<
string,
TranslationsType | TranslationResolver
> = {}

export function getTranslation<K extends keyof TranslationsType>(
locale: string | undefined,
Expand All @@ -32,7 +39,10 @@ export function getTranslation<K extends keyof TranslationsType>(
)
return fallback || key
}
const translation = translationsPerLocale[l][key]
const translation: TranslationsType[K] =
typeof translationForLocale === 'function'
? translationForLocale(locale)[key]
: translationForLocale[key]
if (!translation) {
console.warn(
`[react-native-paper-dates] The locale ${locale} is registered, but ${key} is missing`
Expand All @@ -43,7 +53,7 @@ export function getTranslation<K extends keyof TranslationsType>(

export function registerTranslation(
locale: string,
translations: TranslationsType
translations: TranslationsType | TranslationResolver
) {
translationsPerLocale[locale] = translations
}
Loading