From 2c9f5b475daf9bebc64ff01e07eac2ba8747ac4a Mon Sep 17 00:00:00 2001 From: sohantalukder Date: Wed, 8 Jan 2025 23:41:39 +0600 Subject: [PATCH] fix: resolve issues and improve performance in input component --- .DS_Store | Bin 8196 -> 8196 bytes .github/workflows/ci.yml | 210 +++++----- ReadMe.md | 15 +- example/android/build.gradle | 4 +- package.json | 2 +- src/index.d.ts | 6 +- src/index.tsx | 69 ++-- src/main/constants/constants.ts | 384 +++++++++--------- .../country-picker/CountryPickerModal.tsx | 121 +++--- src/main/country-picker/Picker.d.ts | 10 +- src/main/country-picker/Picker.tsx | 31 +- .../country-picker/styles/picker.style.ts | 33 +- src/styles.d.ts | 4 +- src/styles.ts | 38 +- 14 files changed, 482 insertions(+), 445 deletions(-) diff --git a/.DS_Store b/.DS_Store index e89deed4601ff1f9338be3d3b14bef4f47a072ba..ecc4c14fb55c9c1e7add45934f5935a9d992e5f2 100644 GIT binary patch delta 45 wcmZp1XmOa}&nUYwU^hRb>|`E+&x}T!1jAT1cZk+AO>8jQ%r4>23gzen08@C{Gw3%JPpB0aab|wJEY!r t.task === 'build:android').cache.status") - - if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then - echo "turbo_cache_hit=1" >> $GITHUB_ENV - fi - - - name: Install JDK - if: env.turbo_cache_hit != 1 - uses: actions/setup-java@v3 - with: - distribution: 'zulu' - java-version: '17' - - - name: Finalize Android SDK - if: env.turbo_cache_hit != 1 - run: | - /bin/bash -c "yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses > /dev/null" - - - name: Cache Gradle - if: env.turbo_cache_hit != 1 - uses: actions/cache@v3 - with: - path: | - ~/.gradle/wrapper - ~/.gradle/caches - key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }} - restore-keys: | - ${{ runner.os }}-gradle- - - - name: Build example for Android - env: - JAVA_OPTS: "-XX:MaxHeapSize=6g" - run: | - yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" - - build-ios: - runs-on: macos-14 - env: - TURBO_CACHE_DIR: .turbo/ios - steps: - - name: Checkout - uses: actions/checkout@v3 - - - name: Setup - uses: ./.github/actions/setup - - - name: Cache turborepo for iOS - uses: actions/cache@v3 - with: - path: ${{ env.TURBO_CACHE_DIR }} - key: ${{ runner.os }}-turborepo-ios-${{ hashFiles('yarn.lock') }} - restore-keys: | - ${{ runner.os }}-turborepo-ios- - - - name: Check turborepo cache for iOS - run: | - TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status") - - if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then - echo "turbo_cache_hit=1" >> $GITHUB_ENV - fi - - - name: Cache cocoapods - if: env.turbo_cache_hit != 1 - id: cocoapods-cache - uses: actions/cache@v3 - with: - path: | - **/ios/Pods - key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }} - restore-keys: | - ${{ runner.os }}-cocoapods- - - - name: Install cocoapods - if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true' - run: | - cd example/ios - pod install - env: - NO_FLIPPER: 1 - - - name: Build example for iOS - run: | - yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" + # build-android: + # runs-on: ubuntu-latest + # env: + # TURBO_CACHE_DIR: .turbo/android + # steps: + # - name: Checkout + # uses: actions/checkout@v3 + + # - name: Setup + # uses: ./.github/actions/setup + + # - name: Cache turborepo for Android + # uses: actions/cache@v3 + # with: + # path: ${{ env.TURBO_CACHE_DIR }} + # key: ${{ runner.os }}-turborepo-android-${{ hashFiles('yarn.lock') }} + # restore-keys: | + # ${{ runner.os }}-turborepo-android- + + # - name: Check turborepo cache for Android + # run: | + # TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:android').cache.status") + + # if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then + # echo "turbo_cache_hit=1" >> $GITHUB_ENV + # fi + + # - name: Install JDK + # if: env.turbo_cache_hit != 1 + # uses: actions/setup-java@v3 + # with: + # distribution: 'zulu' + # java-version: '17' + + # - name: Finalize Android SDK + # if: env.turbo_cache_hit != 1 + # run: | + # /bin/bash -c "yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses > /dev/null" + + # - name: Cache Gradle + # if: env.turbo_cache_hit != 1 + # uses: actions/cache@v3 + # with: + # path: | + # ~/.gradle/wrapper + # ~/.gradle/caches + # key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }} + # restore-keys: | + # ${{ runner.os }}-gradle- + + # - name: Build example for Android + # env: + # JAVA_OPTS: "-XX:MaxHeapSize=6g" + # run: | + # yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" + + # build-ios: + # runs-on: macos-14 + # env: + # TURBO_CACHE_DIR: .turbo/ios + # steps: + # - name: Checkout + # uses: actions/checkout@v3 + + # - name: Setup + # uses: ./.github/actions/setup + + # - name: Cache turborepo for iOS + # uses: actions/cache@v3 + # with: + # path: ${{ env.TURBO_CACHE_DIR }} + # key: ${{ runner.os }}-turborepo-ios-${{ hashFiles('yarn.lock') }} + # restore-keys: | + # ${{ runner.os }}-turborepo-ios- + + # - name: Check turborepo cache for iOS + # run: | + # TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status") + + # if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then + # echo "turbo_cache_hit=1" >> $GITHUB_ENV + # fi + + # - name: Cache cocoapods + # if: env.turbo_cache_hit != 1 + # id: cocoapods-cache + # uses: actions/cache@v3 + # with: + # path: | + # **/ios/Pods + # key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }} + # restore-keys: | + # ${{ runner.os }}-cocoapods- + + # - name: Install cocoapods + # if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true' + # run: | + # cd example/ios + # pod install + # env: + # NO_FLIPPER: 1 + + # - name: Build example for iOS + # run: | + # yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" diff --git a/ReadMe.md b/ReadMe.md index 3742758..cf6f027 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1,10 +1,21 @@ # rn-phone-input-field -`rn-phone-input-field` is a React Native component for a customizable phone number input with country code selection and validation. +`rn-phone-input-field` is a powerful and fully customizable React Native component designed for seamless phone number input, complete with a built-in country code selector and validation capabilities. It offers developers the flexibility to tailor every aspect of the component through an extensive range of props, making it adaptable to a wide variety of design and functional requirements. + +One of its standout features is that it is implemented **without any dependencies**, ensuring a lightweight and performance-focused solution. This approach minimizes package bloat and allows for smooth integration into projects of any size. ## Description -`rn-phone-input-field` provides an intuitive and user-friendly way to input and validate phone numbers in React Native applications. It supports automatic country code detection, customizable styles, and additional features to ensure seamless integration into your project. +`rn-phone-input-field` provides an intuitive and user-friendly way to input and validate phone numbers in React Native applications. It is designed to streamline the user experience with features like automatic country code detection, validation, and a customizable UI that fits seamlessly into any design system. + +This component offers: +- **Automatic Country Code Detection**: Easily identifies the user's country code for a smooth experience. +- **Full Customization**: Modify styles, behavior, and features through props to match your application's requirements. +- **Validation Built-In**: Ensures the phone number format adheres to the selected countryโ€™s standards. + +One of its key advantages is that it is built **without any dependencies**, making it lightweight and ensuring no additional bloat in your project. + +With `rn-phone-input-field`, developers can effortlessly integrate a flexible, performant, and feature-rich phone number input field into their applications, improving both functionality and user experience. ## Installation diff --git a/example/android/build.gradle b/example/android/build.gradle index a9ea023..c83c9a0 100644 --- a/example/android/build.gradle +++ b/example/android/build.gradle @@ -1,8 +1,8 @@ buildscript { ext { - buildToolsVersion = "35.0.0" + buildToolsVersion = "34.0.0" minSdkVersion = 24 - compileSdkVersion = 35 + compileSdkVersion = 34 targetSdkVersion = 34 ndkVersion = "26.1.10909125" kotlinVersion = "1.9.24" diff --git a/package.json b/package.json index ec022b9..96c887f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rn-phone-input-field", - "version": "0.1.2", + "version": "0.1.3", "description": "A React Native phone number input component built from scratch, featuring a text input for number entry, a custom dropdown for selecting country codes, and validation logic using regex or country-specific rules. It supports formatting, localization, and styling, ensuring a seamless and accessible user experience without relying on external libraries.", "source": "./src/index.tsx", "main": "./lib/commonjs/index.js", diff --git a/src/index.d.ts b/src/index.d.ts index b1a304e..9592767 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -52,7 +52,7 @@ interface RNPhoneInputProps { * @param value - The selected country's details excluding `countryCode` and `callingCode`. */ onSelectCountryCode?: ( - value: Omit + value: Omit ) => void; /** @@ -74,6 +74,10 @@ interface RNPhoneInputProps { * Custom style for the text displaying the country code. */ codeTextStyle?: StyleProp; + /** + * Determines whether the component should use dark mode. + */ + darkMode?: boolean; } /** diff --git a/src/index.tsx b/src/index.tsx index 42d2c8c..c24d04b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,27 +1,14 @@ -import { - View, - Text, - TextInput, - TouchableOpacity, - Image, - useColorScheme, -} from 'react-native'; +import React, { useRef } from 'react'; +import { View, Text, TextInput, TouchableOpacity, Image } from 'react-native'; import { forwardRef, useImperativeHandle, useState } from 'react'; import constants from './main/constants/constants'; -import Picker from './main/country-picker/Picker'; import assets from './main/assets/assets'; import styles from './styles'; import type { RNPhoneInputProps, RNPhoneInputRef } from './index.d'; import type { CountryCode, EachCountry } from './main/constants/constants.d'; import CountryPickerModal from './main/country-picker/CountryPickerModal'; +import { type PickerOpenRef } from './main/country-picker/Picker.d'; -declare global { - namespace NodeJS { - interface Global { - openCountryModal: () => void; - } - } -} const RNPhoneInput = forwardRef( ( { @@ -37,22 +24,23 @@ const RNPhoneInput = forwardRef( placeholderColor, codeTextStyle, iconContainerStyle, + darkMode = false, }, ref ) => { const [country, setCountry] = useState( constants[defaultCountry || 'BD'] ); + const openModalRef = useRef(null); const [value, setValue] = useState(defaultValue || ''); - const scheme = useColorScheme(); const openBottomSheet = () => { - global.openCountryModal({ - component: Picker as unknown as unknown as React.FC, - componentProps: { onSelect: onSelect }, - }); + openModalRef.current?.openModal(); }; useImperativeHandle(ref, () => ({ isValidNumber: (text: string) => { + if (text.length === 0) { + return false; + } const finalText = country.callingCode + text; return !!finalText.match(new RegExp(country.regex)); }, @@ -68,30 +56,33 @@ const RNPhoneInput = forwardRef( }, })); const onSelect = (item: EachCountry) => { - global.openCountryModal({}); setCountry(item); - onSelectCountryCode && onSelectCountryCode(item); + onSelectCountryCode && + onSelectCountryCode({ + countryCode: item.countryCode, + callingCode: item.callingCode, + }); }; const handleChangeText = (text: string) => { setValue(text); onChangeText && onChangeText(text); }; + const style = styles(darkMode); return ( - <> - + + - {country.icon} - {downArrowIcon && ( + {country.icon} + {downArrowIcon || ( ( /> )} - - + + +{country.callingCode} ( /> - - + + ); } ); diff --git a/src/main/constants/constants.ts b/src/main/constants/constants.ts index 799797e..0caccd8 100644 --- a/src/main/constants/constants.ts +++ b/src/main/constants/constants.ts @@ -6,1337 +6,1337 @@ const constants: Constant = { countryCode: 'AF', countryName: 'Afghanistan', callingCode: '93', - regex: '^(+93|93)?[2-9]d{8}$', + regex: '^(\\+93|93)?[2-9]\\d{8}$', }, AL: { icon: '๐Ÿ‡ฆ๐Ÿ‡ฑ', countryCode: 'AL', countryName: 'Albania', callingCode: '355', - regex: '^(+355|355)?[67]d{8}$', + regex: '^(\\+355|355)?[67]\\d{8}$', }, DZ: { icon: '๐Ÿ‡ฉ๐Ÿ‡ฟ', countryCode: 'DZ', countryName: 'Algeria', callingCode: '213', - regex: '^(+213|213)?[5-7]d{8}$', + regex: '^(\\+213|213)?[5-7]\\d{8}$', }, AD: { icon: '๐Ÿ‡ฆ๐Ÿ‡ฉ', countryCode: 'AD', countryName: 'Andorra', callingCode: '376', - regex: '^(+376|376)?[3-9]d{5}$', + regex: '^(\\+376|376)?[3-9]\\d{5}$', }, AO: { icon: '๐Ÿ‡ฆ๐Ÿ‡ด', countryCode: 'AO', countryName: 'Angola', callingCode: '244', - regex: '^(+244|244)?9d{8}$', + regex: '^(\\+244|244)?9d{8}$', }, AR: { icon: '๐Ÿ‡ฆ๐Ÿ‡ท', countryCode: 'AR', countryName: 'Argentina', callingCode: '54', - regex: '^(+54|54)?[1-9]d{9}$', + regex: '^(\\+54|54)?[1-9]\\d{9}$', }, AM: { icon: '๐Ÿ‡ฆ๐Ÿ‡ฒ', countryCode: 'AM', countryName: 'Armenia', callingCode: '374', - regex: '^(+374|374)?[9]d{8}$', + regex: '^(\\+374|374)?[9]\\d{8}$', }, AU: { icon: '๐Ÿ‡ฆ๐Ÿ‡บ', countryCode: 'AU', countryName: 'Australia', callingCode: '61', - regex: '^(+61|61)?[2-9]d{8}$', + regex: '^(\\+61|61)?[2-9]\\d{8}$', }, AT: { icon: '๐Ÿ‡ฆ๐Ÿ‡น', countryCode: 'AT', countryName: 'Austria', callingCode: '43', - regex: '^(+43|43)?[1-9]d{3,8}$', + regex: '^(\\+43|43)?[1-9]\\d{3,8}$', }, AZ: { icon: '๐Ÿ‡ฆ๐Ÿ‡ฟ', countryCode: 'AZ', countryName: 'Azerbaijan', callingCode: '994', - regex: '^(+994|994)?[50-59]d{7}$', + regex: '^(\\+994|994)?[50-59]\\d{7}$', }, BH: { icon: '๐Ÿ‡ง๐Ÿ‡ญ', countryCode: 'BH', countryName: 'Bahrain', callingCode: '973', - regex: '^(+973|973)?[3-9]d{7}$', + regex: '^(\\+973|973)?[3-9]\\d{7}$', }, BD: { icon: '๐Ÿ‡ง๐Ÿ‡ฉ', countryCode: 'BD', countryName: 'Bangladesh', callingCode: '880', - regex: '^(+880|880)?1[3-9]d{8}$', + regex: '^(\\+880|880)?1[3-9]\\d{8}$', }, BY: { icon: '๐Ÿ‡ง๐Ÿ‡พ', countryCode: 'BY', countryName: 'Belarus', callingCode: '375', - regex: '^(+375|375)?[2-9]d{7}$', + regex: '^(\\+375|375)?[2-9]\\d{7}$', }, BE: { icon: '๐Ÿ‡ง๐Ÿ‡ช', countryCode: 'BE', countryName: 'Belgium', callingCode: '32', - regex: '^(+32|32)?[1-9]d{7}$', + regex: '^(\\+32|32)?[1-9]\\d{7}$', }, BJ: { icon: '๐Ÿ‡ง๐Ÿ‡ฏ', countryCode: 'BJ', countryName: 'Benin', callingCode: '229', - regex: '^(+229|229)?[91-99]d{7}$', + regex: '^(\\+229|229)?[91-99]\\d{7}$', }, BT: { icon: '๐Ÿ‡ง๐Ÿ‡น', countryCode: 'BT', countryName: 'Bhutan', callingCode: '975', - regex: '^(+975|975)?1d{7}$', + regex: '^(\\+975|975)?1d{7}$', }, BO: { icon: '๐Ÿ‡ง๐Ÿ‡ด', countryCode: 'BO', countryName: 'Bolivia', callingCode: '591', - regex: '^(+591|591)?[2-7]d{7}$', + regex: '^(\\+591|591)?[2-7]\\d{7}$', }, BA: { icon: '๐Ÿ‡ง๐Ÿ‡ฆ', countryCode: 'BA', countryName: 'Bosnia and Herzegovina', callingCode: '387', - regex: '^(+387|387)?6d{7}$', + regex: '^(\\+387|387)?6d{7}$', }, BW: { icon: '๐Ÿ‡ง๐Ÿ‡ผ', countryCode: 'BW', countryName: 'Botswana', callingCode: '267', - regex: '^(+267|267)?7d{7}$', + regex: '^(\\+267|267)?7d{7}$', }, BR: { icon: '๐Ÿ‡ง๐Ÿ‡ท', countryCode: 'BR', countryName: 'Brazil', callingCode: '55', - regex: '^(+55|55)?[1-9]d{8}$', + regex: '^(\\+55|55)?[1-9]\\d{8}$', }, BN: { icon: '๐Ÿ‡ง๐Ÿ‡ณ', countryCode: 'BN', countryName: 'Brunei', callingCode: '673', - regex: '^(+673|673)?[2-8]d{6}$', + regex: '^(\\+673|673)?[2-8]\\d{6}$', }, BG: { icon: '๐Ÿ‡ง๐Ÿ‡ฌ', countryCode: 'BG', countryName: 'Bulgaria', callingCode: '359', - regex: '^(+359|359)?[8-9]d{8}$', + regex: '^(\\+359|359)?[8-9]\\d{8}$', }, BF: { icon: '๐Ÿ‡ง๐Ÿ‡ซ', countryCode: 'BF', countryName: 'Burkina Faso', callingCode: '226', - regex: '^(+226|226)?[70-79]d{6}$', + regex: '^(\\+226|226)?[70-79]\\d{6}$', }, BI: { icon: '๐Ÿ‡ง๐Ÿ‡ฎ', countryCode: 'BI', countryName: 'Burundi', callingCode: '257', - regex: '^(+257|257)?7d{7}$', + regex: '^(\\+257|257)?7d{7}$', }, KH: { icon: '๐Ÿ‡ฐ๐Ÿ‡ญ', countryCode: 'KH', countryName: 'Cambodia', callingCode: '855', - regex: '^(+855|855)?[1-9]d{7}$', + regex: '^(\\+855|855)?[1-9]\\d{7}$', }, CM: { icon: '๐Ÿ‡จ๐Ÿ‡ฒ', countryCode: 'CM', countryName: 'Cameroon', callingCode: '237', - regex: '^(+237|237)?[2-7]d{7}$', + regex: '^(\\+237|237)?[2-7]\\d{7}$', }, CA: { icon: '๐Ÿ‡จ๐Ÿ‡ฆ', countryCode: 'CA', countryName: 'Canada', callingCode: '1', - regex: '^(+1|1)?[2-9]d{9}$', + regex: '^(\\+1|1)?[2-9]\\d{9}$', }, CV: { icon: '๐Ÿ‡จ๐Ÿ‡ป', countryCode: 'CV', countryName: 'Cape Verde', callingCode: '238', - regex: '^(+238|238)?[2-9]d{6}$', + regex: '^(\\+238|238)?[2-9]\\d{6}$', }, KY: { icon: '๐Ÿ‡ฐ๐Ÿ‡พ', countryCode: 'KY', countryName: 'Cayman Islands', callingCode: '1-345', - regex: '^(+1-345|1-345)?[345]d{6}$', + regex: '^(\\+1-345|1-345)?[345]\\d{6}$', }, CF: { icon: '๐Ÿ‡จ๐Ÿ‡ซ', countryCode: 'CF', countryName: 'Central African Republic', callingCode: '236', - regex: '^(+236|236)?[7-8]d{7}$', + regex: '^(\\+236|236)?[7-8]\\d{7}$', }, TD: { icon: '๐Ÿ‡น๐Ÿ‡ฉ', countryCode: 'TD', countryName: 'Chad', callingCode: '235', - regex: '^(+235|235)?[7-9]d{7}$', + regex: '^(\\+235|235)?[7-9]\\d{7}$', }, CL: { icon: '๐Ÿ‡จ๐Ÿ‡ฑ', countryCode: 'CL', countryName: 'Chile', callingCode: '56', - regex: '^(+56|56)?[2-9]d{8}$', + regex: '^(\\+56|56)?[2-9]\\d{8}$', }, CN: { icon: '๐Ÿ‡จ๐Ÿ‡ณ', countryCode: 'CN', countryName: 'China', callingCode: '86', - regex: '^(+86|86)?1[3-9]d{9}$', + regex: '^(\\+86|86)?1[3-9]\\d{9}$', }, CO: { icon: '๐Ÿ‡จ๐Ÿ‡ด', countryCode: 'CO', countryName: 'Colombia', callingCode: '57', - regex: '^(+57|57)?[1-9]d{9}$', + regex: '^(\\+57|57)?[1-9]\\d{9}$', }, KM: { icon: '๐Ÿ‡ฐ๐Ÿ‡ฒ', countryCode: 'KM', countryName: 'Comoros', callingCode: '269', - regex: '^(+269|269)?3d{7}$', + regex: '^(\\+269|269)?3d{7}$', }, CG: { icon: '๐Ÿ‡จ๐Ÿ‡ฌ', countryCode: 'CG', countryName: 'Congo', callingCode: '242', - regex: '^(+242|242)?[7-9]d{7}$', + regex: '^(\\+242|242)?[7-9]\\d{7}$', }, CD: { icon: '๐Ÿ‡จ๐Ÿ‡ฉ', countryCode: 'CD', countryName: 'Congo (Congo-Kinshasa)', callingCode: '243', - regex: '^(+243|243)?[7-9]d{7}$', + regex: '^(\\+243|243)?[7-9]\\d{7}$', }, CR: { icon: '๐Ÿ‡จ๐Ÿ‡ท', countryCode: 'CR', countryName: 'Costa Rica', callingCode: '506', - regex: '^(+506|506)?[2-8]d{6}$', + regex: '^(\\+506|506)?[2-8]\\d{6}$', }, CI: { icon: '๐Ÿ‡จ๐Ÿ‡ฎ', countryCode: 'CI', - countryName: "Cรดte d'Ivoire", + countryName: "Cรดte \\d'Ivoire", callingCode: '225', - regex: '^(+225|225)?[0-9]d{7}$', + regex: '^(\\+225|225)?[0-9]\\d{7}$', }, HR: { icon: '๐Ÿ‡ญ๐Ÿ‡ท', countryCode: 'HR', countryName: 'Croatia', callingCode: '385', - regex: '^(+385|385)?[1-9]d{7}$', + regex: '^(\\+385|385)?[1-9]\\d{7}$', }, CU: { icon: '๐Ÿ‡จ๐Ÿ‡บ', countryCode: 'CU', countryName: 'Cuba', callingCode: '53', - regex: '^(+53|53)?[2-9]d{7}$', + regex: '^(\\+53|53)?[2-9]\\d{7}$', }, CY: { icon: '๐Ÿ‡จ๐Ÿ‡พ', countryCode: 'CY', countryName: 'Cyprus', callingCode: '357', - regex: '^(+357|357)?[2-9]d{6}$', + regex: '^(\\+357|357)?[2-9]\\d{6}$', }, CZ: { icon: '๐Ÿ‡จ๐Ÿ‡ฟ', countryCode: 'CZ', countryName: 'Czech Republic', callingCode: '420', - regex: '^(+420|420)?[2-9]d{8}$', + regex: '^(\\+420|420)?[2-9]\\d{8}$', }, DK: { icon: '๐Ÿ‡ฉ๐Ÿ‡ฐ', countryCode: 'DK', countryName: 'Denmark', callingCode: '45', - regex: '^(+45|45)?[2-9]d{7}$', + regex: '^(\\+45|45)?[2-9]\\d{7}$', }, DJ: { icon: '๐Ÿ‡ฉ๐Ÿ‡ฏ', countryCode: 'DJ', countryName: 'Djibouti', callingCode: '253', - regex: '^(+253|253)?[2-9]d{6}$', + regex: '^(\\+253|253)?[2-9]\\d{6}$', }, DM: { icon: '๐Ÿ‡ฉ๐Ÿ‡ฒ', countryCode: 'DM', countryName: 'Dominica', callingCode: '1767', - regex: '^(+1767|1767)?[1-9]d{6}$', + regex: '^(\\+1767|1767)?[1-9]\\d{6}$', }, DO: { icon: '๐Ÿ‡ฉ๐Ÿ‡ด', countryCode: 'DO', countryName: 'Dominican Republic', callingCode: '1809', - regex: '^(+1809|1809)?[1-9]d{7}$', + regex: '^(\\+1809|1809)?[1-9]\\d{7}$', }, EC: { icon: '๐Ÿ‡ช๐Ÿ‡จ', countryCode: 'EC', countryName: 'Ecuador', callingCode: '593', - regex: '^(+593|593)?[2-9]d{8}$', + regex: '^(\\+593|593)?[2-9]\\d{8}$', }, EG: { icon: '๐Ÿ‡ช๐Ÿ‡ฌ', countryCode: 'EG', countryName: 'Egypt', callingCode: '20', - regex: '^(+20|20)?[1-9]d{8}$', + regex: '^(\\+20|20)?[1-9]\\d{8}$', }, SV: { icon: '๐Ÿ‡ธ๐Ÿ‡ป', countryCode: 'SV', countryName: 'El Salvador', callingCode: '503', - regex: '^(+503|503)?[2-9]d{7}$', + regex: '^(\\+503|503)?[2-9]\\d{7}$', }, GQ: { icon: '๐Ÿ‡ฌ๐Ÿ‡ถ', countryCode: 'GQ', countryName: 'Equatorial Guinea', callingCode: '240', - regex: '^(+240|240)?[2-9]d{7}$', + regex: '^(\\+240|240)?[2-9]\\d{7}$', }, ER: { icon: '๐Ÿ‡ช๐Ÿ‡ท', countryCode: 'ER', countryName: 'Eritrea', callingCode: '291', - regex: '^(+291|291)?[2-9]d{6}$', + regex: '^(\\+291|291)?[2-9]\\d{6}$', }, EE: { icon: '๐Ÿ‡ช๐Ÿ‡ช', countryCode: 'EE', countryName: 'Estonia', callingCode: '372', - regex: '^(+372|372)?[2-9]d{7}$', + regex: '^(\\+372|372)?[2-9]\\d{7}$', }, ET: { icon: '๐Ÿ‡ช๐Ÿ‡น', countryCode: 'ET', countryName: 'Ethiopia', callingCode: '251', - regex: '^(+251|251)?[1-9]d{8}$', + regex: '^(\\+251|251)?[1-9]\\d{8}$', }, FJ: { icon: '๐Ÿ‡ซ๐Ÿ‡ฏ', countryCode: 'FJ', countryName: 'Fiji', callingCode: '679', - regex: '^(+679|679)?7d{5}$', + regex: '^(\\+679|679)?7d{5}$', }, FI: { icon: '๐Ÿ‡ซ๐Ÿ‡ฎ', countryCode: 'FI', countryName: 'Finland', callingCode: '358', - regex: '^(+358|358)?[0-9]d{6,9}$', + regex: '^(\\+358|358)?[0-9]\\d{6,9}$', }, FR: { icon: '๐Ÿ‡ซ๐Ÿ‡ท', countryCode: 'FR', countryName: 'France', callingCode: '33', - regex: '^(+33|33)?[1-9]d{8}$', + regex: '^(\\+33|33)?[1-9]\\d{8}$', }, GA: { icon: '๐Ÿ‡ฌ๐Ÿ‡ฆ', countryCode: 'GA', countryName: 'Gabon', callingCode: '241', - regex: '^(+241|241)?[2-9]d{6}$', + regex: '^(\\+241|241)?[2-9]\\d{6}$', }, GM: { icon: '๐Ÿ‡ฌ๐Ÿ‡ฒ', countryCode: 'GM', countryName: 'Gambia', callingCode: '220', - regex: '^(+220|220)?[3-9]d{6}$', + regex: '^(\\+220|220)?[3-9]\\d{6}$', }, GE: { icon: '๐Ÿ‡ฌ๐Ÿ‡ช', countryCode: 'GE', countryName: 'Georgia', callingCode: '995', - regex: '^(+995|995)?[3-9]d{8}$', + regex: '^(\\+995|995)?[3-9]\\d{8}$', }, DE: { icon: '๐Ÿ‡ฉ๐Ÿ‡ช', countryCode: 'DE', countryName: 'Germany', callingCode: '49', - regex: '^(+49|49)?[1-9]d{7,10}$', + regex: '^(\\+49|49)?[1-9]\\d{7,10}$', }, GH: { icon: '๐Ÿ‡ฌ๐Ÿ‡ญ', countryCode: 'GH', countryName: 'Ghana', callingCode: '233', - regex: '^(+233|233)?[2-9]d{7}$', + regex: '^(\\+233|233)?[2-9]\\d{7}$', }, GR: { icon: '๐Ÿ‡ฌ๐Ÿ‡ท', countryCode: 'GR', countryName: 'Greece', callingCode: '30', - regex: '^(+30|30)?[1-9]d{8}$', + regex: '^(\\+30|30)?[1-9]\\d{8}$', }, GD: { icon: '๐Ÿ‡ฌ๐Ÿ‡ฉ', countryCode: 'GD', countryName: 'Grenada', callingCode: '1-473', - regex: '^(+1-473|1-473)?[1-9]d{6}$', + regex: '^(\\+1-473|1-473)?[1-9]\\d{6}$', }, GU: { icon: '๐Ÿ‡ฌ๐Ÿ‡บ', countryCode: 'GU', countryName: 'Guam', callingCode: '1-671', - regex: '^(+1-671|1-671)?[1-9]d{6}$', + regex: '^(\\+1-671|1-671)?[1-9]\\d{6}$', }, GT: { icon: '๐Ÿ‡ฌ๐Ÿ‡น', countryCode: 'GT', countryName: 'Guatemala', callingCode: '502', - regex: '^(+502|502)?[2-9]d{7}$', + regex: '^(\\+502|502)?[2-9]\\d{7}$', }, GN: { icon: '๐Ÿ‡ฌ๐Ÿ‡ณ', countryCode: 'GN', countryName: 'Guinea', callingCode: '224', - regex: '^(+224|224)?[2-9]d{7}$', + regex: '^(\\+224|224)?[2-9]\\d{7}$', }, GW: { icon: '๐Ÿ‡ฌ๐Ÿ‡ผ', countryCode: 'GW', countryName: 'Guinea-Bissau', callingCode: '245', - regex: '^(+245|245)?[2-9]d{7}$', + regex: '^(\\+245|245)?[2-9]\\d{7}$', }, GY: { icon: '๐Ÿ‡ฌ๐Ÿ‡พ', countryCode: 'GY', countryName: 'Guyana', callingCode: '592', - regex: '^(+592|592)?[2-9]d{7}$', + regex: '^(\\+592|592)?[2-9]\\d{7}$', }, HT: { icon: '๐Ÿ‡ญ๐Ÿ‡น', countryCode: 'HT', countryName: 'Haiti', callingCode: '509', - regex: '^(+509|509)?[2-9]d{7}$', + regex: '^(\\+509|509)?[2-9]\\d{7}$', }, HN: { icon: '๐Ÿ‡ญ๐Ÿ‡ณ', countryCode: 'HN', countryName: 'Honduras', callingCode: '504', - regex: '^(+504|504)?[2-9]d{7}$', + regex: '^(\\+504|504)?[2-9]\\d{7}$', }, HU: { icon: '๐Ÿ‡ญ๐Ÿ‡บ', countryCode: 'HU', countryName: 'Hungary', callingCode: '36', - regex: '^(+36|36)?[1-9]d{7}$', + regex: '^(\\+36|36)?[1-9]\\d{7}$', }, IS: { icon: '๐Ÿ‡ฎ๐Ÿ‡ธ', countryCode: 'IS', countryName: 'Iceland', callingCode: '354', - regex: '^(+354|354)?[1-9]d{6}$', + regex: '^(\\+354|354)?[1-9]\\d{6}$', }, IN: { icon: '๐Ÿ‡ฎ๐Ÿ‡ณ', countryCode: 'IN', countryName: 'India', callingCode: '91', - regex: '^(+91|91)?[7-9]d{9}$', + regex: '^(\\+91|91)?[7-9]\\d{9}$', }, ID: { icon: '๐Ÿ‡ฎ๐Ÿ‡ฉ', countryCode: 'ID', countryName: 'Indonesia', callingCode: '62', - regex: '^(+62|62)?[1-9]d{8,9}$', + regex: '^(\\+62|62)?[1-9]\\d{8,9}$', }, IR: { icon: '๐Ÿ‡ฎ๐Ÿ‡ท', countryCode: 'IR', countryName: 'Iran', callingCode: '98', - regex: '^(+98|98)?[1-9]d{8}$', + regex: '^(\\+98|98)?[1-9]\\d{8}$', }, IQ: { icon: '๐Ÿ‡ฎ๐Ÿ‡ถ', countryCode: 'IQ', countryName: 'Iraq', callingCode: '964', - regex: '^(+964|964)?[7-9]d{8}$', + regex: '^(\\+964|964)?[7-9]\\d{8}$', }, IE: { icon: '๐Ÿ‡ฎ๐Ÿ‡ช', countryCode: 'IE', countryName: 'Ireland', callingCode: '353', - regex: '^(+353|353)?[1-9]d{7}$', + regex: '^(\\+353|353)?[1-9]\\d{7}$', }, IL: { icon: '๐Ÿ‡ฎ๐Ÿ‡ฑ', countryCode: 'IL', countryName: 'Israel', callingCode: '972', - regex: '^(+972|972)?[2-9]d{7}$', + regex: '^(\\+972|972)?[2-9]\\d{7}$', }, IT: { icon: '๐Ÿ‡ฎ๐Ÿ‡น', countryCode: 'IT', countryName: 'Italy', callingCode: '39', - regex: '^(+39|39)?[1-9]d{8}$', + regex: '^(\\+39|39)?[1-9]\\d{8}$', }, JM: { icon: '๐Ÿ‡ฏ๐Ÿ‡ฒ', countryCode: 'JM', countryName: 'Jamaica', callingCode: '1876', - regex: '^(+1876|1876)?[1-9]d{6}$', + regex: '^(\\+1876|1876)?[1-9]\\d{6}$', }, JP: { icon: '๐Ÿ‡ฏ๐Ÿ‡ต', countryCode: 'JP', countryName: 'Japan', callingCode: '81', - regex: '^(+81|81)?[1-9]d{8}$', + regex: '^(\\+81|81)?[1-9]\\d{8}$', }, JO: { icon: '๐Ÿ‡ฏ๐Ÿ‡ด', countryCode: 'JO', countryName: 'Jordan', callingCode: '962', - regex: '^(+962|962)?[7-9]d{8}$', + regex: '^(\\+962|962)?[7-9]\\d{8}$', }, KZ: { icon: '๐Ÿ‡ฐ๐Ÿ‡ฟ', countryCode: 'KZ', countryName: 'Kazakhstan', callingCode: '7', - regex: '^(+7|7)?[1-9]d{9}$', + regex: '^(\\+7|7)?[1-9]\\d{9}$', }, KE: { icon: '๐Ÿ‡ฐ๐Ÿ‡ช', countryCode: 'KE', countryName: 'Kenya', callingCode: '254', - regex: '^(+254|254)?[7-9]d{8}$', + regex: '^(\\+254|254)?[7-9]\\d{8}$', }, KI: { icon: '๐Ÿ‡ฐ๐Ÿ‡ฎ', countryCode: 'KI', countryName: 'Kiribati', callingCode: '686', - regex: '^(+686|686)?[2-9]d{5}$', + regex: '^(\\+686|686)?[2-9]\\d{5}$', }, KW: { icon: '๐Ÿ‡ฐ๐Ÿ‡ผ', countryCode: 'KW', countryName: 'Kuwait', callingCode: '965', - regex: '^(+965|965)?[2-9]d{6}$', + regex: '^(\\+965|965)?[2-9]\\d{6}$', }, KG: { icon: '๐Ÿ‡ฐ๐Ÿ‡ฌ', countryCode: 'KG', countryName: 'Kyrgyzstan', callingCode: '996', - regex: '^(+996|996)?[7-9]d{8}$', + regex: '^(\\+996|996)?[7-9]\\d{8}$', }, LA: { icon: '๐Ÿ‡ฑ๐Ÿ‡ธ', countryCode: 'LA', countryName: 'Lesotho', callingCode: '266', - regex: '^(+266|266)?[2-8]d{6}$', + regex: '^(\\+266|266)?[2-8]\\d{6}$', }, LV: { icon: '๐Ÿ‡ฑ๐Ÿ‡ป', countryCode: 'LV', countryName: 'Latvia', callingCode: '371', - regex: '^(+371|371)?[2-9]d{7}$', + regex: '^(\\+371|371)?[2-9]\\d{7}$', }, LB: { icon: '๐Ÿ‡ฑ๐Ÿ‡ง', countryCode: 'LB', countryName: 'Lebanon', callingCode: '961', - regex: '^(+961|961)?[1-9]d{7}$', + regex: '^(\\+961|961)?[1-9]\\d{7}$', }, LS: { icon: '๐Ÿ‡ฑ๐Ÿ‡ธ', countryCode: 'LS', countryName: 'Lesotho', callingCode: '266', - regex: '^(+266|266)?[2-9]d{6}$', + regex: '^(\\+266|266)?[2-9]\\d{6}$', }, LR: { icon: '๐Ÿ‡ฑ๐Ÿ‡ท', countryCode: 'LR', countryName: 'Liberia', callingCode: '231', - regex: '^(+231|231)?[2-9]d{7}$', + regex: '^(\\+231|231)?[2-9]\\d{7}$', }, LY: { icon: '๐Ÿ‡ฑ๐Ÿ‡พ', countryCode: 'LY', countryName: 'Libya', callingCode: '218', - regex: '^(+218|218)?[2-9]d{7}$', + regex: '^(\\+218|218)?[2-9]\\d{7}$', }, LI: { icon: '๐Ÿ‡ฑ๐Ÿ‡ฎ', countryCode: 'LI', countryName: 'Liechtenstein', callingCode: '423', - regex: '^(+423|423)?[2-9]d{6}$', + regex: '^(\\+423|423)?[2-9]\\d{6}$', }, LT: { icon: '๐Ÿ‡ฑ๐Ÿ‡น', countryCode: 'LT', countryName: 'Lithuania', callingCode: '370', - regex: '^(+370|370)?[6-9]d{7}$', + regex: '^(\\+370|370)?[6-9]\\d{7}$', }, LU: { icon: '๐Ÿ‡ฑ๐Ÿ‡บ', countryCode: 'LU', countryName: 'Luxembourg', callingCode: '352', - regex: '^(+352|352)?[2-9]d{6}$', + regex: '^(\\+352|352)?[2-9]\\d{6}$', }, MO: { icon: '๐Ÿ‡ฒ๐Ÿ‡ด', countryCode: 'MO', countryName: 'Macau', callingCode: '853', - regex: '^(+853|853)?[6-9]d{5}$', + regex: '^(\\+853|853)?[6-9]\\d{5}$', }, MK: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฐ', countryCode: 'MK', countryName: 'North Macedonia', callingCode: '389', - regex: '^(+389|389)?[7-9]d{7}$', + regex: '^(\\+389|389)?[7-9]\\d{7}$', }, MG: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฌ', countryCode: 'MG', countryName: 'Madagascar', callingCode: '261', - regex: '^(+261|261)?[3-9]d{7}$', + regex: '^(\\+261|261)?[3-9]\\d{7}$', }, MW: { icon: '๐Ÿ‡ฒ๐Ÿ‡ผ', countryCode: 'MW', countryName: 'Malawi', callingCode: '265', - regex: '^(+265|265)?[2-9]d{7}$', + regex: '^(\\+265|265)?[2-9]\\d{7}$', }, MY: { icon: '๐Ÿ‡ฒ๐Ÿ‡พ', countryCode: 'MY', countryName: 'Malaysia', callingCode: '60', - regex: '^(+60|60)?[1-9]d{7}$', + regex: '^(\\+60|60)?[1-9]\\d{7}$', }, MV: { icon: '๐Ÿ‡ฒ๐Ÿ‡ป', countryCode: 'MV', countryName: 'Maldives', callingCode: '960', - regex: '^(+960|960)?[2-9]d{6}$', + regex: '^(\\+960|960)?[2-9]\\d{6}$', }, ML: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฑ', countryCode: 'ML', countryName: 'Mali', callingCode: '223', - regex: '^(+223|223)?[6-9]d{7}$', + regex: '^(\\+223|223)?[6-9]\\d{7}$', }, MT: { icon: '๐Ÿ‡ฒ๐Ÿ‡น', countryCode: 'MT', countryName: 'Malta', callingCode: '356', - regex: '^(+356|356)?[2-9]d{7}$', + regex: '^(\\+356|356)?[2-9]\\d{7}$', }, MH: { icon: '๐Ÿ‡ฒ๐Ÿ‡ญ', countryCode: 'MH', countryName: 'Marshall Islands', callingCode: '692', - regex: '^(+692|692)?[2-9]d{5}$', + regex: '^(\\+692|692)?[2-9]\\d{5}$', }, MR: { icon: '๐Ÿ‡ฒ๐Ÿ‡ท', countryCode: 'MR', countryName: 'Mauritania', callingCode: '222', - regex: '^(+222|222)?[2-9]d{7}$', + regex: '^(\\+222|222)?[2-9]\\d{7}$', }, MU: { icon: '๐Ÿ‡ฒ๐Ÿ‡บ', countryCode: 'MU', countryName: 'Mauritius', callingCode: '230', - regex: '^(+230|230)?[5-9]d{5}$', + regex: '^(\\+230|230)?[5-9]\\d{5}$', }, YT: { icon: '๐Ÿ‡พ๐Ÿ‡น', countryCode: 'YT', countryName: 'Mayotte', callingCode: '262', - regex: '^(+262|262)?[2-9]d{6}$', + regex: '^(\\+262|262)?[2-9]\\d{6}$', }, MX: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฝ', countryCode: 'MX', countryName: 'Mexico', callingCode: '52', - regex: '^(+52|52)?[1-9]d{9}$', + regex: '^(\\+52|52)?[1-9]\\d{9}$', }, FM: { icon: '๐Ÿ‡ซ๐Ÿ‡ฒ', countryCode: 'FM', countryName: 'Micronesia', callingCode: '691', - regex: '^(+691|691)?[2-9]d{5}$', + regex: '^(\\+691|691)?[2-9]\\d{5}$', }, MD: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฉ', countryCode: 'MD', countryName: 'Moldova', callingCode: '373', - regex: '^(+373|373)?[2-9]d{7}$', + regex: '^(\\+373|373)?[2-9]\\d{7}$', }, MC: { icon: '๐Ÿ‡ฒ๐Ÿ‡จ', countryCode: 'MC', countryName: 'Monaco', callingCode: '377', - regex: '^(+377|377)?[2-9]d{6}$', + regex: '^(\\+377|377)?[2-9]\\d{6}$', }, MN: { icon: '๐Ÿ‡ฒ๐Ÿ‡ณ', countryCode: 'MN', countryName: 'Mongolia', callingCode: '976', - regex: '^(+976|976)?[1-9]d{7}$', + regex: '^(\\+976|976)?[1-9]\\d{7}$', }, ME: { icon: '๐Ÿ‡ฒ๐Ÿ‡ช', countryCode: 'ME', countryName: 'Montenegro', callingCode: '382', - regex: '^(+382|382)?[2-9]d{7}$', + regex: '^(\\+382|382)?[2-9]\\d{7}$', }, MS: { icon: '๐Ÿ‡ฒ๐Ÿ‡ธ', countryCode: 'MS', countryName: 'Montserrat', callingCode: '1-664', - regex: '^(+1-664|1-664)?[1-9]d{6}$', + regex: '^(\\+1-664|1-664)?[1-9]\\d{6}$', }, MA: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฆ', countryCode: 'MA', countryName: 'Morocco', callingCode: '212', - regex: '^(+212|212)?[6-7]d{8}$', + regex: '^(\\+212|212)?[6-7]\\d{8}$', }, MZ: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฟ', countryCode: 'MZ', countryName: 'Mozambique', callingCode: '258', - regex: '^(+258|258)?[8-9]d{7}$', + regex: '^(\\+258|258)?[8-9]\\d{7}$', }, MM: { icon: '๐Ÿ‡ฒ๐Ÿ‡ฒ', countryCode: 'MM', countryName: 'Myanmar', callingCode: '95', - regex: '^(+95|95)?[9]d{7}$', + regex: '^(\\+95|95)?[9]\\d{7}$', }, NA: { icon: '๐Ÿ‡ณ๐Ÿ‡ฆ', countryCode: 'NA', countryName: 'Namibia', callingCode: '264', - regex: '^(+264|264)?[1-9]d{7}$', + regex: '^(\\+264|264)?[1-9]\\d{7}$', }, NR: { icon: '๐Ÿ‡ณ๐Ÿ‡ท', countryCode: 'NR', countryName: 'Nauru', callingCode: '674', - regex: '^(+674|674)?[2-9]d{5}$', + regex: '^(\\+674|674)?[2-9]\\d{5}$', }, NP: { icon: '๐Ÿ‡ณ๐Ÿ‡ต', countryCode: 'NP', countryName: 'Nepal', callingCode: '977', - regex: '^(+977|977)?[1-9]d{8}$', + regex: '^(\\+977|977)?[1-9]\\d{8}$', }, NL: { icon: '๐Ÿ‡ณ๐Ÿ‡ฑ', countryCode: 'NL', countryName: 'Netherlands', callingCode: '31', - regex: '^(+31|31)?[1-9]d{8}$', + regex: '^(\\+31|31)?[1-9]\\d{8}$', }, NZ: { icon: '๐Ÿ‡ณ๐Ÿ‡ฟ', countryCode: 'NZ', countryName: 'New Zealand', callingCode: '64', - regex: '^(+64|64)?[2-9]d{7}$', + regex: '^(\\+64|64)?[2-9]\\d{7}$', }, NI: { icon: '๐Ÿ‡ณ๐Ÿ‡ฎ', countryCode: 'NI', countryName: 'Nicaragua', callingCode: '505', - regex: '^(+505|505)?[2-9]d{7}$', + regex: '^(\\+505|505)?[2-9]\\d{7}$', }, NE: { icon: '๐Ÿ‡ณ๐Ÿ‡ช', countryCode: 'NE', countryName: 'Niger', callingCode: '227', - regex: '^(+227|227)?[7-9]d{7}$', + regex: '^(\\+227|227)?[7-9]\\d{7}$', }, NG: { icon: '๐Ÿ‡ณ๐Ÿ‡ฌ', countryCode: 'NG', countryName: 'Nigeria', callingCode: '234', - regex: '^(+234|234)?[7-9]d{9}$', + regex: '^(\\+234|234)?[7-9]\\d{9}$', }, KP: { icon: '๐Ÿ‡ฐ๐Ÿ‡ต', countryCode: 'KP', countryName: 'North Korea', callingCode: '850', - regex: '^(+850|850)?[1-9]d{7}$', + regex: '^(\\+850|850)?[1-9]\\d{7}$', }, NO: { icon: '๐Ÿ‡ณ๐Ÿ‡ด', countryCode: 'NO', countryName: 'Norway', callingCode: '47', - regex: '^(+47|47)?[2-9]d{7}$', + regex: '^(\\+47|47)?[2-9]\\d{7}$', }, OM: { icon: '๐Ÿ‡ด๐Ÿ‡ฒ', countryCode: 'OM', countryName: 'Oman', callingCode: '968', - regex: '^(+968|968)?[7-9]d{7}$', + regex: '^(\\+968|968)?[7-9]\\d{7}$', }, PK: { icon: '๐Ÿ‡ต๐Ÿ‡ฐ', countryCode: 'PK', countryName: 'Pakistan', callingCode: '92', - regex: '^(+92|92)?[3-9]d{9}$', + regex: '^(\\+92|92)?[3-9]\\d{9}$', }, PA: { icon: '๐Ÿ‡ต๐Ÿ‡ฆ', countryCode: 'PA', countryName: 'Panama', callingCode: '507', - regex: '^(+507|507)?[2-9]d{7}$', + regex: '^(\\+507|507)?[2-9]\\d{7}$', }, PG: { icon: '๐Ÿ‡ต๐Ÿ‡ฌ', countryCode: 'PG', countryName: 'Papua New Guinea', callingCode: '675', - regex: '^(+675|675)?[2-9]d{6}$', + regex: '^(\\+675|675)?[2-9]\\d{6}$', }, PY: { icon: '๐Ÿ‡ต๐Ÿ‡พ', countryCode: 'PY', countryName: 'Paraguay', callingCode: '595', - regex: '^(+595|595)?[1-9]d{7}$', + regex: '^(\\+595|595)?[1-9]\\d{7}$', }, PE: { icon: '๐Ÿ‡ต๐Ÿ‡ช', countryCode: 'PE', countryName: 'Peru', callingCode: '51', - regex: '^(+51|51)?[9]d{8}$', + regex: '^(\\+51|51)?[9]\\d{8}$', }, PH: { icon: '๐Ÿ‡ต๐Ÿ‡ญ', countryCode: 'PH', countryName: 'Philippines', callingCode: '63', - regex: '^(+63|63)?[9]d{9}$', + regex: '^(\\+63|63)?[9]\\d{9}$', }, PL: { icon: '๐Ÿ‡ต๐Ÿ‡ฑ', countryCode: 'PL', countryName: 'Poland', callingCode: '48', - regex: '^(+48|48)?[1-9]d{8}$', + regex: '^(\\+48|48)?[1-9]\\d{8}$', }, PT: { icon: '๐Ÿ‡ต๐Ÿ‡น', countryCode: 'PT', countryName: 'Portugal', callingCode: '351', - regex: '^(+351|351)?[2-9]d{8}$', + regex: '^(\\+351|351)?[2-9]\\d{8}$', }, PR: { icon: '๐Ÿ‡ต๐Ÿ‡ท', countryCode: 'PR', countryName: 'Puerto Rico', callingCode: '1787', - regex: '^(+1787|1787)?[1-9]d{6}$', + regex: '^(\\+1787|1787)?[1-9]\\d{6}$', }, QA: { icon: '๐Ÿ‡ถ๐Ÿ‡ฆ', countryCode: 'QA', countryName: 'Qatar', callingCode: '974', - regex: '^(+974|974)?[3-9]d{7}$', + regex: '^(\\+974|974)?[3-9]\\d{7}$', }, RO: { icon: '๐Ÿ‡ท๐Ÿ‡ด', countryCode: 'RO', countryName: 'Romania', callingCode: '40', - regex: '^(+40|40)?[1-9]d{8}$', + regex: '^(\\+40|40)?[1-9]\\d{8}$', }, RU: { icon: '๐Ÿ‡ท๐Ÿ‡บ', countryCode: 'RU', countryName: 'Russia', callingCode: '7', - regex: '^(+7|7)?[1-9]d{9}$', + regex: '^(\\+7|7)?[1-9]\\d{9}$', }, RW: { icon: '๐Ÿ‡ท๐Ÿ‡ผ', countryCode: 'RW', countryName: 'Rwanda', callingCode: '250', - regex: '^(+250|250)?[7-9]d{8}$', + regex: '^(\\+250|250)?[7-9]\\d{8}$', }, KN: { icon: '๐Ÿ‡ฐ๐Ÿ‡ณ', countryCode: 'KN', countryName: 'Saint Kitts and Nevis', callingCode: '1869', - regex: '^(+1869|1869)?[2-9]d{6}$', + regex: '^(\\+1869|1869)?[2-9]\\d{6}$', }, SC: { icon: '๐Ÿ‡ธ๐Ÿ‡จ', countryCode: 'SC', countryName: 'Seychelles', callingCode: '248', - regex: '^(+248|248)?[2-9]d{6}$', + regex: '^(\\+248|248)?[2-9]\\d{6}$', }, LC: { icon: '๐Ÿ‡ฑ๐Ÿ‡จ', countryCode: 'LC', countryName: 'Saint Lucia', callingCode: '1758', - regex: '^(+1758|1758)?[2-9]d{6}$', + regex: '^(\\+1758|1758)?[2-9]\\d{6}$', }, SM: { icon: '๐Ÿ‡ธ๐Ÿ‡ฒ', countryCode: 'SM', countryName: 'San Marino', callingCode: '378', - regex: '^(+378|378)?[2-9]d{5}$', + regex: '^(\\+378|378)?[2-9]\\d{5}$', }, ST: { icon: '๐Ÿ‡ธ๐Ÿ‡น', countryCode: 'ST', countryName: 'Sรฃo Tomรฉ and Prรญncipe', callingCode: '239', - regex: '^(+239|239)?[2-9]d{6}$', + regex: '^(\\+239|239)?[2-9]\\d{6}$', }, SA: { icon: '๐Ÿ‡ธ๐Ÿ‡ฆ', countryCode: 'SA', countryName: 'Saudi Arabia', callingCode: '966', - regex: '^(+966|966)?[5-9]d{8}$', + regex: '^(\\+966|966)?[5-9]\\d{8}$', }, SN: { icon: '๐Ÿ‡ธ๐Ÿ‡ณ', countryCode: 'SN', countryName: 'Senegal', callingCode: '221', - regex: '^(+221|221)?[7-9]d{7}$', + regex: '^(\\+221|221)?[7-9]\\d{7}$', }, RS: { icon: '๐Ÿ‡ท๐Ÿ‡ธ', countryCode: 'RS', countryName: 'Serbia', callingCode: '381', - regex: '^(+381|381)?[2-9]d{8}$', + regex: '^(\\+381|381)?[2-9]\\d{8}$', }, SG: { icon: '๐Ÿ‡ธ๐Ÿ‡ฌ', countryCode: 'SG', countryName: 'Singapore', callingCode: '65', - regex: '^(+65|65)?[3-9]d{7}$', + regex: '^(\\+65|65)?[3-9]\\d{7}$', }, SX: { icon: '๐Ÿ‡ธ๐Ÿ‡ฝ', countryCode: 'SX', countryName: 'Sint Maarten', callingCode: '1721', - regex: '^(+1721|1721)?[2-9]d{6}$', + regex: '^(\\+1721|1721)?[2-9]\\d{6}$', }, SK: { icon: '๐Ÿ‡ธ๐Ÿ‡ฐ', countryCode: 'SK', countryName: 'Slovakia', callingCode: '421', - regex: '^(+421|421)?[2-9]d{8}$', + regex: '^(\\+421|421)?[2-9]\\d{8}$', }, SI: { icon: '๐Ÿ‡ธ๐Ÿ‡ฎ', countryCode: 'SI', countryName: 'Slovenia', callingCode: '386', - regex: '^(+386|386)?[2-9]d{7}$', + regex: '^(\\+386|386)?[2-9]\\d{7}$', }, SO: { icon: '๐Ÿ‡ธ๐Ÿ‡ด', countryCode: 'SO', countryName: 'Somalia', callingCode: '252', - regex: '^(+252|252)?[2-9]d{7}$', + regex: '^(\\+252|252)?[2-9]\\d{7}$', }, ZA: { icon: '๐Ÿ‡ฟ๐Ÿ‡ฆ', countryCode: 'ZA', countryName: 'South Africa', callingCode: '27', - regex: '^(+27|27)?[6-9]d{8}$', + regex: '^(\\+27|27)?[6-9]\\d{8}$', }, KR: { icon: '๐Ÿ‡ฐ๐Ÿ‡ท', countryCode: 'KR', countryName: 'South Korea', callingCode: '82', - regex: '^(+82|82)?[1-9]d{8}$', + regex: '^(\\+82|82)?[1-9]\\d{8}$', }, SS: { icon: '๐Ÿ‡ธ๐Ÿ‡ธ', countryCode: 'SS', countryName: 'South Sudan', callingCode: '211', - regex: '^(+211|211)?[1-9]d{8}$', + regex: '^(\\+211|211)?[1-9]\\d{8}$', }, ES: { icon: '๐Ÿ‡ช๐Ÿ‡ธ', countryCode: 'ES', countryName: 'Spain', callingCode: '34', - regex: '^(+34|34)?[6-9]d{8}$', + regex: '^(\\+34|34)?[6-9]\\d{8}$', }, LK: { icon: '๐Ÿ‡ฑ๐Ÿ‡ฐ', countryCode: 'LK', countryName: 'Sri Lanka', callingCode: '94', - regex: '^(+94|94)?[7-9]d{8}$', + regex: '^(\\+94|94)?[7-9]\\d{8}$', }, SD: { icon: '๐Ÿ‡ธ๐Ÿ‡ฉ', countryCode: 'SD', countryName: 'Sudan', callingCode: '249', - regex: '^(+249|249)?[1-9]d{8}$', + regex: '^(\\+249|249)?[1-9]\\d{8}$', }, SR: { icon: '๐Ÿ‡ธ๐Ÿ‡ท', countryCode: 'SR', countryName: 'Suriname', callingCode: '597', - regex: '^(+597|597)?[7-9]d{6}$', + regex: '^(\\+597|597)?[7-9]\\d{6}$', }, SZ: { icon: '๐Ÿ‡ธ๐Ÿ‡ฟ', countryCode: 'SZ', countryName: 'Eswatini', callingCode: '268', - regex: '^(+268|268)?[2-9]d{6}$', + regex: '^(\\+268|268)?[2-9]\\d{6}$', }, SE: { icon: '๐Ÿ‡ธ๐Ÿ‡ช', countryCode: 'SE', countryName: 'Sweden', callingCode: '46', - regex: '^(+46|46)?[2-9]d{7}$', + regex: '^(\\+46|46)?[2-9]\\d{7}$', }, CH: { icon: '๐Ÿ‡จ๐Ÿ‡ญ', countryCode: 'CH', countryName: 'Switzerland', callingCode: '41', - regex: '^(+41|41)?[2-9]d{7}$', + regex: '^(\\+41|41)?[2-9]\\d{7}$', }, SY: { icon: '๐Ÿ‡ธ๐Ÿ‡พ', countryCode: 'SY', countryName: 'Syria', callingCode: '963', - regex: '^(+963|963)?[1-9]d{8}$', + regex: '^(\\+963|963)?[1-9]\\d{8}$', }, TJ: { icon: '๐Ÿ‡น๐Ÿ‡ฏ', countryCode: 'TJ', countryName: 'Tajikistan', callingCode: '992', - regex: '^(+992|992)?[9]d{8}$', + regex: '^(\\+992|992)?[9]\\d{8}$', }, TZ: { icon: '๐Ÿ‡น๐Ÿ‡ฟ', countryCode: 'TZ', countryName: 'Tanzania', callingCode: '255', - regex: '^(+255|255)?[7-9]d{8}$', + regex: '^(\\+255|255)?[7-9]\\d{8}$', }, TH: { icon: '๐Ÿ‡น๐Ÿ‡ญ', countryCode: 'TH', countryName: 'Thailand', callingCode: '66', - regex: '^(+66|66)?[8-9]d{8}$', + regex: '^(\\+66|66)?[8-9]\\d{8}$', }, TG: { icon: '๐Ÿ‡น๐Ÿ‡ฌ', countryCode: 'TG', countryName: 'Togo', callingCode: '228', - regex: '^(+228|228)?[2-9]d{6}$', + regex: '^(\\+228|228)?[2-9]\\d{6}$', }, TO: { icon: '๐Ÿ‡น๐Ÿ‡ด', countryCode: 'TO', countryName: 'Tonga', callingCode: '676', - regex: '^(+676|676)?[2-9]d{5}$', + regex: '^(\\+676|676)?[2-9]\\d{5}$', }, TT: { icon: '๐Ÿ‡น๐Ÿ‡น', countryCode: 'TT', countryName: 'Trinidad and Tobago', callingCode: '1868', - regex: '^(+1868|1868)?[2-9]d{6}$', + regex: '^(\\+1868|1868)?[2-9]\\d{6}$', }, TN: { icon: '๐Ÿ‡น๐Ÿ‡ณ', countryCode: 'TN', countryName: 'Tunisia', callingCode: '216', - regex: '^(+216|216)?[2-9]d{7}$', + regex: '^(\\+216|216)?[2-9]\\d{7}$', }, TR: { icon: '๐Ÿ‡น๐Ÿ‡ท', countryCode: 'TR', countryName: 'Turkey', callingCode: '90', - regex: '^(+90|90)?[5-9]d{9}$', + regex: '^(\\+90|90)?[5-9]\\d{9}$', }, TM: { icon: '๐Ÿ‡น๐Ÿ‡ฒ', countryCode: 'TM', countryName: 'Turkmenistan', callingCode: '993', - regex: '^(+993|993)?[1-9]d{8}$', + regex: '^(\\+993|993)?[1-9]\\d{8}$', }, TV: { icon: '๐Ÿ‡น๐Ÿ‡ป', countryCode: 'TV', countryName: 'Tuvalu', callingCode: '688', - regex: '^(+688|688)?[2-9]d{5}$', + regex: '^(\\+688|688)?[2-9]\\d{5}$', }, UG: { icon: '๐Ÿ‡บ๐Ÿ‡ฌ', countryCode: 'UG', countryName: 'Uganda', callingCode: '256', - regex: '^(+256|256)?[7-9]d{8}$', + regex: '^(\\+256|256)?[7-9]\\d{8}$', }, UA: { icon: '๐Ÿ‡บ๐Ÿ‡ฆ', countryCode: 'UA', countryName: 'Ukraine', callingCode: '380', - regex: '^(+380|380)?[1-9]d{8}$', + regex: '^(\\+380|380)?[1-9]\\d{8}$', }, AE: { icon: '๐Ÿ‡ฆ๐Ÿ‡ช', countryCode: 'AE', countryName: 'United Arab Emirates', callingCode: '971', - regex: '^(+971|971)?[5-9]d{7}$', + regex: '^(\\+971|971)?[5-9]\\d{7}$', }, GB: { icon: '๐Ÿ‡ฌ๐Ÿ‡ง', countryCode: 'GB', countryName: 'United Kingdom', callingCode: '44', - regex: '^(+44|44)?[1-9]d{8}$', + regex: '^(\\+44|44)?[1-9]\\d{8}$', }, US: { icon: '๐Ÿ‡บ๐Ÿ‡ธ', countryCode: 'US', countryName: 'United States', callingCode: '1', - regex: '^(+1|1)?[2-9]d{9}$', + regex: '^(\\+1|1)?[2-9]\\d{9}$', }, UY: { icon: '๐Ÿ‡บ๐Ÿ‡พ', countryCode: 'UY', countryName: 'Uruguay', callingCode: '598', - regex: '^(+598|598)?[2-9]d{7}$', + regex: '^(\\+598|598)?[2-9]\\d{7}$', }, UZ: { icon: '๐Ÿ‡บ๐Ÿ‡ฟ', countryCode: 'UZ', countryName: 'Uzbekistan', callingCode: '998', - regex: '^(+998|998)?[1-9]d{8}$', + regex: '^(\\+998|998)?[1-9]\\d{8}$', }, VU: { icon: '๐Ÿ‡ป๐Ÿ‡บ', countryCode: 'VU', countryName: 'Vanuatu', callingCode: '678', - regex: '^(+678|678)?[2-9]d{5}$', + regex: '^(\\+678|678)?[2-9]\\d{5}$', }, VE: { icon: '๐Ÿ‡ป๐Ÿ‡ช', countryCode: 'VE', countryName: 'Venezuela', callingCode: '58', - regex: '^(+58|58)?[4-9]d{8}$', + regex: '^(\\+58|58)?[4-9]\\d{8}$', }, VN: { icon: '๐Ÿ‡ป๐Ÿ‡ณ', countryCode: 'VN', countryName: 'Vietnam', callingCode: '84', - regex: '^(+84|84)?[1-9]d{8}$', + regex: '^(\\+84|84)?[1-9]\\d{8}$', }, WF: { icon: '๐Ÿ‡ผ๐Ÿ‡ซ', countryCode: 'WF', countryName: 'Wallis and Futuna', callingCode: '681', - regex: '^(+681|681)?[2-9]d{5}$', + regex: '^(\\+681|681)?[2-9]\\d{5}$', }, YE: { icon: '๐Ÿ‡พ๐Ÿ‡ช', countryCode: 'YE', countryName: 'Yemen', callingCode: '967', - regex: '^(+967|967)?[1-9]d{7}$', + regex: '^(\\+967|967)?[1-9]\\d{7}$', }, ZM: { icon: '๐Ÿ‡ฟ๐Ÿ‡ฒ', countryCode: 'ZM', countryName: 'Zambia', callingCode: '260', - regex: '^(+260|260)?[9]d{8}$', + regex: '^(\\+260|260)?[9]\\d{8}$', }, ZW: { icon: '๐Ÿ‡ฟ๐Ÿ‡ผ', countryCode: 'ZW', countryName: 'Zimbabwe', callingCode: '263', - regex: '^(+263|263)?[7-9]d{8}$', + regex: '^(\\+263|263)?[7-9]\\d{8}$', }, }; diff --git a/src/main/country-picker/CountryPickerModal.tsx b/src/main/country-picker/CountryPickerModal.tsx index 8cf3b87..43e9428 100644 --- a/src/main/country-picker/CountryPickerModal.tsx +++ b/src/main/country-picker/CountryPickerModal.tsx @@ -1,60 +1,77 @@ -import React, { useRef, useState } from 'react'; -import { Animated, Dimensions, StatusBar, useColorScheme } from 'react-native'; -import { pickerStyles } from './styles/picker.style'; +import { forwardRef, useImperativeHandle, useState } from 'react'; +import { + Animated, + Dimensions, + Modal, + SafeAreaView, + StatusBar, +} from 'react-native'; +import Picker from './Picker'; +import { type EachCountry } from '../constants/constants.d'; +import { type PickerOpenRef } from './Picker.d'; +import { countryPickerStyles } from './styles/picker.style'; const { height } = Dimensions.get('window'); -interface props { - component?: React.FC; - componentProps?: any; -} -declare global { - var openCountryModal: (value: props) => void; +const statusBarHeight = StatusBar.currentHeight || 0; +interface Props { + darkMode: boolean; + onSelect: (value: EachCountry) => void; } -const CountryPickerModal: React.FC = () => { - const scheme = useColorScheme(); - const styles = pickerStyles(scheme); - const [isOpen, setIsOpen] = useState(false); - const animationValue = useState(new Animated.Value(height))[0]; - const statusBarHeight = StatusBar.currentHeight || 0; - const componentRef = useRef(); - global.openCountryModal = ({ component = null, componentProps = null }) => { - toggleAnimation(); - component - ? (componentRef.current = { component, componentProps }) - : (componentRef.current = null); - }; +const CountryPickerModal = forwardRef( + ({ darkMode, onSelect }, ref) => { + const [isOpen, setIsOpen] = useState(false); + const animationValue = useState(new Animated.Value(height))[0]; - const toggleAnimation = () => { - if (isOpen) { - Animated.spring(animationValue, { - toValue: height, - friction: 8, - tension: 50, - useNativeDriver: true, - }).start(() => setIsOpen(false)); - } else { - setIsOpen(true); - Animated.spring(animationValue, { - toValue: statusBarHeight, - friction: 8, - tension: 50, - useNativeDriver: true, - }).start(); - } - }; + useImperativeHandle(ref, () => ({ + openModal: () => { + toggleAnimation(true); + setIsOpen(true); + }, + })); + const toggleAnimation = (open: boolean) => { + if (open) { + Animated.spring(animationValue, { + toValue: height, // Move modal out of view + friction: 8, + tension: 50, + useNativeDriver: true, + }).start(); + } else { + Animated.spring(animationValue, { + toValue: statusBarHeight, // Start modal below the status bar + friction: 8, + tension: 50, + useNativeDriver: true, + }).start(); + } + }; - const animatedStyle = { - transform: [{ translateY: animationValue }], - }; - const Component = componentRef.current?.component; - return ( - - {Component && isOpen && ( - - )} - - ); -}; + const animatedStyle = { + transform: [{ translateY: animationValue }], + }; + const closeModal = () => { + toggleAnimation(false); + setIsOpen(false); + }; + return ( + + {isOpen && ( + + + + + + )} + + ); + } +); export default CountryPickerModal; diff --git a/src/main/country-picker/Picker.d.ts b/src/main/country-picker/Picker.d.ts index f697776..7557985 100644 --- a/src/main/country-picker/Picker.d.ts +++ b/src/main/country-picker/Picker.d.ts @@ -2,11 +2,19 @@ import type { EachCountry } from '../constants/constants.d'; interface PickerProps { onSelect: (value: EachCountry) => void; + darkMode: boolean; + closeModal: () => void; } interface EachOptionProps { onSelect?: (value: EachCountry) => void; item: EachCountry; index: number; + darkMode: boolean; + closeModal: () => void; } -export type { PickerProps, EachOptionProps }; + +interface PickerOpenRef { + openModal: () => void; +} +export type { PickerProps, PickerOpenRef, EachOptionProps }; diff --git a/src/main/country-picker/Picker.tsx b/src/main/country-picker/Picker.tsx index d3ee381..7c2a0a0 100644 --- a/src/main/country-picker/Picker.tsx +++ b/src/main/country-picker/Picker.tsx @@ -5,7 +5,6 @@ import { View, TextInput, Image, - useColorScheme, } from 'react-native'; import React, { useState } from 'react'; import constants from '../constants/constants'; @@ -13,20 +12,25 @@ import { customBorder, pickerStyles } from './styles/picker.style'; import assets from '../assets/assets'; import type { EachOptionProps, PickerProps } from './Picker.d'; -const EachOption: React.FC = ({ onSelect, item, index }) => { +const EachOption: React.FC = ({ + onSelect, + item, + index, + darkMode, + closeModal, +}) => { const [select, setSelect] = useState(false); - const scheme = useColorScheme(); - const styles = pickerStyles(scheme); + const styles = pickerStyles(darkMode); const onPress = () => { setSelect(!select); onSelect && onSelect(item); - global.openCountryModal({}); + closeModal(); }; return ( {item?.icon} @@ -38,9 +42,8 @@ const EachOption: React.FC = ({ onSelect, item, index }) => { ); }; -const Picker: React.FC = ({ onSelect }) => { - const scheme = useColorScheme(); - const styles = pickerStyles(scheme); +const Picker: React.FC = ({ onSelect, darkMode, closeModal }) => { + const styles = pickerStyles(darkMode); const [country, setCountry] = useState(Object.values(constants)); const handleChangeText = (text: string) => { if (text === '') { @@ -58,14 +61,11 @@ const Picker: React.FC = ({ onSelect }) => { global.openCountryModal({})} + onPress={closeModal} children={ = ({ onSelect }) => { @@ -92,8 +93,10 @@ const Picker: React.FC = ({ onSelect }) => { ); }} diff --git a/src/main/country-picker/styles/picker.style.ts b/src/main/country-picker/styles/picker.style.ts index 709c936..09b10f8 100644 --- a/src/main/country-picker/styles/picker.style.ts +++ b/src/main/country-picker/styles/picker.style.ts @@ -1,7 +1,6 @@ -import { type ColorSchemeName, Dimensions, StyleSheet } from 'react-native'; -const { height } = Dimensions.get('window'); +import { StyleSheet } from 'react-native'; -const pickerStyles = (scheme: ColorSchemeName) => +const pickerStyles = (isDark: boolean) => StyleSheet.create({ eachContainer: { flexDirection: 'row', @@ -10,21 +9,14 @@ const pickerStyles = (scheme: ColorSchemeName) => alignItems: 'center', }, eachTextContainer: { - color: scheme === 'dark' ? '#F8F8F8' : '#1B1D20', + color: isDark ? '#F8F8F8' : '#1B1D20', fontSize: 18, }, eachText: { fontSize: 22, lineHeight: 0 }, searchInput: { flexGrow: 1, fontSize: 16, - color: scheme !== 'dark' ? 'black' : 'white', - }, - container: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - height: height - 64, + color: isDark ? '#FFFFFF' : '#000000', }, flatListContainer: { paddingTop: 8, @@ -32,7 +24,7 @@ const pickerStyles = (scheme: ColorSchemeName) => }, bgWhite: { flex: 1, - backgroundColor: scheme === 'dark' ? 'black' : '#FAFAFB', + backgroundColor: isDark ? '#000000' : '#FFFFFF', }, flexRow: { flexDirection: 'row', @@ -50,7 +42,7 @@ const pickerStyles = (scheme: ColorSchemeName) => }, }); -const customBorder = (index: number, scheme: ColorSchemeName) => +const customBorder = (index: number, isDark: boolean) => StyleSheet.create({ border: { paddingTop: index === 0 ? 0 : 16, @@ -59,10 +51,15 @@ const customBorder = (index: number, scheme: ColorSchemeName) => paddingLeft: 20, borderTopWidth: index === 0 ? 0 : 1, borderTopColor: - index === 0 - ? '' - : `rgba(${scheme === 'dark' ? '255,255,255' : '0,0,0'},0.2)`, + index === 0 ? '' : `rgba(${isDark ? '255,255,255' : '0,0,0'},0.2)`, }, }); -export { pickerStyles, customBorder }; +const countryPickerStyles = StyleSheet.create({ + flex: { flex: 1 }, + mb40: { + marginBottom: -40, + }, +}); + +export { pickerStyles, countryPickerStyles, customBorder }; diff --git a/src/styles.d.ts b/src/styles.d.ts index 09997d7..c1c5b06 100644 --- a/src/styles.d.ts +++ b/src/styles.d.ts @@ -35,14 +35,14 @@ type WidthStyle = { width: DimensionValue; }; -interface Styles { +type Styles = (isDark: boolean) => { container: ContainerStyle; flexRow: FlexRowStyle; gap10: GapStyle; ft28: FontSize28Style; ft16: FontSize16Style; width75: WidthStyle; -} +}; declare const Styles: Styles; diff --git a/src/styles.ts b/src/styles.ts index c2250db..9d40c4c 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -1,22 +1,24 @@ import { StyleSheet } from 'react-native'; import Styles from './styles.d'; -const styles: Styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - gap: 16, - borderWidth: 1, - borderColor: '#323436', - borderRadius: 16, - paddingVertical: 8, - paddingHorizontal: 22, - flexShrink: 1, - }, - flexRow: { flexDirection: 'row', alignItems: 'center', gap: 8 }, - gap10: { gap: 10 }, - ft28: { fontSize: 28 }, - ft16: { fontSize: 16, color: 'black' }, - width75: { width: '75%' }, -}); +const styles: Styles = (isDark: boolean) => + StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + gap: 16, + borderWidth: 1, + borderColor: isDark ? '#DDDDDE' : '#323436', + borderRadius: 10, + paddingVertical: 8, + paddingHorizontal: 22, + flexShrink: 1, + backgroundColor: isDark ? '#1B1D20' : '#FAFAFB', + }, + flexRow: { flexDirection: 'row', alignItems: 'center', gap: 8 }, + gap10: { gap: 10 }, + ft28: { fontSize: 28 }, + ft16: { fontSize: 16, color: isDark ? '#FFFFFF' : '#000000' }, + width75: { width: '75%' }, + }); export default styles;