react-native-international-phone-number 0.6.1 → 0.6.3

package/README.md

@@ -58,6 +58,7 @@
 - [Customizing Lib](#customizing-lib)
   - [Dark Mode](#dark-mode)
   - [Custom Lib Styles](#custom-lib-styles)
+  - [Custom Placeholders/Messages](#custom-placeholdersmessages)
   - [Custom Modal Height](#custom-modal-height)
   - [Country Modal Disabled Mode](#country-modal-disabled-mode)
   - [Phone Input Disabled Mode](#phone-input-disabled-mode)
@@ -508,6 +509,19 @@ export default function App() {
   ...
 ```
 
+- ### Custom Placeholders/Messages:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    placeholder="Custom Phone Input Placeholder"
+    modalSearchInputPlaceholder="Custom Modal Search Input Placeholder"
+    modalNotFoundCountryMessage="Custom Modal Not Found Country Message"
+  />
+  ...
+```
+
 - ### Custom Modal Height:
 
 ```jsx
@@ -645,6 +659,8 @@ export default function App() {
 - `theme?:` [ITheme](lib/interfaces/theme.ts);
 - `phoneInputStyle?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
 - `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts);
+- `modalSearchInputPlaceholder?:` string;
+- `modalNotFoundCountryMessage?:` string;
 - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
 
 <br>

package/lib/index.js

@@ -53,6 +53,8 @@ const PhoneInput = forwardRef(
       customMask,
       showOnly,
       excludedCountries,
+      modalSearchInputPlaceholder,
+      modalNotFoundCountryMessage,
       ...rest
     },
     ref
@@ -94,6 +96,8 @@ const PhoneInput = forwardRef(
         customMask,
         showOnly,
         excludedCountries,
+        modalSearchInputPlaceholder,
+        modalNotFoundCountryMessage,
         ...rest,
       },
     };
@@ -318,14 +322,14 @@ const PhoneInput = forwardRef(
                 getPhoneNumberInputPlaceholder(language || 'en')
               }
               placeholderTextColor={
-                placeholderTextColor || theme === 'dark'
-                  ? '#CCCCCC'
-                  : '#AAAAAA'
+                placeholderTextColor ||
+                (theme === 'dark' ? '#CCCCCC' : '#AAAAAA')
               }
               selectionColor={
-                selectionColor || theme === 'dark'
+                selectionColor ||
+                (theme === 'dark'
                   ? 'rgba(255,255,255, .4)'
-                  : 'rgba(0 ,0 ,0 , .4)'
+                  : 'rgba(0 ,0 ,0 , .4)')
               }
               editable={!disabled}
               value={inputValue}
@@ -339,12 +343,14 @@ const PhoneInput = forwardRef(
             <CountryPicker
               show={show}
               lang={language}
-              inputPlaceholder={getSearchInputPlaceholder(
-                language || 'en'
-              )}
-              searchMessage={getCountryNotFoundMessage(
-                language || 'en'
-              )}
+              inputPlaceholder={
+                modalSearchInputPlaceholder ||
+                getSearchInputPlaceholder(language || 'en')
+              }
+              searchMessage={
+                modalNotFoundCountryMessage ||
+                getCountryNotFoundMessage(language || 'en')
+              }
               enableModalAvoiding
               style={getCountryPickerStyle(
                 theme,

package/lib/interfaces/phoneInputProps.ts

@@ -9,7 +9,7 @@ import { IModalStyles } from './modalStyles';
 import { IPhoneInputStyles } from './phoneInputStyles';
 import { IPhoneInputRef } from './phoneInputRef';
 
-interface IPhoneInputPropsWithoutRef extends TextInputProps {
+interface BasePhoneInput extends TextInputProps {
   language?: ILanguage;
   placeholder?: string;
   placeholderTextColor?: string;
@@ -22,36 +22,26 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   modalHeight?: number | string;
   defaultCountry?: ICountryCca2;
   defaultValue?: string;
+  customMask?: Array<string>;
+  showOnly?: Array<ICountryCca2>;
+  excludedCountries?: Array<ICountryCca2>;
+  modalSearchInputPlaceholder?: string;
+  modalNotFoundCountryMessage?: string;
+}
+
+interface IPhoneInputPropsWithoutRef extends BasePhoneInput {
   value: string;
   onChangePhoneNumber: (phoneNumber: string) => void;
   selectedCountry: ICountry | undefined | null;
   onChangeSelectedCountry: (country: ICountry) => void;
-  customMask?: Array<string>;
-  showOnly?: Array<ICountryCca2>;
-  excludedCountries?: Array<ICountryCca2>;
   ref?: never;
 }
 
-interface IPhoneInputPropsWithRef extends TextInputProps {
-  language?: ILanguage;
-  placeholder?: string;
-  placeholderTextColor?: string;
-  selectionColor?: string;
-  phoneInputStyle?: IPhoneInputStyles;
-  modalStyle?: IModalStyles;
-  theme?: ITheme;
-  disabled?: boolean;
-  modalDisabled?: boolean;
-  modalHeight?: number | string;
-  defaultCountry?: ICountryCca2;
-  defaultValue?: string;
+interface IPhoneInputPropsWithRef extends BasePhoneInput {
   value?: never;
   onChangePhoneNumber?: never;
   selectedCountry?: never;
   onChangeSelectedCountry?: never;
-  customMask?: Array<string>;
-  showOnly?: Array<ICountryCca2>;
-  excludedCountries?: Array<ICountryCca2>;
   ref: Ref<IPhoneInputRef>;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",