react-native-country-select 0.1.3 โ 0.2.1
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/README.md +84 -27
- package/lib/assets/fonts/TwemojiMozilla.woff2 +0 -0
- package/lib/assets/images/preview.png +0 -0
- package/lib/components/CountryItem/index.tsx +26 -6
- package/lib/components/CountrySelect/index.tsx +391 -77
- package/lib/components/{styles.ts โ styles.js} +56 -5
- package/lib/constants/countries.json +1078 -4020
- package/lib/index.d.ts +34 -0
- package/lib/index.tsx +25 -0
- package/lib/interface/countryItemProps.ts +1 -0
- package/lib/interface/countrySelectProps.ts +10 -4
- package/lib/interface/countrySelectStyles.ts +8 -0
- package/lib/utils/countryHelpers.ts +59 -0
- package/lib/utils/getTranslation.ts +37 -1
- package/lib/utils/parseHeight.ts +35 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -47,11 +47,13 @@
|
|
|
47
47
|
|
|
48
48
|
## Features
|
|
49
49
|
|
|
50
|
-
- ๐ฑ Cross-
|
|
51
|
-
-
|
|
52
|
-
-
|
|
53
|
-
-
|
|
54
|
-
-
|
|
50
|
+
- ๐ฑ **Cross-Platform** โ Works seamlessly on **iOS, Android and Web**;
|
|
51
|
+
- ๐งฉ **Flexible Integration** โ Supports both **React Native CLI & Expo**;
|
|
52
|
+
- ๐จ **Modern UI** - Custom component with sleek design;
|
|
53
|
+
- ๐จโ๐ป **Component Versatility** - Works with **functional & class components**;
|
|
54
|
+
- ๐ถ **internationalization** - Supports **32 languages**;
|
|
55
|
+
- ๐งช **Test Ready** โ Smooth testing integration;
|
|
56
|
+
- โฟ **Accessibility** โ Accessibility standards to screen readers.
|
|
55
57
|
|
|
56
58
|
<br>
|
|
57
59
|
|
|
@@ -71,6 +73,51 @@ yarn add react-native-country-select
|
|
|
71
73
|
|
|
72
74
|
<br>
|
|
73
75
|
|
|
76
|
+
## Additional config to WEB
|
|
77
|
+
|
|
78
|
+
- ### Using React Native CLI:
|
|
79
|
+
|
|
80
|
+
Create a `react-native.config.js` file at the root of your react-native project with:
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
module.exports = {
|
|
84
|
+
project: {
|
|
85
|
+
ios: {},
|
|
86
|
+
android: {},
|
|
87
|
+
},
|
|
88
|
+
assets: [
|
|
89
|
+
'./node_modules/react-native-country-select/lib/assets/fonts',
|
|
90
|
+
],
|
|
91
|
+
};
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Then link the font to your native projects with:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
npx react-native-asset
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
- ### Using Expo:
|
|
101
|
+
|
|
102
|
+
1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
|
|
103
|
+
2. Initialize the `expo-font`:
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
import { useFonts } from 'expo-font';
|
|
107
|
+
|
|
108
|
+
...
|
|
109
|
+
|
|
110
|
+
useFonts({
|
|
111
|
+
'TwemojiMozilla': require('./node_modules/react-native-country-select/lib/assets/fonts/TwemojiMozilla.woff2'),
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
...
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
> Observation: you need to recompile your project after adding new fonts.
|
|
118
|
+
|
|
119
|
+
<br>
|
|
120
|
+
|
|
74
121
|
## Basic Usage
|
|
75
122
|
|
|
76
123
|
- Class Component
|
|
@@ -201,28 +248,35 @@ export default function App() {
|
|
|
201
248
|
|
|
202
249
|
## CountrySelect Props
|
|
203
250
|
|
|
204
|
-
| Prop | Type
|
|
205
|
-
| ---------------------------- |
|
|
206
|
-
| visible | boolean
|
|
207
|
-
| onClose | () => void
|
|
208
|
-
| onSelect | (country: ICountry) => void
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
|
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
218
|
-
|
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
224
|
-
|
|
|
225
|
-
|
|
|
251
|
+
| Prop | Type | Required | Default | Description |
|
|
252
|
+
| ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | ---------------------------------------------------------- |
|
|
253
|
+
| visible | boolean | Yes | false | Controls the visibility of the country picker modal |
|
|
254
|
+
| onClose | () => void | Yes | - | Callback function called when the modal is closed |
|
|
255
|
+
| onSelect | (country: [ICountry](lib/interfaces/country.ts)) => void | Yes | - | Callback function called when a country is selected |
|
|
256
|
+
| modalType | 'bottomSheet' \| 'popup' | No | 'bottomSheet' | Type of modal to display |
|
|
257
|
+
| countrySelectStyle | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts) | No | - | Custom styles for the country picker |
|
|
258
|
+
| isFullScreen | boolean | No | false | Whether the modal should be full screen |
|
|
259
|
+
| popularCountries | string[] | No | [] | Array of country codes to show in popular section |
|
|
260
|
+
| visibleCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to show (whitelist) |
|
|
261
|
+
| hiddenCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to hide (blacklist) |
|
|
262
|
+
| theme | 'light' \| 'dark' | No | 'light' | Theme for the country picker |
|
|
263
|
+
| language | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts) | No | 'eng' | Language for country names (see supported languages below) |
|
|
264
|
+
| showSearchInput | boolean | No | true | Whether to show the search input field |
|
|
265
|
+
| searchPlaceholder | string | No | 'Search country...' | Placeholder text for search input |
|
|
266
|
+
| minBottomsheetHeight | number \| string | No | 30% | Minimum height for bottom sheet modal |
|
|
267
|
+
| maxBottomsheetHeight | number \| string | No | 80% | Maximum height for bottom sheet modal |
|
|
268
|
+
| initialBottomsheetHeight | number \| string | No | 50% | Initial height for bottom sheet modal |
|
|
269
|
+
| disabledBackdropPress | boolean | No | false | Whether to disable backdrop press to close |
|
|
270
|
+
| removedBackdrop | boolean | No | false | Whether to remove the backdrop completely |
|
|
271
|
+
| onBackdropPress | () => void | No | - | Custom callback for backdrop press |
|
|
272
|
+
| countryItemComponent | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | - | Custom component for country items |
|
|
273
|
+
| sectionTitleComponent | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No | - | Custom component for section titles |
|
|
274
|
+
| closeButtonComponent | () => ReactElement | No | - | Custom component for closeButton |
|
|
275
|
+
| showCloseButton | boolean | No | false | Whether to show the close button |
|
|
276
|
+
| popularCountriesTitle | string | No | 'Popular Countries' | Popular Countries section title |
|
|
277
|
+
| allCountriesTitle | string | No | 'All Countries' | All Countries section title |
|
|
278
|
+
| showsVerticalScrollIndicator | boolean | No | false | Displays a horizontal scroll indicator |
|
|
279
|
+
| countryNotFoundMessage | string | No | "No countries found" | Country not found in search |
|
|
226
280
|
|
|
227
281
|
<br>
|
|
228
282
|
|
|
@@ -274,8 +328,11 @@ When utilizing this package, you may need to target the CountrySelect component
|
|
|
274
328
|
|
|
275
329
|
```js
|
|
276
330
|
const countrySelect = getByTestId('countrySelectSearchInput');
|
|
331
|
+
const countrySelectBackdrop = getByTestId('countrySelectBackdrop');
|
|
277
332
|
const countrySelectList = getByTestId('countrySelectList');
|
|
333
|
+
const countrySelectSearchInput = getByTestId('countrySelectSearchInput');
|
|
278
334
|
const countrySelectItem = getByTestId('countrySelectItem');
|
|
335
|
+
const countrySelectCloseButton = getByTestId('countrySelectCloseButton');
|
|
279
336
|
```
|
|
280
337
|
|
|
281
338
|
<br>
|
|
Binary file
|
|
Binary file
|
|
@@ -13,6 +13,7 @@ export const CountryItem = memo<ICountryItemProps>(
|
|
|
13
13
|
onClose,
|
|
14
14
|
theme = 'light',
|
|
15
15
|
language,
|
|
16
|
+
modalType,
|
|
16
17
|
countrySelectStyle,
|
|
17
18
|
}) => {
|
|
18
19
|
const styles = createStyles(theme);
|
|
@@ -23,23 +24,40 @@ export const CountryItem = memo<ICountryItemProps>(
|
|
|
23
24
|
accessibilityRole="button"
|
|
24
25
|
accessibilityLabel="Country Select Item"
|
|
25
26
|
accessibilityHint="Click to select a country"
|
|
26
|
-
style={[
|
|
27
|
+
style={[
|
|
28
|
+
styles.countryItem,
|
|
29
|
+
modalType === 'popup'
|
|
30
|
+
? countrySelectStyle?.popup?.countryItem
|
|
31
|
+
: countrySelectStyle?.bottomSheet?.countryItem,
|
|
32
|
+
]}
|
|
27
33
|
onPress={() => {
|
|
28
34
|
onSelect(item);
|
|
29
35
|
onClose();
|
|
30
36
|
}}>
|
|
31
37
|
<Text
|
|
32
38
|
testID="countrySelectItemFlag"
|
|
33
|
-
style={[
|
|
34
|
-
|
|
39
|
+
style={[
|
|
40
|
+
styles.flag,
|
|
41
|
+
modalType === 'popup'
|
|
42
|
+
? countrySelectStyle?.popup?.flag
|
|
43
|
+
: countrySelectStyle?.bottomSheet?.flag,
|
|
44
|
+
]}>
|
|
45
|
+
{item.flag || item.cca2}
|
|
35
46
|
</Text>
|
|
36
47
|
<View
|
|
37
|
-
style={[
|
|
48
|
+
style={[
|
|
49
|
+
styles.countryInfo,
|
|
50
|
+
modalType === 'popup'
|
|
51
|
+
? countrySelectStyle?.popup?.countryInfo
|
|
52
|
+
: countrySelectStyle?.bottomSheet?.countryInfo,
|
|
53
|
+
]}>
|
|
38
54
|
<Text
|
|
39
55
|
testID="countrySelectItemCallingCode"
|
|
40
56
|
style={[
|
|
41
57
|
styles.callingCode,
|
|
42
|
-
|
|
58
|
+
modalType === 'popup'
|
|
59
|
+
? countrySelectStyle?.popup?.callingCode
|
|
60
|
+
: countrySelectStyle?.bottomSheet?.callingCode,
|
|
43
61
|
]}>
|
|
44
62
|
{item.idd.root}
|
|
45
63
|
</Text>
|
|
@@ -47,7 +65,9 @@ export const CountryItem = memo<ICountryItemProps>(
|
|
|
47
65
|
testID="countrySelectItemName"
|
|
48
66
|
style={[
|
|
49
67
|
styles.countryName,
|
|
50
|
-
|
|
68
|
+
modalType === 'popup'
|
|
69
|
+
? countrySelectStyle?.popup?.countryName
|
|
70
|
+
: countrySelectStyle?.bottomSheet?.countryName,
|
|
51
71
|
]}>
|
|
52
72
|
{item?.translations[language]?.common ||
|
|
53
73
|
item?.translations[DEFAULT_LANGUAGE]?.common}
|