You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Please have in mind that the only line you have to add is the selected one. Github already takes care of adding the PR title to the body of the merge commit.
19
19
20
+
## Reverting a release
21
+
22
+
If you've released something you were not supposed to and want to remove that release from npm, remove the git tag and then rollback the changes, you have a few options:
23
+
24
+
### Reset master branch
25
+
26
+
Cleanest way is to just reset the master branch and remove the last few commits, so the ideal is just do reset and force-push.
27
+
28
+
### Revert unwanted commits
29
+
30
+
If you want some of the newest commits but want to remove older ones you can just revert the commit with `git revert MERGE_PR_COMMIT_HASH`. Please have in mind that in case your merge commit contains a commit with a breaking change flag, you need to revert that commit BEFORE reverting the PR merge commit.
Static translations inside of the Stream Chat for React Native components are provided by `Streami18n`.
8
-
`Streami18n` is a class that uses a configuration of [i18next](https://www.i18next.com/) with a subset of the functionality exposed.
9
-
`Streami18n` is provided by `stream-chat-react-native`and can be imported from the library.
7
+
If you deploy your app to users who speak another language, you'll need to internationalize it. That means you need to write the app in a way that makes it possible to localize values like text and layouts for each language or locale that the app supports.
8
+
The React Native SDK's UI Components are available in multiple languages out-of-the-box.
9
+
At the moment we support the following languages (and more will be added in the future):
If you choose to use the default English settings with Day.js you do not need to deal directly with an instance of `Streami18n`, this is taken care of for you.
33
+
`Streami18n` will default to English (en). If you choose to use the default English settings with Day.js you do
34
+
not need to deal directly with an instance of `Streami18n`, this is taken care of for you.
34
35
35
36
If you choose to change the language, translation, or date handling, you will need to provide your modified instance of `Streami18n` to the component library.
36
37
Two components require your custom instance of `Streami18n` to properly pass your translation and time-date functions to the component library, `OverlayProvider` and <!--TODO:Changetonewdocsforlinks-->`Chat`.
Stream provides built in translations for some languages out-of-the-box.
59
+
`Streami18n` accepts two optional parameters when being instantiated, [`options`](#options) and [`i18nextConfig`](#i18nextconfig).
60
+
These parameters allow you to modify the `Streami18n` instance to your preferences.
61
+
62
+
As an example, let's say we need to localize the UI of the application for a Dutch audience:
63
+
64
+
```tsx
65
+
const streami18n = new Streami18n({ language: 'nl' }); // Instantiate Streami18n with Dutch strings.
66
+
```
67
+
68
+
Alternatively, you can also use [`setLanguage`](#setlanguage) method on `Streami18n` class.
69
+
This is useful especially if you want to build language toggle functionality within your app.
70
+
71
+
For example, let's say an application needs to default to English but support French:
72
+
73
+
```tsx
74
+
const streami18n =newStreami18n();
75
+
76
+
...
77
+
// Logic for how a user can change the language
78
+
...
79
+
80
+
streami18n.setLanguage('fr'); // The UI will change to French.
81
+
```
82
+
83
+
### Adding a new language
84
+
85
+
Let's see how you can add support for additional languages in the SDK. As an example, we'll implement a custom Polish language translation:
86
+
87
+
```tsx
88
+
const streami18n =newStreami18n();
89
+
streami18n.registerTranslation('pl', {
90
+
'Copy Message': 'Kopiuj wiadomość',
91
+
'Delete Message': 'Usuń wiadomość',
92
+
'{{ firstUser }} and {{ secondUser }} are typing...':
93
+
'{{ firstUser }} i {{ secondUser }} piszą...',
94
+
})
95
+
```
96
+
97
+
Please take a look at all the available texts [here](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/en.json).
98
+
99
+
### Overriding existing languages
100
+
101
+
You can also make line item changes to the strings for existing UI components. This is useful if you want to tweak an existing language to use regional spelling variants (American English vs. UK English, for example) same process as [Adding a new language](#adding-a-new-language). As an example, we'll override the translations for Dutch language:
102
+
103
+
```tsx
104
+
const streami18n =newStreami18n();
105
+
106
+
streami18n.registerTranslation('nl', {
107
+
"Delete Message": "Verwijder bericht"
108
+
})
109
+
```
110
+
111
+
### Using device locale to set language
112
+
113
+
[`react-native-localize`](https://github.com/zoontek/react-native-localize#-react-native-localize) package provides a toolbox for React Native app localization.
114
+
You can use this package to access user preferred locale, and use it to set language for chat components:
115
+
116
+
```tsx
117
+
import*asRNLocalizefrom"react-native-localize";
118
+
const streami18n =newStreami18n();
56
119
57
-
The default language for `Streami18n` is English (en).
58
-
Currently seven total languages are provided out of the box.
React Native SDK uses [dayjs](https://day.js.org/en/) internally by default to format datetime stamp.
128
+
Dayjs is a lightweight alternative to Momentjs with the same modern API and has [locale support](https://day.js.org/docs/en/i18n/i18n) as well.
129
+
130
+
Dayjs provides locale config for plenty of languages, you can check the whole list of locale configs [here](https://github.com/iamkun/dayjs/tree/dev/src/locale)
131
+
132
+
You can either provide the dayjs locale config while registering
133
+
language with `Streami18n` (either via constructor or `registerTranslation()`) or you can provide your own Dayjs or Moment instance
134
+
to Streami18n constructor, which will be then used internally (using the language locale) in components.
135
+
136
+
```tsx
137
+
const i18n =newStreami18n({
138
+
language: 'nl',
139
+
dayjsLocaleConfigForLanguage: {
140
+
months: [...],
141
+
monthsShort: [...],
142
+
calendar: {
143
+
sameDay: '...'
144
+
}
145
+
}
146
+
});
147
+
```
59
148
60
-
- English (en)
61
-
- Dutch (nl)
62
-
- Russian (ru)
63
-
- Turkish (tr)
64
-
- French (fr)
65
-
- Italian (it)
66
-
- Hindi (hi)
149
+
You can add locale config for moment while registering translation via `registerTranslation` function:
150
+
151
+
```tsx
152
+
const i18n =newStreami18n();
153
+
154
+
i18n.registerTranslation(
155
+
'mr',
156
+
{
157
+
'Nothing yet...': 'काहीही नाही ...',
158
+
'{{ firstUser }} and {{ secondUser }} are typing...':
159
+
'{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
160
+
},
161
+
{
162
+
months: [...],
163
+
monthsShort: [...],
164
+
calendar: {
165
+
sameDay: '...'
166
+
}
167
+
}
168
+
);
169
+
```
170
+
171
+
Alternatively, you can use a utility library to handle DateTime by providing your own [`Moment`](https://momentjs.com/) object:
172
+
173
+
```tsx
174
+
import'moment/locale/nl';
175
+
import'moment/locale/it';
176
+
// or if you want to include all locales
177
+
import'moment/min/locales';
178
+
179
+
importMomentfrommoment
180
+
181
+
const i18n =newStreami18n({
182
+
language: 'nl',
183
+
DateTimeParser: Moment
184
+
})
185
+
```
186
+
187
+
Or by providing your own [Dayjs](https://day.js.org/docs/en/installation/installation) object:
188
+
189
+
```tsx
190
+
importDayjsfrom'dayjs'
191
+
192
+
import'dayjs/locale/nl';
193
+
import'dayjs/locale/it';
194
+
// or if you want to include all locales
195
+
import'dayjs/min/locales';
196
+
197
+
const i18n =newStreami18n({
198
+
language: 'nl',
199
+
DateTimeParser: Dayjs
200
+
})
201
+
```
202
+
203
+
If you would like to stick with English language for date-times in Stream components, you can set `disableDateTimeTranslations` to true.
204
+
205
+
### Translating messages
206
+
207
+
If your application has a userbase that speaks more than one language, Stream's Chat Client provides the option to automatically translate messages. For more information on using automatic machine translation for messages, see the [Chat Client Guide on Translation](https://getstream.io/chat/docs/react-native/translation/?language=javascript).
67
208
68
209
## Options
69
210
@@ -107,6 +248,17 @@ Use the default English language date-times instead of those dictated by the lan
107
248
### language
108
249
109
250
Language code for language to be used.
251
+
The following options are available:
252
+
253
+
- English (`en`)
254
+
- French (`fr`)
255
+
- Hindi (`hi`)
256
+
- Italian (`it`)
257
+
- Dutch (`nl`)
258
+
- Turkish (`tr`)
259
+
- Russian (`ru`)
260
+
- Japanese (`ja`)
261
+
- Korean (`ko`)
110
262
111
263
| TYPE | DEFAULT |
112
264
| - | - |
@@ -275,4 +427,4 @@ const t = await streami18n.setLanguage('nl');
0 commit comments