react-native-nitro-country-picker 0.1.0 → 0.1.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 +52 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,30 @@
|
|
|
1
1
|
# react-native-nitro-country-picker
|
|
2
2
|
|
|
3
|
-
A native country picker for React Native, powered by Nitro Modules.
|
|
3
|
+
A Promise-based, native country picker for React Native, powered by Nitro Modules.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/react-native-nitro-country-picker)
|
|
6
|
+
[](https://www.npmjs.com/package/react-native-nitro-country-picker)
|
|
7
|
+
[](https://reactnative.dev/docs/the-new-architecture/landing-page)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
9
|
+
[](LICENSE)
|
|
10
|
+
[](https://developer.apple.com/ios/)
|
|
11
|
+
[](https://developer.android.com/)
|
|
12
|
+
[](https://nitro.margelo.com/)
|
|
13
|
+
|
|
14
|
+
| Preview 1 | Preview 2 |
|
|
15
|
+
| ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
16
|
+
| <img width="350" height="781" alt="Image" src="https://github.com/user-attachments/assets/4205fe25-c4db-47a2-82b9-0c37ed1dda79" /> | <img width="350" alt="Image" src="https://github.com/user-attachments/assets/e639b1e0-d702-4d93-9444-12528d560942" /> |
|
|
4
17
|
|
|
5
18
|
This library provides a single async API that opens a native picker and returns structured country data.
|
|
6
19
|
|
|
20
|
+
I created this library because I kept running into cases where I needed to implement a country code picker. There are several options, but they are either JS-only solutions with a declarative API (often with poor performance) or noticeably laggy.
|
|
21
|
+
|
|
22
|
+
All I wanted was a module with a single `pickCountry` method that returns country data. Done. No hassle. The UI should include a list and a simple search bar. It can be customized, but for now it should stay as simple as possible.
|
|
23
|
+
|
|
7
24
|
- Android native implementation: [CountryCodePickerCompose](https://github.com/ahmmedrejowan/CountryCodePickerCompose)
|
|
8
25
|
- iOS native implementation: [CountryPickerAKS](https://github.com/aksamitsah/CountryPickerAKS)
|
|
9
26
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
- Native picker UI on both iOS and Android
|
|
13
|
-
- Promise-based API: `pickCountry(options?)`
|
|
14
|
-
- Typed result object with `name`, `dialCode`, and `code`
|
|
15
|
-
- `null` result when user dismisses without selection
|
|
16
|
-
- Last selection cache via `getLastPickedCountry()`
|
|
17
|
-
- Optional picker title input: `headerTitle` (currently applied on Android)
|
|
27
|
+
---
|
|
18
28
|
|
|
19
29
|
## Requirements
|
|
20
30
|
|
|
@@ -25,6 +35,20 @@ This library provides a single async API that opens a native picker and returns
|
|
|
25
35
|
|
|
26
36
|
> Note: This package depends on [react-native-nitro-modules](https://nitro.margelo.com/).
|
|
27
37
|
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Features
|
|
41
|
+
|
|
42
|
+
- 📱 **Native UI**: Uses native picker interfaces on both iOS and Android.
|
|
43
|
+
- ⚡ **Promise-Based API**: Call `pickCountry(options?)` and await the result.
|
|
44
|
+
- 🔷 **Typed Return Data**: Returns a typed object with `name`, `dialCode`, and `code`.
|
|
45
|
+
- 🧭 **Dismiss Handling**: Resolves to `null` when the picker is dismissed or canceled.
|
|
46
|
+
- 🧠 **Last Selection Cache**: Read the last picked country with `getLastPickedCountry()`.
|
|
47
|
+
- 🎛️ **Configurable Title**: Supports `headerTitle` (currently applied on Android).
|
|
48
|
+
- 🧩 **Nitro Module Powered**: Built with `react-native-nitro-modules` for native performance.
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
28
52
|
## Installation
|
|
29
53
|
|
|
30
54
|
```bash
|
|
@@ -37,12 +61,18 @@ or
|
|
|
37
61
|
yarn add react-native-nitro-country-picker react-native-nitro-modules
|
|
38
62
|
```
|
|
39
63
|
|
|
40
|
-
### iOS
|
|
64
|
+
### iOS Setup
|
|
41
65
|
|
|
42
66
|
```bash
|
|
43
67
|
cd ios && pod install
|
|
44
68
|
```
|
|
45
69
|
|
|
70
|
+
### Android Setup
|
|
71
|
+
|
|
72
|
+
No additional configuration is required for Android. Autolinking handles the native module setup.
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
46
76
|
## Usage
|
|
47
77
|
|
|
48
78
|
```tsx
|
|
@@ -61,6 +91,8 @@ const country = await pickCountry({
|
|
|
61
91
|
});
|
|
62
92
|
```
|
|
63
93
|
|
|
94
|
+
---
|
|
95
|
+
|
|
64
96
|
## Returned Data Examples
|
|
65
97
|
|
|
66
98
|
### 1) Handle selected vs dismissed
|
|
@@ -108,6 +140,8 @@ if (last) {
|
|
|
108
140
|
}
|
|
109
141
|
```
|
|
110
142
|
|
|
143
|
+
---
|
|
144
|
+
|
|
111
145
|
## API
|
|
112
146
|
|
|
113
147
|
### `pickCountry(options?) => Promise<IPickedCountry | null>`
|
|
@@ -125,6 +159,8 @@ Options:
|
|
|
125
159
|
|
|
126
160
|
Returns the most recent selected country for the current app runtime session.
|
|
127
161
|
|
|
162
|
+
---
|
|
163
|
+
|
|
128
164
|
## Type Shapes
|
|
129
165
|
|
|
130
166
|
```ts
|
|
@@ -139,6 +175,8 @@ type PickCountryOptions = {
|
|
|
139
175
|
};
|
|
140
176
|
```
|
|
141
177
|
|
|
178
|
+
---
|
|
179
|
+
|
|
142
180
|
## Example App
|
|
143
181
|
|
|
144
182
|
To run the included example app:
|
|
@@ -151,10 +189,14 @@ yarn ios
|
|
|
151
189
|
yarn android
|
|
152
190
|
```
|
|
153
191
|
|
|
192
|
+
---
|
|
193
|
+
|
|
154
194
|
## Contributing
|
|
155
195
|
|
|
156
196
|
See [CONTRIBUTING.md](CONTRIBUTING.md) for development workflow and contribution guidelines.
|
|
157
197
|
|
|
198
|
+
---
|
|
199
|
+
|
|
158
200
|
## License
|
|
159
201
|
|
|
160
202
|
MIT
|
package/package.json
CHANGED