feat: implement callingCodeEditable prop

Author: anday013

README.md

@@ -10,17 +10,17 @@
 
 - 🌍 International phone number input with country picker
 - 📱 Automatic phone number formatting based on country
+- 🔍 Dynamic country and mask adaptation based on typed country code
 - ✨ Highly customizable appearance and styling
 - 🎯 Phone number validation using Google's libphonenumber
-- 📦 Easy integration with React Native projects
-- 🔍 Country search functionality
 - 🎨 Dark theme support
 - ♿ Accessibility support
 - 💪 Written in TypeScript
 
 ## TODO
 
-- [ ] Add unit tests
+- [ ] Fix defaultProp issue with picker library
+- [ ] Make similar UI with OTP lib
 - [ ] Add Error state
 - [ ] Make fully customizable
 

example/src/App.tsx

@@ -7,6 +7,7 @@ export default function App() {
       <PhoneInput
         onChangeCountry={(country) => console.log('country changed:', country)}
         onChangeText={(text) => console.log('text changed:', text)}
+        callingCodeEditable={false}
         theme={{
           withShadow: true,
         }}

package.json

@@ -39,6 +39,7 @@
   "scripts": {
     "example": "yarn workspace react-native-phone-entry-example",
     "test": "jest",
+    "test:watch": "jest --watch",
     "test:coverage": "jest --collectCoverage --coverageDirectory=\"./coverage\"",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",

src/PhoneInput/PhoneInput.types.ts

@@ -26,6 +26,7 @@ export type PhoneInputProps = {
   maskInputProps?: MaskInputProps;
   countryPickerProps?: Parameters<typeof CountryPicker>[0];
   flagProps?: Parameters<typeof Flag>[0];
+  callingCodeEditable?: boolean;
 };
 interface Theme {
   containerStyle?: StyleProp<ViewStyle>;

src/PhoneInput/styles.ts

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
     height: hp(7),
     minHeight: 56,
     borderWidth: 1,
-    borderColor: '#E5E7EB',
+    borderColor: '#DFDFDE',
   },
   flagButtonView: {
     width: '25%',

src/PhoneInput/usePhoneInput.ts

@@ -15,6 +15,7 @@ export const usePhoneInput = ({
   value,
   onChangeCountry,
   onChangeText,
+  callingCodeEditable = true,
 }: PhoneInputProps) => {
   const inputRef = useRef<TextInput | null>();
   const [callingCode, setCallingCode] = useState<CallingCode>(
@@ -58,11 +59,12 @@ export const usePhoneInput = ({
   const handleChangeText = useCallback(
     (_masked: string, unmasked: string, _obfuscated: string) => {
       const text = ensurePlusPrefix(unmasked);
+      if (!callingCodeEditable && text.length < callingCode.length) return;
       updateCountryOnType(text);
       setPhoneNumber(text);
       onChangeText?.(text);
     },
-    [updateCountryOnType, onChangeText]
+    [callingCodeEditable, callingCode.length, updateCountryOnType, onChangeText]
   );
 
   return {