Changes:
- Replace react-native-international-phone-number with PhoneInputCustom
- Remove ICountry dependency, use CountryData from constants
- Update state management (inputValue → phoneNumber)
- Improve phone number formatting logic
- Add handleCountryChange for better country switching
Features Applied:
✅ NO emoji flags - only calling codes (+62, +65, etc)
✅ Clean, professional UI
✅ Modal country picker with search
✅ Real-time phone number formatting
✅ Auto-update country code on change
✅ Consistent with LoginView implementation
Phone Input Logic:
- Format on every phone change
- Re-format when country changes
- Remove duplicate country codes
- Remove leading zeros
- Store E.164 format in API data
UI:
- Phone Input: [+62 ⌄ | xxx-xxx-xxx]
- Country Picker: Modal with search
- Display: Country name + calling code only
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
New Components:
- PhoneInputCustom: Reusable phone input without emoji flags
- constants/countries.ts: Country data with calling codes only
Features:
✅ NO emoji flags - only country name + calling code (+62, +65, etc)
✅ Clean, professional UI
✅ Modal country picker with search
✅ 15 countries supported
✅ Helper functions: getCountryByCallingCode, getCountryByCode, searchCountries
✅ Fully typed with TypeScript
✅ Reusable across the app
✅ Maximum compatibility (no emoji rendering issues)
UI Design:
- Phone Input: [+62 ⌄ | 812-3456-7890]
- Country Picker: Modal with search
- Display: Country name + calling code only
Usage:
import { PhoneInputCustom } from '@/components';
import { DEFAULT_COUNTRY } from '@/constants/countries';
<PhoneInputCustom
value={phoneNumber}
onChangePhoneNumber={setPhoneNumber}
selectedCountry={selectedCountry}
onChangeCountry={setSelectedCountry}
/>
Benefits:
✅ Works on ALL iOS versions (no emoji issues)
✅ Consistent across all platforms
✅ Faster render (no emoji/image loading)
✅ Cleaner code structure
✅ Easy to maintain
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
