@intlayer/docs 9.0.0-canary.5 → 9.0.0-canary.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/docs/ar/intlayer_with_react_native+expo.md +56 -79
  2. package/docs/ar/packages/react-native-intlayer/exports.md +48 -14
  3. package/docs/de/intlayer_with_react_native+expo.md +50 -68
  4. package/docs/de/packages/react-native-intlayer/exports.md +47 -13
  5. package/docs/en/intlayer_with_react_native+expo.md +14 -18
  6. package/docs/en/packages/react-native-intlayer/exports.md +47 -13
  7. package/docs/en-GB/intlayer_with_react_native+expo.md +40 -94
  8. package/docs/en-GB/packages/react-native-intlayer/exports.md +51 -18
  9. package/docs/es/intlayer_with_react_native+expo.md +43 -80
  10. package/docs/es/packages/react-native-intlayer/exports.md +47 -13
  11. package/docs/fr/intlayer_with_react_native+expo.md +54 -68
  12. package/docs/fr/packages/react-native-intlayer/exports.md +47 -13
  13. package/docs/hi/intlayer_with_react_native+expo.md +90 -87
  14. package/docs/hi/packages/react-native-intlayer/exports.md +48 -14
  15. package/docs/id/intlayer_with_react_native+expo.md +45 -33
  16. package/docs/id/packages/react-native-intlayer/exports.md +47 -13
  17. package/docs/it/intlayer_with_react_native+expo.md +32 -72
  18. package/docs/it/packages/react-native-intlayer/exports.md +47 -13
  19. package/docs/ja/intlayer_with_react_native+expo.md +98 -137
  20. package/docs/ja/packages/react-native-intlayer/exports.md +47 -14
  21. package/docs/ko/intlayer_with_react_native+expo.md +231 -29
  22. package/docs/ko/packages/react-native-intlayer/exports.md +48 -14
  23. package/docs/pl/intlayer_with_react_native+expo.md +75 -46
  24. package/docs/pl/packages/react-native-intlayer/exports.md +47 -13
  25. package/docs/pt/intlayer_with_react_native+expo.md +38 -75
  26. package/docs/pt/packages/react-native-intlayer/exports.md +47 -13
  27. package/docs/ru/intlayer_with_react_native+expo.md +71 -60
  28. package/docs/ru/packages/react-native-intlayer/exports.md +49 -16
  29. package/docs/tr/intlayer_with_react_native+expo.md +30 -56
  30. package/docs/tr/packages/react-native-intlayer/exports.md +48 -15
  31. package/docs/uk/intlayer_with_react_native+expo.md +64 -52
  32. package/docs/uk/packages/react-native-intlayer/exports.md +47 -13
  33. package/docs/vi/intlayer_with_react_native+expo.md +43 -32
  34. package/docs/vi/packages/react-native-intlayer/exports.md +47 -13
  35. package/docs/zh/intlayer_with_react_native+expo.md +216 -82
  36. package/docs/zh/packages/react-native-intlayer/exports.md +48 -14
  37. package/package.json +6 -6
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-06-18
3
- updatedAt: 2026-05-31
3
+ updatedAt: 2026-06-25
4
4
  title: "Expo + React Native i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
5
5
  description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji Expo + React Native. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
6
6
  keywords:
@@ -17,6 +17,9 @@ slugs:
17
17
  applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
18
18
  applicationShowcase: https://intlayer-react-native.vercel.app
19
19
  history:
20
+ - version: 9.0.0
21
+ date: 2026-06-25
22
+ changes: "Importowanie providerów i hooków bezpośrednio z react-native-intlayer; react-intlayer nie jest już potrzebny jako bezpośrednia zależność"
20
23
  - version: 8.9.0
21
24
  date: 2026-05-04
22
25
  changes: "Aktualizacja użycia API useIntlayer w Solid do bezpośredniego dostępu do właściwości"
@@ -63,38 +66,55 @@ author: aymericzip
63
66
 
64
67
  <TOC/>
65
68
 
66
- ## Dlaczego Interlayer zamiast alternatyw?
69
+ ## Dlaczego Intlayer zamiast alternatyw?
67
70
 
68
- W porównaniu do głównych rozwiązań, takich jak react-native-localize czy i18next”, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
71
+ W porównaniu do głównych rozwiązań, takich jak `react-native-localize` czy `i18next`, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
69
72
 
70
- **Pełne pokrycie React Native**
73
+ <AccordionGroup>
74
+
75
+ <Accordion header="Pełne pokrycie React Native">
71
76
 
72
77
  Intlayer jest zoptymalizowany do doskonałej współpracy z React Native i Expo, oferując **zakres treści na poziomie komponentów**, **obsługę TypeScript** i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n) w aplikacjach mobilnych.
73
78
 
74
- **Łatwość konserwacji**
79
+ </Accordion>
80
+
81
+ <Accordion header="Łatwość konserwacji">
82
+
83
+ Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Intlayer jest **w pełni typowany**, aby zapewnić dokładność treści.
84
+
85
+ </Accordion>
86
+
87
+ <Accordion header="Agent AI">
75
88
 
76
- Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest **w pełni napisany**, aby zapewnić dokładność treści.
89
+ Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, takich jak **CLI** do sprawdzania brakujących tłumaczeń, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
77
90
 
78
- **Agent AI**
91
+ </Accordion>
79
92
 
80
- Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak **CLI** do sprawdzania brakujących tłumaczeń**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
93
+ <Accordion header="Automatyzacja">
81
94
 
82
- **Automatyzacja**
95
+ Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
83
96
 
84
- Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
97
+ </Accordion>
85
98
 
86
- **Wydajność**
99
+ <Accordion header="Wydajność">
87
100
 
88
- Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.
101
+ Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Intlayer optymalizuje ładowanie treści w czasie kompilacji.
89
102
 
90
- **Skalowanie bez użycia dewelopera**
103
+ </Accordion>
91
104
 
92
- Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **w czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
105
+ <Accordion header="Skalowanie bez użycia dewelopera">
93
106
 
94
- **Rozmiar bundle'a**
107
+ Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
108
+
109
+ </Accordion>
110
+
111
+ <Accordion header="Rozmiar bundle'a">
95
112
 
96
113
  Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary pakietów i wyświetleń nawet o 50%**.
97
114
 
115
+ </Accordion>
116
+ </AccordionGroup>
117
+
98
118
  <Steps>
99
119
 
100
120
  <Step number={1} title="Zainstaluj zależności">
@@ -103,28 +123,40 @@ Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-react-native-t
103
123
 
104
124
  Z projektu React Native zainstaluj następujące pakiety:
105
125
 
106
- ```menedżer pakietów bash="npm"
107
- npm zainstaluj warstwę pośrednią, reagującą warstwę pośrednią
108
- npm install --save-dev reagują-native-intlayer
109
- inicjacja międzywarstwy npx
126
+ ```bash packageManager="npm"
127
+ npx intlayer-cli init --interactive
110
128
  ```
111
129
 
112
- ```menedżer pakietów bash="pnpm"
113
- pnpm dodaj warstwę pośrednią, reagującą warstwę wewnętrzną
114
- pnpm add --save-dev reagują-native-intlayer
115
- pnpm inicjacja warstwy międzywarstwowej
130
+ ```bash packageManager="pnpm"
131
+ pnpm dlx intlayer-cli init --interactive
116
132
  ```
117
133
 
118
- ```bash packageManager="przędza"
119
- przędza dodaje warstwę pośrednią, reagującą na warstwę wewnętrzną
120
- przędza dodaj --save-dev reagująca-natywna-warstwa
121
- init międzywarstwy przędzy
134
+ ```bash packageManager="yarn"
135
+ yarn dlx intlayer-cli init --interactive
122
136
  ```
123
137
 
124
- ```menedżer pakietów bash="bułka"
125
- bułka dodaj warstwę pośrednią, zareaguj na warstwę wewnętrzną
126
- bun add --dev reagują-native-intlayer
127
- kok x inicjacja międzywarstwy
138
+ ```bash packageManager="bun"
139
+ bunx intlayer-cli init --interactive
140
+ ```
141
+
142
+ > Flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
143
+
144
+ > To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
145
+
146
+ ```bash packageManager="npm"
147
+ npm install intlayer react-native-intlayer
148
+ ```
149
+
150
+ ```bash packageManager="pnpm"
151
+ pnpm add intlayer react-native-intlayer
152
+ ```
153
+
154
+ ```bash packageManager="yarn"
155
+ yarn add intlayer react-native-intlayer
156
+ ```
157
+
158
+ ```bash packageManager="bun"
159
+ bun add intlayer react-native-intlayer
128
160
  ```
129
161
 
130
162
  ### Pakiety
@@ -132,17 +164,14 @@ kok x inicjacja międzywarstwy
132
164
  - **intlayer**
133
165
  Podstawowe narzędzie i18n do konfiguracji, zawartości słownika, generowania typów oraz poleceń CLI.
134
166
 
135
- - **react-intlayer**
136
- Integracja z React, która dostarcza dostawców kontekstu oraz hooki React, których użyjesz w React Native do pobierania i przełączania lokalizacji.
137
-
138
167
  - **react-native-intlayer**
139
- Integracja z React Native, która dostarcza wtyczkę Metro do integracji Intlayer z bundlerem React Native.
168
+ Integracja z React Native, która dostarcza dostawców kontekstu oraz hooki React do pobierania i przełączania lokalizacji, polyfille dla React Native oraz wtyczkę Metro do integracji Intlayer z bundlerem React Native. Reeksportuje wszystko z `react-intlayer`, więc w aplikacji React Native potrzebny jest tylko ten jeden pakiet.
140
169
 
141
170
  ---
142
171
 
143
172
  </Step>
144
173
 
145
- <Step number={3} title="Utwórz konfigurację Intlayer">
174
+ <Step number={2} title="Utwórz konfigurację Intlayer">
146
175
 
147
176
  W katalogu głównym projektu (lub w dowolnym wygodnym miejscu) utwórz plik **konfiguracji Intlayer**. Może on wyglądać tak:
148
177
 
@@ -176,7 +205,7 @@ W ramach tej konfiguracji możesz:
176
205
 
177
206
  </Step>
178
207
 
179
- <Step number={4} title="Dodaj wtyczkę Metro">
208
+ <Step number={3} title="Dodaj wtyczkę Metro">
180
209
 
181
210
  Metro to bundler dla React Native. Jest to domyślny bundler dla projektów React Native tworzonych za pomocą polecenia `react-native init`. Aby używać Intlayer z Metro, musisz dodać wtyczkę do pliku `metro.config.js`:
182
211
 
@@ -196,11 +225,11 @@ module.exports = (async () => {
196
225
 
197
226
  </Step>
198
227
 
199
- <Step number={5} title="Dodaj dostawcę Intlayer">
228
+ <Step number={4} title="Dodaj dostawcę Intlayer">
200
229
 
201
230
  Aby utrzymać synchronizację języka użytkownika w całej aplikacji, musisz opakować swój komponent root w komponent `IntlayerProvider` z `react-native-intlayer`.
202
231
 
203
- > Upewnij się, że używasz providera z `react-native-intlayer` zamiast `react-intlayer`. Eksport z `react-native-intlayer` zawiera polyfille dla web API.
232
+ > Zawsze importuj z `react-native-intlayer`. Jego `IntlayerProvider` zawiera polyfille dla web API używanego przez Intlayer, a pakiet reeksportuje wszystkie hooki i narzędzia z `react-intlayer`.
204
233
 
205
234
  Dodatkowo, musisz dodać funkcję `intlayerPolyfill` do swojego pliku `index.js`, aby zapewnić prawidłowe działanie Intlayer.
206
235
 
@@ -227,7 +256,7 @@ export default RootLayout;
227
256
 
228
257
  </Step>
229
258
 
230
- <Step number={6} title="Zadeklaruj swoją zawartość">
259
+ <Step number={5} title="Zadeklaruj swoją zawartość">
231
260
 
232
261
  Utwórz pliki **deklaracji zawartości** w dowolnym miejscu w swoim projekcie (zwykle w katalogu `src/`), używając dowolnego z formatów rozszerzeń obsługiwanych przez Intlayer:
233
262
 
@@ -298,7 +327,7 @@ export default homeScreenContent;
298
327
 
299
328
  </Step>
300
329
 
301
- <Step number={7} title="Użyj Intlayer w swoich komponentach">
330
+ <Step number={6} title="Użyj Intlayer w swoich komponentach">
302
331
 
303
332
  Użyj hooka `useIntlayer` w komponentach potomnych, aby uzyskać zlokalizowaną zawartość.
304
333
 
@@ -306,7 +335,7 @@ Użyj hooka `useIntlayer` w komponentach potomnych, aby uzyskać zlokalizowaną
306
335
 
307
336
  ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
308
337
  import { Image, StyleSheet, Platform } from "react-native";
309
- import { useIntlayer } from "react-intlayer";
338
+ import { useIntlayer } from "react-native-intlayer";
310
339
  import { HelloWave } from "@/components/HelloWave";
311
340
  import ParallaxScrollView from "@/components/ParallaxScrollView";
312
341
  import { ThemedText } from "@/components/ThemedText";
@@ -353,7 +382,7 @@ export default HomeScreen;
353
382
 
354
383
  </Step>
355
384
 
356
- <Step number={8} title="Zmiana lokalizacji aplikacji" isOptional={true}>
385
+ <Step number={7} title="Zmiana lokalizacji aplikacji" isOptional={true}>
357
386
 
358
387
  Aby zmienić lokalizację z poziomu komponentów, możesz użyć metody `setLocale` hooka `useLocale`:
359
388
 
@@ -361,7 +390,7 @@ Aby zmienić lokalizację z poziomu komponentów, możesz użyć metody `setLoca
361
390
  import { type FC } from "react";
362
391
  import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
363
392
  import { getLocaleName } from "intlayer";
364
- import { useLocale } from "react-intlayer";
393
+ import { useLocale } from "react-native-intlayer";
365
394
 
366
395
  export const LocaleSwitcher: FC = () => {
367
396
  const { setLocale, availableLocales } = useLocale();
@@ -438,7 +467,7 @@ To umożliwia funkcje takie jak:
438
467
  Aby uniknąć zatwierdzania automatycznie generowanych plików przez Intlayer, dodaj następujące wpisy do swojego `.gitignore`:
439
468
 
440
469
  ```bash
441
- # Ignoruj pliki generowane przez Intlayer
470
+ # Ignoruj pliki generowane przez Intlayer
442
471
  .intlayer
443
472
  ```
444
473
 
@@ -479,7 +508,7 @@ Intlayer jest przede wszystkim skierowany do Web Intl API; na React Native musis
479
508
 
480
509
  Lista kontrolna:
481
510
 
482
- - Używaj najnowszych wersji `intlayer`, `react-intlayer` oraz `react-native-intlayer`.
511
+ - Używaj najnowszych wersji `intlayer` oraz `react-native-intlayer`.
483
512
  - Włącz polyfill Intlayer.
484
513
  - Jeśli używasz `getLocaleName` lub innych narzędzi opartych na API Intl, zaimportuj te polyfille wcześnie (na przykład w `index.js` lub `App.tsx`):
485
514
 
@@ -1,8 +1,8 @@
1
1
  ---
2
2
  createdAt: 2026-01-21
3
- updatedAt: 2026-01-21
3
+ updatedAt: 2026-06-25
4
4
  title: Dokumentacja pakietu react-native-intlayer
5
- description: Wsparcie React Native dla Intlayer, zapewniające providerów i polyfille.
5
+ description: Wsparcie React Native dla Intlayer, zapewniające providerów, hooki, polyfille i konfigurację Metro.
6
6
  keywords:
7
7
  - react-native-intlayer
8
8
  - react-native
@@ -14,6 +14,9 @@ slugs:
14
14
  - react-native-intlayer
15
15
  - exports
16
16
  history:
17
+ - version: 9.0.0
18
+ date: 2026-06-25
19
+ changes: "Reeksportowanie pełnego API react-intlayer (hooki, narzędzia, podścieżki format/html/markdown), aby aplikacja React Native zależała tylko od react-native-intlayer"
17
20
  - version: 8.0.0
18
21
  date: 2026-01-21
19
22
  changes: "Ujednolicona dokumentacja dla wszystkich eksportów"
@@ -22,7 +25,9 @@ author: aymericzip
22
25
 
23
26
  # Pakiet react-native-intlayer
24
27
 
25
- Pakiet `react-native-intlayer` dostarcza niezbędne narzędzia do integracji Intlayer z aplikacjami React Native. Zawiera provider oraz polyfille wspierające obsługę lokalizacji.
28
+ Pakiet `react-native-intlayer` dostarcza niezbędne narzędzia do integracji Intlayer z aplikacjami React Native. Reeksportuje pełne API `react-intlayer` (hooki i narzędzia) wraz z gotowym na React Native `IntlayerProvider`, a także polyfille i konfigurację Metro wymaganą przez React Native.
29
+
30
+ > W aplikacji React Native importuj **wszystko** z `react-native-intlayer`. Nie musisz instalować ani importować `react-intlayer` bezpośrednio.
26
31
 
27
32
  ## Instalacja
28
33
 
@@ -34,14 +39,30 @@ npm install react-native-intlayer
34
39
 
35
40
  ### Provider
36
41
 
37
- | Komponent | Opis |
38
- | ------------------ | -------------------------------------------------------------------------------- |
39
- | `IntlayerProvider` | Komponent Provider, który otacza Twoją aplikację i udostępnia kontekst Intlayer. |
42
+ | Komponent | Opis |
43
+ | ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
44
+ | `IntlayerProvider` | Komponent Provider, który otacza Twoją aplikację i udostępnia kontekst Intlayer. Automatycznie stosuje wymagane polyfille. |
45
+
46
+ ```tsx
47
+ import { IntlayerProvider } from "react-native-intlayer";
48
+ ```
49
+
50
+ ### Hooki i narzędzia
51
+
52
+ Są reeksportowane z `react-intlayer`, więc możesz importować je bezpośrednio z `react-native-intlayer`:
40
53
 
41
- Import:
54
+ | Eksport | Opis |
55
+ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
56
+ | `useIntlayer` | Dostęp do zlokalizowanej zawartości dla klucza słownika. |
57
+ | `useLocale` | Odczyt i zmiana bieżącej lokalizacji. |
58
+ | `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic` | Ładowanie zawartości słownika na różne sposoby. |
59
+ | `useI18n` | Hook kompatybilny z i18next. |
60
+ | `t` | Pomocnik tłumaczenia inline. |
61
+ | `getIntlayer`, `getDictionary` | Imperatywne gettery zawartości. |
62
+ | `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Pomocniki trwałości lokalizacji. |
42
63
 
43
64
  ```tsx
44
- import "react-native-intlayer";
65
+ import { useIntlayer, useLocale, t } from "react-native-intlayer";
45
66
  ```
46
67
 
47
68
  ### Polyfill
@@ -50,10 +71,25 @@ import "react-native-intlayer";
50
71
  | ------------------ | ----------------------------------------------------------------------------------- |
51
72
  | `intlayerPolyfill` | Funkcja, która stosuje niezbędne polyfille dla React Native, aby wspierać Intlayer. |
52
73
 
53
- Import:
74
+ ```tsx
75
+ import { intlayerPolyfill } from "react-native-intlayer";
76
+ ```
77
+
78
+ > Polyfill jest stosowany automatycznie podczas importowania `IntlayerProvider`. Wywołaj `intlayerPolyfill` ręcznie tylko wtedy, gdy potrzebujesz polyfilli przed zamontowaniem providera.
79
+
80
+ ### Formatery
81
+
82
+ Hooki do formatowania liczb, dat i inne oparte na Intl są dostępne z podścieżki `/format`:
83
+
84
+ ```tsx
85
+ import { useNumber, useDate } from "react-native-intlayer/format";
86
+ ```
87
+
88
+ ### Renderowanie Markdown i HTML
54
89
 
55
90
  ```tsx
56
- import "react-native-intlayer";
91
+ import { MarkdownProvider } from "react-native-intlayer/markdown";
92
+ import { HTMLProvider } from "react-native-intlayer/html";
57
93
  ```
58
94
 
59
95
  ### Konfiguracja Metro
@@ -66,8 +102,6 @@ Pakiet `react-native-intlayer` dostarcza narzędzia do konfiguracji Metro, aby z
66
102
  | `configMetroIntlayerSync` | Funkcja synchroniczna, która scala konfigurację Metro bez przygotowywania zasobów Intlayer. |
67
103
  | `exclusionList` | Tworzy wzorzec RegExp dla blockList Metro, aby wykluczyć pliki zawartości z bundla. |
68
104
 
69
- Import:
70
-
71
105
  ```tsx
72
- import "react-native-intlayer/metro";
106
+ import { configMetroIntlayer } from "react-native-intlayer/metro";
73
107
  ```
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-06-18
3
- updatedAt: 2026-05-31
3
+ updatedAt: 2026-06-25
4
4
  title: "Expo + React Native i18n - Guia completo para traduzir seu aplicativo"
5
5
  description: "Sem mais i18next. O guia 2026 para criar uma aplicação Expo + React Native multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
6
6
  keywords:
@@ -17,12 +17,18 @@ slugs:
17
17
  applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
18
18
  applicationShowcase: https://intlayer-react-native.vercel.app
19
19
  history:
20
+ - version: 9.0.0
21
+ date: 2026-06-25
22
+ changes: "Importar providers e hooks diretamente de react-native-intlayer; react-intlayer não é mais necessário como dependência direta"
20
23
  - version: 8.9.0
21
24
  date: 2026-05-04
22
25
  changes: "Atualizar o uso da API useIntlayer do Solid para acesso direto a propriedades"
23
26
  - version: 7.5.9
24
27
  date: 2025-12-30
25
28
  changes: "Adicionar comando init"
29
+ - version: 6.1.6
30
+ date: 2025-10-02
31
+ changes: "Adicionar seção de debug"
26
32
  - version: 5.5.10
27
33
  date: 2025-06-29
28
34
  changes: "Histórico inicial"
@@ -37,7 +43,7 @@ author: aymericzip
37
43
  <iframe
38
44
  src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
39
45
  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
40
- title="Demo CodeSandbox - Intlayer"
46
+ title="Demo CodeSandbox - Como Internacionalizar sua aplicação usando Intlayer"
41
47
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
42
48
  loading="lazy"
43
49
  />
@@ -56,7 +62,9 @@ author: aymericzip
56
62
  </Tab>
57
63
  </Tabs>
58
64
 
59
- Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-react-native-template) no GitHub.
65
+ ## Índice
66
+
67
+ <TOC/>
60
68
 
61
69
  ## Por que Intlayer em vez de alternativas?
62
70
 
@@ -78,7 +86,7 @@ Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de a
78
86
 
79
87
  <Accordion header="Agente de IA">
80
88
 
81
- A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
89
+ A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
82
90
 
83
91
  </Accordion>
84
92
 
@@ -96,7 +104,7 @@ Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenh
96
104
 
97
105
  <Accordion header="Escalonamento sem nenhum desenvolvedor">
98
106
 
99
- Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
107
+ Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) auto-hospedado** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
100
108
 
101
109
  </Accordion>
102
110
 
@@ -109,52 +117,9 @@ Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o con
109
117
 
110
118
  <Steps>
111
119
 
112
- <Step number={1} title="instalar dependências">
120
+ <Step number={1} title="Instalar Dependências">
113
121
 
114
- Consulte [Modelo de aplicativo](https://github.com/aymericzip/intlayer-react-native-template) no GitHub.
115
-
116
- No seu projeto React Native, instale os seguintes pacotes:
117
-
118
- ```bash packageManager="npm"
119
- npm instalar camada interna reagir-intlayer
120
- npm install --save-dev react-native-intlayer
121
- inicialização da camada interna npx
122
- ```
123
-
124
- ```bash packageManager="pnpm"
125
- pnpm adicionar camada interna reagir-intlayer
126
- pnpm add --save-dev react-native-intlayer
127
- inicialização da camada interna pnpm
128
- ```
129
-
130
- ```bash packageManager="yarn"
131
- fio adicionar camada interna reagir camada interna
132
- fio adicionar --save-dev reagir-nativo-intlayer
133
- inicialização da camada interna do fio
134
- ```
135
-
136
- ```bash packageManager="bun"
137
- bun adicionar camada interna reagir-intlayer
138
- bun add --dev react-native-intlayer
139
- bun x intlayer init
140
- ```
141
-
142
- ### Pacotes
143
-
144
- - **camada interna**
145
- O kit de ferramentas principal i18n para configuração, conteúdo de dicionário, geração de tipos e comandos CLI.
146
-
147
- - **react-intlayer**
148
- Integração React que fornece os provedores de contexto e ganchos React que você usará no React Native para obter e alternar localidades.
149
-
150
- - **react-native-intlayer**
151
- Integração React Native que fornece o plugin Metro para integração do Intlayer com o empacotador React Native.
152
-
153
- ---
154
-
155
- </Step>
156
-
157
- <Step number={2} title="Instalar Dependências">
122
+ Consulte o [Modelo de Aplicativo](https://github.com/aymericzip/intlayer-react-native-template) no GitHub.
158
123
 
159
124
  No seu projeto React Native, instale os seguintes pacotes:
160
125
 
@@ -174,28 +139,24 @@ yarn dlx intlayer-cli init --interactive
174
139
  bunx intlayer-cli init --interactive
175
140
  ```
176
141
 
177
- > a flag `--interactive` é opcional. Use `intlayer-cli init` se você for um agente de IA.
142
+ > A flag `--interactive` é opcional. Use `intlayer-cli init` se você for um agente de IA.
178
143
 
179
144
  > Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:
180
145
 
181
146
  ```bash packageManager="npm"
182
- npm install intlayer react-intlayer
183
- npm install --save-dev react-native-intlayer
147
+ npm install intlayer react-native-intlayer
184
148
  ```
185
149
 
186
150
  ```bash packageManager="pnpm"
187
- pnpm add intlayer react-intlayer
188
- pnpm add --save-dev react-native-intlayer
151
+ pnpm add intlayer react-native-intlayer
189
152
  ```
190
153
 
191
154
  ```bash packageManager="yarn"
192
- yarn add intlayer react-intlayer
193
- yarn add --save-dev react-native-intlayer
155
+ yarn add intlayer react-native-intlayer
194
156
  ```
195
157
 
196
158
  ```bash packageManager="bun"
197
- bun add intlayer react-intlayer
198
- bun add --dev react-native-intlayer
159
+ bun add intlayer react-native-intlayer
199
160
  ```
200
161
 
201
162
  ### Pacotes
@@ -203,17 +164,14 @@ bun add --dev react-native-intlayer
203
164
  - **intlayer**
204
165
  O kit de ferramentas i18n principal para configuração, conteúdo do dicionário, geração de tipos e comandos CLI.
205
166
 
206
- - **react-intlayer**
207
- Integração React que fornece os provedores de contexto e hooks React que você usará no React Native para obter e trocar localidades.
208
-
209
167
  - **react-native-intlayer**
210
- Integração React Native que fornece o plugin Metro para integrar o Intlayer com o bundler do React Native.
168
+ Integração React Native que fornece os provedores de contexto e hooks React que você usará para obter e trocar localidades, os polyfills do React Native e o plugin Metro para integrar o Intlayer com o bundler do React Native. Reexporta tudo de `react-intlayer`, portanto você só precisa deste único pacote em um aplicativo React Native.
211
169
 
212
170
  ---
213
171
 
214
172
  </Step>
215
173
 
216
- <Step number={3} title="Criar uma Configuração Intlayer">
174
+ <Step number={2} title="Criar uma Configuração Intlayer">
217
175
 
218
176
  Na raiz do seu projeto (ou em qualquer lugar conveniente), crie um arquivo de **configuração do Intlayer**. Pode ser algo assim:
219
177
 
@@ -247,7 +205,7 @@ Dentro desta configuração, você pode:
247
205
 
248
206
  </Step>
249
207
 
250
- <Step number={4} title="Adicione o plugin Metro">
208
+ <Step number={3} title="Adicione o plugin Metro">
251
209
 
252
210
  Metro é um empacotador para React Native. É o empacotador padrão para projetos React Native criados com o comando `react-native init`. Para usar o Intlayer com o Metro, você precisa adicionar o plugin ao seu arquivo `metro.config.js`:
253
211
 
@@ -262,13 +220,18 @@ module.exports = (async () => {
262
220
  })();
263
221
  ```
264
222
 
223
+ > Nota: `configMetroIntlayer` é uma função que retorna uma promise. Use `configMetroIntlayerSync` se quiser usá-la de forma síncrona ou evitar IIFE (Immediately Invoked Function Expression).
224
+ > Nota: `configMetroIntlayerSync` não permite construir dicionários intlayer no início do servidor
225
+
265
226
  </Step>
266
227
 
267
- <Step number={5} title="Adicione o provedor Intlayer">
228
+ <Step number={4} title="Adicione o provedor Intlayer">
229
+
230
+ Para manter sincronizada a linguagem do usuário em toda a sua aplicação, você precisa envolver seu componente raiz com o componente `IntlayerProvider` do `react-native-intlayer`.
268
231
 
269
- Para manter sincronizada a linguagem do usuário em toda a sua aplicação, você precisa envolver seu componente raiz com o componente `IntlayerProvider` do `react-intlayer-native`.
232
+ > Sempre importe de `react-native-intlayer`. Seu `IntlayerProvider` inclui polyfills para a API web usada pelo Intlayer, e o pacote reexporta todos os hooks e utilitários de `react-intlayer`.
270
233
 
271
- > Certifique-se de usar o provedor do `react-native-intlayer` em vez do `react-intlayer`. A exportação do `react-native-intlayer` inclui polyfills para a API web.
234
+ Além disso, você precisa adicionar a função `intlayerPolyfill` ao seu arquivo `index.js` para garantir que o Intlayer funcione corretamente.
272
235
 
273
236
  ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
274
237
  import { Stack } from "expo-router";
@@ -293,7 +256,7 @@ export default RootLayout;
293
256
 
294
257
  </Step>
295
258
 
296
- <Step number={6} title="Declare Seu Conteúdo">
259
+ <Step number={5} title="Declare Seu Conteúdo">
297
260
 
298
261
  Crie arquivos de **declaração de conteúdo** em qualquer lugar do seu projeto (comumente dentro de `src/`), usando qualquer um dos formatos de extensão que o Intlayer suporta:
299
262
 
@@ -364,7 +327,7 @@ export default homeScreenContent;
364
327
 
365
328
  </Step>
366
329
 
367
- <Step number={7} title="Use o Intlayer em Seus Componentes">
330
+ <Step number={6} title="Use o Intlayer em Seus Componentes">
368
331
 
369
332
  Use o hook `useIntlayer` em componentes filhos para obter conteúdo localizado.
370
333
 
@@ -372,7 +335,7 @@ Use o hook `useIntlayer` em componentes filhos para obter conteúdo localizado.
372
335
 
373
336
  ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
374
337
  import { Image, StyleSheet, Platform } from "react-native";
375
- import { useIntlayer } from "intlayer";
338
+ import { useIntlayer } from "react-native-intlayer";
376
339
  import { HelloWave } from "@/components/HelloWave";
377
340
  import ParallaxScrollView from "@/components/ParallaxScrollView";
378
341
  import { ThemedText } from "@/components/ThemedText";
@@ -419,7 +382,7 @@ export default HomeScreen;
419
382
 
420
383
  </Step>
421
384
 
422
- <Step number={8} title="Alterar o Locale do App" isOptional={true}>
385
+ <Step number={7} title="Alterar o Locale do App" isOptional={true}>
423
386
 
424
387
  Para trocar os locales dentro dos seus componentes, você pode usar o método `setLocale` do hook `useLocale`:
425
388
 
@@ -427,7 +390,7 @@ Para trocar os locales dentro dos seus componentes, você pode usar o método `s
427
390
  import { type FC } from "react";
428
391
  import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
429
392
  import { getLocaleName } from "intlayer";
430
- import { useLocale } from "react-intlayer";
393
+ import { useLocale } from "react-native-intlayer";
431
394
 
432
395
  export const LocaleSwitcher: FC = () => {
433
396
  const { setLocale, availableLocales } = useLocale();
@@ -504,7 +467,7 @@ Isto é o que habilita funcionalidades como:
504
467
  Para evitar o commit de arquivos gerados automaticamente pelo Intlayer, adicione o seguinte ao seu `.gitignore`:
505
468
 
506
469
  ```bash
507
- # Ignorar os arquivos gerados pelo Intlayer
470
+ # Ignorar os arquivos gerados pelo Intlayer
508
471
  .intlayer
509
472
  ```
510
473
 
@@ -545,7 +508,7 @@ Intlayer tem como alvo principal a Web Intl API; no React Native você deve incl
545
508
 
546
509
  Checklist:
547
510
 
548
- - Use as últimas versões de `intlayer`, `react-intlayer` e `react-native-intlayer`.
511
+ - Use as últimas versões de `intlayer` e `react-native-intlayer`.
549
512
  - Ative o polyfill do Intlayer.
550
513
  - Se você usar `getLocaleName` ou outros utilitários baseados em Intl-API, importe esses polyfills cedo (por exemplo em `index.js` ou `App.tsx`):
551
514