@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.
- package/docs/ar/intlayer_with_react_native+expo.md +56 -79
- package/docs/ar/packages/react-native-intlayer/exports.md +48 -14
- package/docs/de/intlayer_with_react_native+expo.md +50 -68
- package/docs/de/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en/intlayer_with_react_native+expo.md +14 -18
- package/docs/en/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en-GB/intlayer_with_react_native+expo.md +40 -94
- package/docs/en-GB/packages/react-native-intlayer/exports.md +51 -18
- package/docs/es/intlayer_with_react_native+expo.md +43 -80
- package/docs/es/packages/react-native-intlayer/exports.md +47 -13
- package/docs/fr/intlayer_with_react_native+expo.md +54 -68
- package/docs/fr/packages/react-native-intlayer/exports.md +47 -13
- package/docs/hi/intlayer_with_react_native+expo.md +90 -87
- package/docs/hi/packages/react-native-intlayer/exports.md +48 -14
- package/docs/id/intlayer_with_react_native+expo.md +45 -33
- package/docs/id/packages/react-native-intlayer/exports.md +47 -13
- package/docs/it/intlayer_with_react_native+expo.md +32 -72
- package/docs/it/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ja/intlayer_with_react_native+expo.md +98 -137
- package/docs/ja/packages/react-native-intlayer/exports.md +47 -14
- package/docs/ko/intlayer_with_react_native+expo.md +231 -29
- package/docs/ko/packages/react-native-intlayer/exports.md +48 -14
- package/docs/pl/intlayer_with_react_native+expo.md +75 -46
- package/docs/pl/packages/react-native-intlayer/exports.md +47 -13
- package/docs/pt/intlayer_with_react_native+expo.md +38 -75
- package/docs/pt/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ru/intlayer_with_react_native+expo.md +71 -60
- package/docs/ru/packages/react-native-intlayer/exports.md +49 -16
- package/docs/tr/intlayer_with_react_native+expo.md +30 -56
- package/docs/tr/packages/react-native-intlayer/exports.md +48 -15
- package/docs/uk/intlayer_with_react_native+expo.md +64 -52
- package/docs/uk/packages/react-native-intlayer/exports.md +47 -13
- package/docs/vi/intlayer_with_react_native+expo.md +43 -32
- package/docs/vi/packages/react-native-intlayer/exports.md +47 -13
- package/docs/zh/intlayer_with_react_native+expo.md +216 -82
- package/docs/zh/packages/react-native-intlayer/exports.md +48 -14
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-06-18
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: "Expo + React Native i18n - Panduan lengkap menerjemahkan aplikasi Anda"
|
|
5
5
|
description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Expo + React Native multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
|
|
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: "Impor provider dan hook langsung dari react-native-intlayer; react-intlayer tidak lagi diperlukan sebagai dependensi langsung"
|
|
20
23
|
- version: 8.9.0
|
|
21
24
|
date: 2026-05-04
|
|
22
25
|
changes: "Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
|
|
@@ -120,28 +123,40 @@ Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-react-native-te
|
|
|
120
123
|
|
|
121
124
|
Dari proyek React Native Anda, instal paket berikut:
|
|
122
125
|
|
|
123
|
-
```bash packageManager
|
|
124
|
-
|
|
125
|
-
npm install --save-dev reaksi-asli-intlayer
|
|
126
|
-
npx lapisan dalam init
|
|
126
|
+
```bash packageManager="npm"
|
|
127
|
+
npx intlayer-cli init --interactive
|
|
127
128
|
```
|
|
128
129
|
|
|
129
|
-
```bash packageManager
|
|
130
|
-
pnpm
|
|
131
|
-
pnpm tambahkan --save-dev react-native-intlayer
|
|
132
|
-
pnpm dalam lapisan init
|
|
130
|
+
```bash packageManager="pnpm"
|
|
131
|
+
pnpm dlx intlayer-cli init --interactive
|
|
133
132
|
```
|
|
134
133
|
|
|
135
|
-
```bash packageManager
|
|
136
|
-
|
|
137
|
-
benang tambahkan --save-dev react-native-intlayer
|
|
138
|
-
benang dalam lapisan init
|
|
134
|
+
```bash packageManager="yarn"
|
|
135
|
+
yarn dlx intlayer-cli init --interactive
|
|
139
136
|
```
|
|
140
137
|
|
|
141
|
-
```bash packageManager
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
138
|
+
```bash packageManager="bun"
|
|
139
|
+
bunx intlayer-cli init --interactive
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
> Flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
|
|
143
|
+
|
|
144
|
+
> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Contohnya:
|
|
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
|
|
145
160
|
```
|
|
146
161
|
|
|
147
162
|
### Paket
|
|
@@ -149,17 +164,14 @@ bun x lapisan init
|
|
|
149
164
|
- **intlayer**
|
|
150
165
|
Toolkit inti i18n untuk konfigurasi, konten kamus, generasi tipe, dan perintah CLI.
|
|
151
166
|
|
|
152
|
-
- **react-intlayer**
|
|
153
|
-
Integrasi React yang menyediakan context providers dan React hooks yang akan Anda gunakan di React Native untuk mendapatkan dan mengganti locale.
|
|
154
|
-
|
|
155
167
|
- **react-native-intlayer**
|
|
156
|
-
Integrasi React Native yang menyediakan plugin Metro untuk mengintegrasikan Intlayer dengan bundler React Native.
|
|
168
|
+
Integrasi React Native yang menyediakan context providers dan React hooks yang akan Anda gunakan untuk mendapatkan dan mengganti locale, polyfill React Native, serta plugin Metro untuk mengintegrasikan Intlayer dengan bundler React Native. Paket ini mengekspor ulang semua hal dari `react-intlayer`, sehingga Anda hanya memerlukan satu paket ini dalam aplikasi React Native.
|
|
157
169
|
|
|
158
170
|
---
|
|
159
171
|
|
|
160
172
|
</Step>
|
|
161
173
|
|
|
162
|
-
<Step number={
|
|
174
|
+
<Step number={2} title="Buat Konfigurasi Intlayer">
|
|
163
175
|
|
|
164
176
|
Di root proyek Anda (atau di mana saja yang nyaman), buat file **konfigurasi Intlayer**. File tersebut mungkin terlihat seperti ini:
|
|
165
177
|
|
|
@@ -189,11 +201,11 @@ Dalam konfigurasi ini, Anda dapat:
|
|
|
189
201
|
- Mengonfigurasi **daftar locale yang didukung**.
|
|
190
202
|
- Menetapkan locale **default**.
|
|
191
203
|
- Nanti, Anda dapat menambahkan opsi yang lebih canggih (misalnya, log, direktori konten khusus, dll.).
|
|
192
|
-
- Lihat [dokumentasi konfigurasi Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
204
|
+
- Lihat [dokumentasi konfigurasi Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) untuk informasi lebih lanjut.
|
|
193
205
|
|
|
194
206
|
</Step>
|
|
195
207
|
|
|
196
|
-
<Step number={
|
|
208
|
+
<Step number={3} title="Tambahkan plugin Metro">
|
|
197
209
|
|
|
198
210
|
Metro adalah bundler untuk React Native. Ini adalah bundler default untuk proyek React Native yang dibuat dengan perintah `react-native init`. Untuk menggunakan Intlayer dengan Metro, Anda perlu menambahkan plugin ke file `metro.config.js` Anda:
|
|
199
211
|
|
|
@@ -213,11 +225,11 @@ module.exports = (async () => {
|
|
|
213
225
|
|
|
214
226
|
</Step>
|
|
215
227
|
|
|
216
|
-
<Step number={
|
|
228
|
+
<Step number={4} title="Tambahkan provider Intlayer">
|
|
217
229
|
|
|
218
230
|
Untuk menjaga sinkronisasi bahasa pengguna di seluruh aplikasi Anda, Anda perlu membungkus komponen root Anda dengan komponen `IntlayerProvider` dari `react-native-intlayer`.
|
|
219
231
|
|
|
220
|
-
>
|
|
232
|
+
> Selalu impor dari `react-native-intlayer`. `IntlayerProvider`-nya mencakup polyfill untuk API web yang digunakan oleh Intlayer, dan paket ini mengekspor ulang semua hook serta utilitas dari `react-intlayer`.
|
|
221
233
|
|
|
222
234
|
Selain itu, Anda perlu menambahkan fungsi `intlayerPolyfill` ke file `index.js` Anda untuk memastikan Intlayer dapat bekerja dengan baik.
|
|
223
235
|
|
|
@@ -244,7 +256,7 @@ export default RootLayout;
|
|
|
244
256
|
|
|
245
257
|
</Step>
|
|
246
258
|
|
|
247
|
-
<Step number={
|
|
259
|
+
<Step number={5} title="Deklarasikan Konten Anda">
|
|
248
260
|
|
|
249
261
|
Buat file **deklarasi konten** di mana saja dalam proyek Anda (biasanya di dalam `src/`), menggunakan salah satu format ekstensi yang didukung Intlayer:
|
|
250
262
|
|
|
@@ -315,7 +327,7 @@ export default homeScreenContent;
|
|
|
315
327
|
|
|
316
328
|
</Step>
|
|
317
329
|
|
|
318
|
-
<Step number={
|
|
330
|
+
<Step number={6} title="Gunakan Intlayer di Komponen Anda">
|
|
319
331
|
|
|
320
332
|
Gunakan hook `useIntlayer` di komponen anak untuk mendapatkan konten yang sudah dilokalisasi.
|
|
321
333
|
|
|
@@ -323,7 +335,7 @@ Gunakan hook `useIntlayer` di komponen anak untuk mendapatkan konten yang sudah
|
|
|
323
335
|
|
|
324
336
|
```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
|
|
325
337
|
import { Image, StyleSheet, Platform } from "react-native";
|
|
326
|
-
import { useIntlayer } from "react-intlayer";
|
|
338
|
+
import { useIntlayer } from "react-native-intlayer";
|
|
327
339
|
import { HelloWave } from "@/components/HelloWave";
|
|
328
340
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
329
341
|
import { ThemedText } from "@/components/ThemedText";
|
|
@@ -370,7 +382,7 @@ export default HomeScreen;
|
|
|
370
382
|
|
|
371
383
|
</Step>
|
|
372
384
|
|
|
373
|
-
<Step number={
|
|
385
|
+
<Step number={7} title="Ubah Locale Aplikasi" isOptional={true}>
|
|
374
386
|
|
|
375
387
|
Untuk mengganti locale dari dalam komponen Anda, Anda dapat menggunakan metode `setLocale` dari hook `useLocale`:
|
|
376
388
|
|
|
@@ -378,7 +390,7 @@ Untuk mengganti locale dari dalam komponen Anda, Anda dapat menggunakan metode `
|
|
|
378
390
|
import { type FC } from "react";
|
|
379
391
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
380
392
|
import { getLocaleName } from "intlayer";
|
|
381
|
-
import { useLocale } from "react-intlayer";
|
|
393
|
+
import { useLocale } from "react-native-intlayer";
|
|
382
394
|
|
|
383
395
|
export const LocaleSwitcher: FC = () => {
|
|
384
396
|
const { setLocale, availableLocales } = useLocale();
|
|
@@ -455,7 +467,7 @@ Ini yang mengaktifkan fitur seperti:
|
|
|
455
467
|
Untuk menghindari commit file yang dihasilkan otomatis oleh Intlayer, tambahkan berikut ini ke `.gitignore` Anda:
|
|
456
468
|
|
|
457
469
|
```bash
|
|
458
|
-
#
|
|
470
|
+
# Abaikan file yang dihasilkan oleh Intlayer
|
|
459
471
|
.intlayer
|
|
460
472
|
```
|
|
461
473
|
|
|
@@ -496,7 +508,7 @@ Intlayer terutama menargetkan Web Intl API; pada React Native Anda harus menyert
|
|
|
496
508
|
|
|
497
509
|
Daftar periksa:
|
|
498
510
|
|
|
499
|
-
- Gunakan versi terbaru dari `intlayer
|
|
511
|
+
- Gunakan versi terbaru dari `intlayer` dan `react-native-intlayer`.
|
|
500
512
|
- Aktifkan polyfill Intlayer.
|
|
501
513
|
- Jika Anda menggunakan `getLocaleName` atau utilitas lain berbasis Intl-API, impor polyfill ini lebih awal (misalnya di `index.js` atau `App.tsx`):
|
|
502
514
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-01-21
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: Dokumentasi paket react-native-intlayer
|
|
5
|
-
description: Dukungan React Native untuk Intlayer, menyediakan provider dan
|
|
5
|
+
description: Dukungan React Native untuk Intlayer, menyediakan provider, hook, polyfill, dan konfigurasi 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: "Mengekspor ulang API react-intlayer secara lengkap (hook, utilitas, subpath format/html/markdown) sehingga aplikasi React Native hanya bergantung pada react-native-intlayer"
|
|
17
20
|
- version: 8.0.0
|
|
18
21
|
date: 2026-01-21
|
|
19
22
|
changes: "Dokumentasi terpadu untuk semua ekspor"
|
|
@@ -22,7 +25,9 @@ author: aymericzip
|
|
|
22
25
|
|
|
23
26
|
# Paket react-native-intlayer
|
|
24
27
|
|
|
25
|
-
Paket `react-native-intlayer` menyediakan alat yang diperlukan untuk mengintegrasikan Intlayer ke dalam aplikasi React Native. Paket ini
|
|
28
|
+
Paket `react-native-intlayer` menyediakan alat yang diperlukan untuk mengintegrasikan Intlayer ke dalam aplikasi React Native. Paket ini mengekspor ulang API `react-intlayer` secara lengkap (hook dan utilitas) dengan `IntlayerProvider` yang siap untuk React Native, ditambah polyfill dan konfigurasi Metro yang diperlukan oleh React Native.
|
|
29
|
+
|
|
30
|
+
> Dalam aplikasi React Native, impor **semua** dari `react-native-intlayer`. Anda tidak perlu menginstal atau mengimpor `react-intlayer` secara langsung.
|
|
26
31
|
|
|
27
32
|
## Instalasi
|
|
28
33
|
|
|
@@ -34,14 +39,30 @@ npm install react-native-intlayer
|
|
|
34
39
|
|
|
35
40
|
### Provider
|
|
36
41
|
|
|
37
|
-
| Component | Deskripsi
|
|
38
|
-
| ------------------ |
|
|
39
|
-
| `IntlayerProvider` | Komponen provider yang membungkus aplikasi Anda dan menyediakan konteks Intlayer. |
|
|
42
|
+
| Component | Deskripsi |
|
|
43
|
+
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
44
|
+
| `IntlayerProvider` | Komponen provider yang membungkus aplikasi Anda dan menyediakan konteks Intlayer. Secara otomatis menerapkan polyfill yang diperlukan. |
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Hook dan utilitas
|
|
51
|
+
|
|
52
|
+
Berikut ini diekspor ulang dari `react-intlayer`, sehingga Anda dapat mengimpornya langsung dari `react-native-intlayer`:
|
|
40
53
|
|
|
41
|
-
|
|
54
|
+
| Ekspor | Deskripsi |
|
|
55
|
+
| ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
|
|
56
|
+
| `useIntlayer` | Mengakses konten yang dilokalisasi untuk kunci kamus. |
|
|
57
|
+
| `useLocale` | Membaca dan mengubah locale saat ini. |
|
|
58
|
+
| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic` | Memuat konten kamus dengan berbagai cara. |
|
|
59
|
+
| `useI18n` | Hook yang kompatibel dengan i18next. |
|
|
60
|
+
| `t` | Helper terjemahan inline. |
|
|
61
|
+
| `getIntlayer`, `getDictionary` | Getter konten secara imperatif. |
|
|
62
|
+
| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Helper persistensi locale. |
|
|
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` | Fungsi yang menerapkan polyfill yang diperlukan untuk React Native agar mendukung Intlayer. |
|
|
52
73
|
|
|
53
|
-
|
|
74
|
+
```tsx
|
|
75
|
+
import { intlayerPolyfill } from "react-native-intlayer";
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
> Polyfill diterapkan secara otomatis saat Anda mengimpor `IntlayerProvider`. Panggil `intlayerPolyfill` secara manual hanya jika Anda memerlukan polyfill sebelum provider dipasang.
|
|
79
|
+
|
|
80
|
+
### Formatter
|
|
81
|
+
|
|
82
|
+
Hook pemformatan angka, tanggal, dan Intl-based lainnya tersedia dari subpath `/format`:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useNumber, useDate } from "react-native-intlayer/format";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Rendering Markdown dan 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
|
### Konfigurasi Metro
|
|
@@ -66,8 +102,6 @@ Paket `react-native-intlayer` menyediakan utilitas konfigurasi Metro untuk memas
|
|
|
66
102
|
| `configMetroIntlayerSync` | Fungsi sinkron yang menggabungkan konfigurasi Metro tanpa menyiapkan sumber daya Intlayer. |
|
|
67
103
|
| `exclusionList` | Membuat pola RegExp untuk blockList Metro guna mengecualikan file konten dari bundle. |
|
|
68
104
|
|
|
69
|
-
Impor:
|
|
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-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: "Expo + React Native i18n - Guida completa per tradurre la tua applicazione"
|
|
5
5
|
description: "Niente più i18next. La guida 2026 per creare un'applicazione Expo + React Native multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
|
|
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: "Importa provider e hook direttamente da react-native-intlayer; react-intlayer non è più necessario come dipendenza diretta"
|
|
20
23
|
- version: 8.9.0
|
|
21
24
|
date: 2026-05-04
|
|
22
25
|
changes: "Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"
|
|
@@ -56,7 +59,9 @@ author: aymericzip
|
|
|
56
59
|
</Tab>
|
|
57
60
|
</Tabs>
|
|
58
61
|
|
|
59
|
-
|
|
62
|
+
## Indice
|
|
63
|
+
|
|
64
|
+
<TOC/>
|
|
60
65
|
|
|
61
66
|
## Perché Intlayer rispetto alle alternative?
|
|
62
67
|
|
|
@@ -109,52 +114,9 @@ Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto n
|
|
|
109
114
|
|
|
110
115
|
<Steps>
|
|
111
116
|
|
|
112
|
-
<Step number={1} title="
|
|
113
|
-
|
|
114
|
-
Vedere [Modello di applicazione](https://github.com/aymericzip/intlayer-react-native-template) su GitHub.
|
|
115
|
-
|
|
116
|
-
Dal tuo progetto React Native, installa i seguenti pacchetti:
|
|
117
|
-
|
|
118
|
-
```bash pacchettoManager="npm"
|
|
119
|
-
npm installa interlayer react-intlayer
|
|
120
|
-
npm install --save-dev react-native-intlayer
|
|
121
|
-
init dell'interlayer npx
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
```bash packageManager="pnpm"
|
|
125
|
-
pnpm aggiungi intlayer react-intlayer
|
|
126
|
-
pnpm aggiungi --save-dev react-native-intlayer
|
|
127
|
-
init dell'interlayer pnpm
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
```bash packageManager="filato"
|
|
131
|
-
il filato aggiunge l'interstrato reagisce all'interstrato
|
|
132
|
-
filato aggiungi --save-dev react-native-intlayer
|
|
133
|
-
init.interstrato di filato
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
```bash packageManager="panino"
|
|
137
|
-
bun aggiungi intlayer react-intlayer
|
|
138
|
-
bun aggiungi --dev react-native-intlayer
|
|
139
|
-
bun x intlayer init
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### Pacchetti
|
|
143
|
-
|
|
144
|
-
- **interstrato**
|
|
145
|
-
Il toolkit i18n principale per configurazione, contenuto del dizionario, generazione di tipi e comandi CLI.
|
|
146
|
-
|
|
147
|
-
- **reagire-interstrato**
|
|
148
|
-
Integrazione React che fornisce i provider di contesto e gli hook React che utilizzerai in React Native per ottenere e cambiare locale.
|
|
117
|
+
<Step number={1} title="Installare le dipendenze">
|
|
149
118
|
|
|
150
|
-
-
|
|
151
|
-
Integrazione React Native che fornisce il plug-in Metro per l'integrazione di Intlayer con il bundler React Native.
|
|
152
|
-
|
|
153
|
-
---
|
|
154
|
-
|
|
155
|
-
</Step>
|
|
156
|
-
|
|
157
|
-
<Step number={2} title="Installa le dipendenze">
|
|
119
|
+
Vedere il [Modello di applicazione](https://github.com/aymericzip/intlayer-react-native-template) su GitHub.
|
|
158
120
|
|
|
159
121
|
Dal tuo progetto React Native, installa i seguenti pacchetti:
|
|
160
122
|
|
|
@@ -174,28 +136,24 @@ yarn dlx intlayer-cli init --interactive
|
|
|
174
136
|
bunx intlayer-cli init --interactive
|
|
175
137
|
```
|
|
176
138
|
|
|
177
|
-
>
|
|
139
|
+
> Il flag `--interactive` è opzionale. Usa `intlayer-cli init` se sei un agente IA.
|
|
178
140
|
|
|
179
141
|
> Questo comando rileverà il tuo ambiente e installerà i pacchetti richiesti. Ad esempio:
|
|
180
142
|
|
|
181
143
|
```bash packageManager="npm"
|
|
182
|
-
npm install intlayer react-intlayer
|
|
183
|
-
npm install --save-dev react-native-intlayer
|
|
144
|
+
npm install intlayer react-native-intlayer
|
|
184
145
|
```
|
|
185
146
|
|
|
186
147
|
```bash packageManager="pnpm"
|
|
187
|
-
pnpm add intlayer react-intlayer
|
|
188
|
-
pnpm add --save-dev react-native-intlayer
|
|
148
|
+
pnpm add intlayer react-native-intlayer
|
|
189
149
|
```
|
|
190
150
|
|
|
191
151
|
```bash packageManager="yarn"
|
|
192
|
-
yarn add intlayer react-intlayer
|
|
193
|
-
yarn add --save-dev react-native-intlayer
|
|
152
|
+
yarn add intlayer react-native-intlayer
|
|
194
153
|
```
|
|
195
154
|
|
|
196
155
|
```bash packageManager="bun"
|
|
197
|
-
bun add intlayer react-intlayer
|
|
198
|
-
bun add --dev react-native-intlayer
|
|
156
|
+
bun add intlayer react-native-intlayer
|
|
199
157
|
```
|
|
200
158
|
|
|
201
159
|
### Pacchetti
|
|
@@ -203,17 +161,14 @@ bun add --dev react-native-intlayer
|
|
|
203
161
|
- **intlayer**
|
|
204
162
|
Il toolkit i18n principale per la configurazione, il contenuto del dizionario, la generazione dei tipi e i comandi CLI.
|
|
205
163
|
|
|
206
|
-
- **react-intlayer**
|
|
207
|
-
Integrazione React che fornisce i provider di contesto e gli hook React che utilizzerai in React Native per ottenere e cambiare le localizzazioni.
|
|
208
|
-
|
|
209
164
|
- **react-native-intlayer**
|
|
210
|
-
Integrazione React Native che fornisce il plugin Metro per integrare Intlayer con il bundler di React Native.
|
|
165
|
+
Integrazione React Native che fornisce i provider di contesto e gli hook React che utilizzerai per ottenere e cambiare le localizzazioni, i polyfill React Native e il plugin Metro per integrare Intlayer con il bundler di React Native. Riesporta tutto da `react-intlayer`, quindi hai bisogno solo di questo singolo pacchetto in un'app React Native.
|
|
211
166
|
|
|
212
167
|
---
|
|
213
168
|
|
|
214
169
|
</Step>
|
|
215
170
|
|
|
216
|
-
<Step number={
|
|
171
|
+
<Step number={2} title="Crea una Configurazione Intlayer">
|
|
217
172
|
|
|
218
173
|
Nella root del tuo progetto (o in qualsiasi posizione conveniente), crea un file di **configurazione Intlayer**. Potrebbe apparire così:
|
|
219
174
|
|
|
@@ -247,7 +202,7 @@ All'interno di questa configurazione, puoi:
|
|
|
247
202
|
|
|
248
203
|
</Step>
|
|
249
204
|
|
|
250
|
-
<Step number={
|
|
205
|
+
<Step number={3} title="Aggiungi il plugin Metro">
|
|
251
206
|
|
|
252
207
|
Metro è un bundler per React Native. È il bundler predefinito per i progetti React Native creati con il comando `react-native init`. Per usare Intlayer con Metro, devi aggiungere il plugin al file `metro.config.js`:
|
|
253
208
|
|
|
@@ -262,13 +217,18 @@ module.exports = (async () => {
|
|
|
262
217
|
})();
|
|
263
218
|
```
|
|
264
219
|
|
|
220
|
+
> Nota: `configMetroIntlayer` è una funzione promise. Usa `configMetroIntlayerSync` se vuoi usarla in modo sincrono, o evita l'IFFE (Immediately Invoked Function Expression).
|
|
221
|
+
> Nota: `configMetroIntlayerSync` non consente di costruire dizionari intlayer all'avvio del server
|
|
222
|
+
|
|
265
223
|
</Step>
|
|
266
224
|
|
|
267
|
-
<Step number={
|
|
225
|
+
<Step number={4} title="Aggiungi il provider Intlayer">
|
|
226
|
+
|
|
227
|
+
Per mantenere sincronizzata la lingua dell'utente in tutta l'applicazione, devi avvolgere il componente radice con il componente `IntlayerProvider` da `react-native-intlayer`.
|
|
268
228
|
|
|
269
|
-
|
|
229
|
+
> Importa sempre da `react-native-intlayer`. Il suo `IntlayerProvider` include polyfill per le API web usate da Intlayer, e il pacchetto riesporta tutti gli hook e le utilità da `react-intlayer`.
|
|
270
230
|
|
|
271
|
-
|
|
231
|
+
Inoltre, devi aggiungere la funzione `intlayerPolyfill` al tuo file `index.js` per assicurarti che Intlayer possa funzionare correttamente.
|
|
272
232
|
|
|
273
233
|
```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
|
|
274
234
|
import { Stack } from "expo-router";
|
|
@@ -293,7 +253,7 @@ export default RootLayout;
|
|
|
293
253
|
|
|
294
254
|
</Step>
|
|
295
255
|
|
|
296
|
-
<Step number={
|
|
256
|
+
<Step number={5} title="Dichiarare il Tuo Contenuto">
|
|
297
257
|
|
|
298
258
|
Crea file di **dichiarazione del contenuto** in qualsiasi punto del tuo progetto (comunemente all'interno di `src/`), utilizzando uno qualsiasi dei formati di estensione supportati da Intlayer:
|
|
299
259
|
|
|
@@ -364,7 +324,7 @@ export default homeScreenContent;
|
|
|
364
324
|
|
|
365
325
|
</Step>
|
|
366
326
|
|
|
367
|
-
<Step number={
|
|
327
|
+
<Step number={6} title="Usa Intlayer nei tuoi componenti">
|
|
368
328
|
|
|
369
329
|
Usa l'hook `useIntlayer` nei componenti figli per ottenere contenuti localizzati.
|
|
370
330
|
|
|
@@ -372,7 +332,7 @@ Usa l'hook `useIntlayer` nei componenti figli per ottenere contenuti localizzati
|
|
|
372
332
|
|
|
373
333
|
```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
|
|
374
334
|
import { Image, StyleSheet, Platform } from "react-native";
|
|
375
|
-
import { useIntlayer } from "intlayer";
|
|
335
|
+
import { useIntlayer } from "react-native-intlayer";
|
|
376
336
|
import { HelloWave } from "@/components/HelloWave";
|
|
377
337
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
378
338
|
import { ThemedText } from "@/components/ThemedText";
|
|
@@ -419,7 +379,7 @@ export default HomeScreen;
|
|
|
419
379
|
|
|
420
380
|
</Step>
|
|
421
381
|
|
|
422
|
-
<Step number={
|
|
382
|
+
<Step number={7} title="Cambiare la Lingua dell'App" isOptional={true}>
|
|
423
383
|
|
|
424
384
|
Per cambiare la lingua dall'interno dei tuoi componenti, puoi usare il metodo `setLocale` dell'hook `useLocale`:
|
|
425
385
|
|
|
@@ -427,7 +387,7 @@ Per cambiare la lingua dall'interno dei tuoi componenti, puoi usare il metodo `s
|
|
|
427
387
|
import { type FC } from "react";
|
|
428
388
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
429
389
|
import { getLocaleName } from "intlayer";
|
|
430
|
-
import { useLocale } from "react-intlayer";
|
|
390
|
+
import { useLocale } from "react-native-intlayer";
|
|
431
391
|
|
|
432
392
|
export const LocaleSwitcher: FC = () => {
|
|
433
393
|
const { setLocale, availableLocales } = useLocale();
|
|
@@ -504,7 +464,7 @@ Questo abilita funzionalità come:
|
|
|
504
464
|
Per evitare di commettere file generati automaticamente da Intlayer, aggiungi quanto segue al tuo `.gitignore`:
|
|
505
465
|
|
|
506
466
|
```bash
|
|
507
|
-
#
|
|
467
|
+
# Ignora i file generati da Intlayer
|
|
508
468
|
.intlayer
|
|
509
469
|
```
|
|
510
470
|
|
|
@@ -545,7 +505,7 @@ Intlayer è principalmente orientato all'API Web Intl; su React Native è necess
|
|
|
545
505
|
|
|
546
506
|
Checklist:
|
|
547
507
|
|
|
548
|
-
- Utilizza le versioni più recenti di `intlayer
|
|
508
|
+
- Utilizza le versioni più recenti di `intlayer` e `react-native-intlayer`.
|
|
549
509
|
- Abilita il polyfill di Intlayer.
|
|
550
510
|
- Se utilizzi `getLocaleName` o altre utility basate su Intl-API, importa questi polyfill all'inizio (ad esempio in `index.js` o `App.tsx`):
|
|
551
511
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-01-21
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: Documentazione del pacchetto react-native-intlayer
|
|
5
|
-
description: Supporto per React Native in Intlayer, fornendo provider e
|
|
5
|
+
description: Supporto per React Native in Intlayer, fornendo provider, hook, polyfill e configurazione 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: "Riesporta l'intera API react-intlayer (hook, utilità, subpath format/html/markdown) in modo che un'app React Native dipenda solo da react-native-intlayer"
|
|
17
20
|
- version: 8.0.0
|
|
18
21
|
date: 2026-01-21
|
|
19
22
|
changes: "Documentazione unificata per tutte le esportazioni"
|
|
@@ -22,7 +25,9 @@ author: aymericzip
|
|
|
22
25
|
|
|
23
26
|
# Pacchetto react-native-intlayer
|
|
24
27
|
|
|
25
|
-
Il pacchetto `react-native-intlayer` fornisce gli strumenti necessari per integrare Intlayer nelle applicazioni React Native.
|
|
28
|
+
Il pacchetto `react-native-intlayer` fornisce gli strumenti necessari per integrare Intlayer nelle applicazioni React Native. Riesporta l'intera API `react-intlayer` (hook e utilità) con un `IntlayerProvider` pronto per React Native, oltre ai polyfill e alla configurazione Metro richiesti da React Native.
|
|
29
|
+
|
|
30
|
+
> In un'app React Native, importa **tutto** da `react-native-intlayer`. Non è necessario installare o importare `react-intlayer` direttamente.
|
|
26
31
|
|
|
27
32
|
## Installazione
|
|
28
33
|
|
|
@@ -34,14 +39,30 @@ npm install react-native-intlayer
|
|
|
34
39
|
|
|
35
40
|
### Provider
|
|
36
41
|
|
|
37
|
-
| Componente | Descrizione
|
|
38
|
-
| ------------------ |
|
|
39
|
-
| `IntlayerProvider` | Componente Provider che avvolge la tua applicazione e fornisce il contesto Intlayer. |
|
|
42
|
+
| Componente | Descrizione |
|
|
43
|
+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
44
|
+
| `IntlayerProvider` | Componente Provider che avvolge la tua applicazione e fornisce il contesto Intlayer. Applica automaticamente i polyfill necessari. |
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Hook e utilità
|
|
51
|
+
|
|
52
|
+
Questi sono riesportati da `react-intlayer`, quindi puoi importarli direttamente da `react-native-intlayer`:
|
|
40
53
|
|
|
41
|
-
|
|
54
|
+
| Esportazione | Descrizione |
|
|
55
|
+
| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
|
|
56
|
+
| `useIntlayer` | Accedi al contenuto localizzato per una chiave del dizionario. |
|
|
57
|
+
| `useLocale` | Leggi e cambia la localizzazione corrente. |
|
|
58
|
+
| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic` | Carica il contenuto del dizionario in vari modi. |
|
|
59
|
+
| `useI18n` | Hook compatibile con i18next. |
|
|
60
|
+
| `t` | Helper per la traduzione inline. |
|
|
61
|
+
| `getIntlayer`, `getDictionary` | Getter imperativi del contenuto. |
|
|
62
|
+
| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Helper per la persistenza della localizzazione. |
|
|
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` | Funzione che applica i polyfill necessari per React Native per supportare Intlayer. |
|
|
52
73
|
|
|
53
|
-
|
|
74
|
+
```tsx
|
|
75
|
+
import { intlayerPolyfill } from "react-native-intlayer";
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
> Il polyfill viene applicato automaticamente quando importi `IntlayerProvider`. Chiama `intlayerPolyfill` manualmente solo se hai bisogno dei polyfill prima che il provider venga montato.
|
|
79
|
+
|
|
80
|
+
### Formatter
|
|
81
|
+
|
|
82
|
+
Gli hook di formattazione numerica, data e altri basati su Intl sono disponibili dal subpath `/format`:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useNumber, useDate } from "react-native-intlayer/format";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Rendering Markdown e 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
|
### Configurazione Metro
|
|
@@ -66,8 +102,6 @@ Il pacchetto `react-native-intlayer` fornisce utilità di configurazione per Met
|
|
|
66
102
|
| `configMetroIntlayerSync` | Funzione sincrona che unisce la configurazione di Metro senza preparare le risorse di Intlayer. |
|
|
67
103
|
| `exclusionList` | Crea un pattern RegExp per la blockList di Metro per escludere file di contenuto dal bundle. |
|
|
68
104
|
|
|
69
|
-
Import:
|
|
70
|
-
|
|
71
105
|
```tsx
|
|
72
|
-
import "react-native-intlayer/metro";
|
|
106
|
+
import { configMetroIntlayer } from "react-native-intlayer/metro";
|
|
73
107
|
```
|