Added custom render function for dropdown Icon and placeholder prop

garganurag893 · Oct 6, 2020 · 72651a3 · 72651a3
1 parent 050587a
commit 72651a3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -130,9 +130,12 @@ export default App;
 - `defaultValue?`: string
 - `disabled?`: boolean
 - `disableArrowIcon?`: boolean
+- `placeholder?`: string;
 - `onChangeText?`: (text: string) => void;
 - `onChangeFormattedText?`: (text: string) => void;
 - `containerStyle?`: `StyleProp<ViewStyle>`;
+- `textContainerStyle?`: `StyleProp<ViewStyle>`;
+- `renderDropdownImage?`: `JSX.Element`;
 - `textInputProps?`: [TextInputProps](https://reactnative.dev/docs/textinput);
 - `textInputStyle?`: `StyleProp<TextStyle>`;
 - `codeTextStyle?`: `StyleProp<TextStyle>`;
@@ -142,7 +145,7 @@ export default App;
 
 - `getCountryCode`: () => [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L252)
 - `getCallingCode`: () => string | undefined
-- `isValidNumber`: (number: number) => boolean
+- `isValidNumber`: (number: string) => boolean
 
 ## FAQ
 
@@ -189,7 +192,6 @@ Reach out to me at one of the following places!
 [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)
 
 - **[MIT license](http://opensource.org/licenses/mit-license.php)**
-- Copyright 2020 © <a href="https://twitter.com/AnuragG94634191" target="_blank">Anurag Garg</a>.
 
 ## Hire
 

diff --git a/example/App.tsx b/example/App.tsx
@@ -14,6 +14,7 @@ const App = () => {
   const [value, setValue] = useState('');
   const [formattedValue, setFormattedValue] = useState('');
   const [valid, setValid] = useState(false);
+  const [disabled, setDisabled] = useState(false);
   const [showMessage, setShowMessage] = useState(false);
   const phoneInput = useRef<PhoneInput>(null);
   return (
@@ -38,6 +39,7 @@ const App = () => {
             onChangeFormattedText={(text) => {
               setFormattedValue(text);
             }}
+            disabled={disabled}
             withDarkTheme
             withShadow
             autoFocus
@@ -51,6 +53,13 @@ const App = () => {
             }}>
             <Text>Check</Text>
           </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => {
+              setDisabled(!disabled);
+            }}>
+            <Text>{disabled ? 'Activate' : 'Disable'}</Text>
+          </TouchableOpacity>
         </SafeAreaView>
       </View>
     </>

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -355,7 +355,6 @@ SPEC REPOS:
     - Flipper
     - Flipper-DoubleConversion
     - Flipper-Glog
-    - FlipperKit
   https://github.com/cocoapods/specs.git:
     - CocoaAsyncSocket
     - CocoaLibEvent

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3155,9 +3155,9 @@ globals@^12.1.0:
     type-fest "^0.8.1"
 
 google-libphonenumber@^3.2.10:
-  version "3.2.10"
-  resolved "https://registry.yarnpkg.com/google-libphonenumber/-/google-libphonenumber-3.2.10.tgz#021a314652747d736a39e2e60dc670f0431425ad"
-  integrity sha512-TsckE9O8QgqaIeaOXPjcJa4/kX3BzFdO1oCbMfmUpRZckml4xJhjJVxaT9Mdt/VrZZkT9lX44eHAEWfJK1tHtw==
+  version "3.2.13"
+  resolved "https://registry.yarnpkg.com/google-libphonenumber/-/google-libphonenumber-3.2.13.tgz#8f41f2ce1739d40e2b9ebccc75dca95474cdf0b5"
+  integrity sha512-USnpjJkD8St+wyshy154lF74JeauNCd8vrcusSlWjSFWitXzl7ZSuCunA/XxeVLqBv6DShrSfFMYdwGZ7x4hOw==
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.4"
@@ -5535,7 +5535,7 @@ react-native-country-picker-modal@^1.11.0:
     react-async-hook "3.6.1"
 
 react-native-phone-number-input@../:
-  version "1.0.0"
+  version "1.0.5"
   dependencies:
     google-libphonenumber "^3.2.10"
     react-native-country-picker-modal "^1.11.0"

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -13,8 +13,10 @@ export interface PhoneInputProps {
   defaultValue?: string;
   disabled?: boolean;
   disableArrowIcon?: boolean;
+  placeholder?: string;
   onChangeText?: (text: string) => void;
   onChangeFormattedText?: (text: string) => void;
+  renderDropdownImage?: JSX.Element;
   containerStyle?: StyleProp<ViewStyle>;
   textContainerStyle?: StyleProp<ViewStyle>;
   textInputProps?: TextInputProps;
@@ -288,7 +290,7 @@ export default class PhoneInput extends Component<
     | "HK"
     | "AX";
   getCallingCode: () => string | undefined;
-  isValidNumber: (number: number) => boolean;
+  isValidNumber: (number: string) => boolean;
   onSelect: (country: Country) => void;
   onChangeText: (text: string) => void;
   render(): JSX.Element;

diff --git a/lib/index.js b/lib/index.js
@@ -93,6 +93,16 @@ export default class PhoneInput extends Component {
     }
   };
 
+  renderDropdownImage = () => {
+    return (
+      <Image
+        source={{ uri: dropDown }}
+        resizeMode="contain"
+        style={styles.dropDownImage}
+      />
+    );
+  };
+
   render() {
     const {
       withShadow,
@@ -101,10 +111,13 @@ export default class PhoneInput extends Component {
       textInputProps,
       textInputStyle,
       autoFocus,
+      placeholder,
       disableArrowIcon,
       flagButtonStyle,
       containerStyle,
       textContainerStyle,
+      renderDropdownImage,
+      countryPickerProps = {},
     } = this.props;
     const { modalVisible, code, countryCode, number, disabled } = this.state;
     return (
@@ -135,13 +148,14 @@ export default class PhoneInput extends Component {
               visible={modalVisible}
               theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
               onClose={() => this.setState({ modalVisible: false })}
+              {...countryPickerProps}
             />
             {!disableArrowIcon && (
-              <Image
-                source={{ uri: dropDown }}
-                resizeMode="contain"
-                style={styles.dropDownImage}
-              />
+              <React.Fragment>
+                {renderDropdownImage
+                  ? renderDropdownImage
+                  : this.renderDropdownImage()}
+              </React.Fragment>
             )}
           </TouchableOpacity>
           <View
@@ -157,7 +171,7 @@ export default class PhoneInput extends Component {
             )}
             <TextInput
               style={[styles.numberText, textInputStyle ? textInputStyle : {}]}
-              placeholder="Phone Number"
+              placeholder={placeholder ? placeholder : "Phone Number"}
               onChangeText={this.onChangeText}
               value={number}
               editable={disabled ? false : true}