react-native-international-phone-number 0.7.6 → 0.8.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.
Files changed (9) hide show
  1. package/README.md +57 -10
  2. package/lib/constants/countries.js +256 -9
  3. package/lib/index.js +138 -88
  4. package/lib/interfaces/language.ts +2 -1
  5. package/lib/interfaces/phoneInputProps.ts +4 -0
  6. package/lib/styles.js +4 -1
  7. package/lib/utils/getInputMask.js +14 -2
  8. package/lib/utils/getPlaceholders.js +6 -0
  9. package/package.json +2 -2
package/README.md CHANGED
@@ -71,6 +71,8 @@
71
71
  - [Show Only Some Countries Inside Modal](#show-only-some-countries)
72
72
  - [Exclude some countries Inside Modal](#exclude-some-countries)
73
73
  - [Show Popular Countries at the Top of the Countries List Inside Modal](#show-popular-countries-at-the-top-of-the-countries-list-inside-modal)
74
+ - [Right to Left Input](#right-to-left-input)
75
+ - [Dont allow Zero After Calling Code](#dont-allow-zero-after-calling-code)
74
76
  - [Lib Props](#component-props-phoneinputprops)
75
77
  - [Lib Functions](#functions)
76
78
  - [Supported languages](#🎌-supported-languages-🎌)
@@ -81,6 +83,7 @@
81
83
 
82
84
  ## Old Versions
83
85
 
86
+ - [Version 0.7.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.7.x)
84
87
  - [Version 0.6.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.6.x)
85
88
  - [Version 0.5.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.5.x)
86
89
  - [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
@@ -106,7 +109,7 @@ $ yarn add react-native-international-phone-number
106
109
  create a `react-native.config.js` file at the root of your react-native project with:
107
110
 
108
111
  ```bash
109
- module.exports = {
112
+ module.exports = {
110
113
  project: {
111
114
  ios: {},
112
115
  android: {},
@@ -114,7 +117,7 @@ create a `react-native.config.js` file at the root of your react-native project
114
117
  assets: [
115
118
  './node_modules/react-native-international-phone-number/lib/assets/fonts',
116
119
  ],
117
- };
120
+ };
118
121
  ```
119
122
 
120
123
  Then link the font to your native projects with:
@@ -125,19 +128,32 @@ npx react-native-asset
125
128
 
126
129
  - Using Expo:
127
130
 
128
- 1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
129
- 2. Initialize the `expo-font`:
131
+ 1. Change the `app.json` file to:
130
132
 
131
133
  ```bash
132
- import { useFonts } from 'expo-font';
134
+ ...
135
+
136
+ "web": {
137
+ ...
138
+ "output": "single",
139
+ ...
140
+ },
141
+ ...
142
+ ```
143
+
144
+ 2. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
145
+ 3. Initialize the `expo-font`:
133
146
 
134
- ...
147
+ ```bash
148
+ import { useFonts } from 'expo-font';
149
+
150
+ ...
135
151
 
136
- useFonts({
152
+ useFonts({
137
153
  'TwemojiMozilla': require('./node_modules/react-native-international-phone-number/lib/assets/fonts/TwemojiMozilla.woff2'),
138
154
  });
139
155
 
140
- ...
156
+ ...
141
157
  ```
142
158
 
143
159
  > Observation: _you need to recompile your project after adding new fonts._
@@ -673,6 +689,32 @@ export default function App() {
673
689
  <PhoneInput
674
690
  ...
675
691
  popularCountriess={['BR', 'PT', 'CA', 'US']}
692
+ popularCountriesSectionTitle='Suggested'
693
+ restOfCountriesSectionTitle='All'
694
+ />
695
+ ...
696
+ ```
697
+
698
+ - ### Right to Left Input:
699
+
700
+ ```jsx
701
+ import { I18nManager } from "react-native";
702
+
703
+ ...
704
+ <PhoneInput
705
+ ...
706
+ rtl={I18nManager.isRTL}
707
+ />
708
+ ...
709
+ ```
710
+
711
+ - ### Don't allow Zero After Calling Code:
712
+
713
+ ```jsx
714
+ ...
715
+ <PhoneInput
716
+ ...
717
+ allowZeroAfterCallingCode={false}
676
718
  />
677
719
  ...
678
720
  ```
@@ -692,6 +734,9 @@ export default function App() {
692
734
  - `showOnly?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
693
735
  - `excludedCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
694
736
  - `popularCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
737
+ - `popularCountriesSectionTitle?:` string;
738
+ - `restOfCountriesSectionTitle?:` string;
739
+ - `rtl?:` boolean;
695
740
  - `disabled?:` boolean;
696
741
  - `modalDisabled?:` boolean;
697
742
  - `modalHeight?:` number | string;
@@ -703,7 +748,8 @@ export default function App() {
703
748
  - `modalSearchInputSelectionColor?:` string;
704
749
  - `modalNotFoundCountryMessage?:` string;
705
750
  - `customCaret?:` [ReactNode](https://reactnative.dev/docs/react-node);
706
- - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
751
+ - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>;
752
+ - `allowZeroAfterCallingCode?:` boolean
707
753
 
708
754
  <br>
709
755
 
@@ -741,7 +787,8 @@ export default function App() {
741
787
  "ru": "Russian",
742
788
  "ua": "Ukrainian",
743
789
  "zh": "Chinese (Simplified)",
744
- "ar": "Arabic"
790
+ "ar": "Arabic",
791
+ "tr": "Turkish"
745
792
  },
746
793
  ```
747
794