react-native-phone-country-input 1.0.0

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "react-native-phone-country-input",
+  "version": "1.0.0",
+  "description": "International phone number input for React Native with country selection, masking, and a custom keyboard",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/*.test.js",
+    "!**/*.test.js.map",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/*.html"
+  ],
+  "scripts": {
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "start": "expo start",
+    "build": "bob build",
+    "prepare": "bob build",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\" && prettier -c \"**/*.{js,jsx,ts,tsx,json}\"",
+    "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
+    "web": "expo start --web",
+    "expo:prebuild": "expo prebuild",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2.0.0",
+    "@react-native-clipboard/clipboard": ">=1.0.0",
+    "expo-localization": ">=17.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.71.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-teleport": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-clipboard/clipboard": "^1.16.3",
+    "@react-navigation/native": "^7.1.6",
+    "@react-navigation/stack": "^7.4.8",
+    "@types/jest": "^29.5.14",
+    "@types/react": "~19.1.10",
+    "eslint": "^9.25.1",
+    "eslint-config-expo": "~10.0.0",
+    "eslint-config-prettier": "^10.1.2",
+    "expo": "^54.0.0",
+    "expo-localization": "~17.0.9",
+    "expo-status-bar": "~3.0.8",
+    "jest": "^29.7.0",
+    "jest-expo": "^56.0.5",
+    "prettier": "^3.2.5",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.30.3",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-teleport": "^1.1.8",
+    "typescript": "~5.9.2"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "testMatch": [
+      "**/*.test.(ts|tsx)"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+    ]
+  }
+}

package/src/CountrySelector/CountrySelector.tsx

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { CountryCode } from '../consts/regions';
+import { Modal, Pressable, Text } from 'react-native';
+import { CountrySelectorModal } from './CountrySelectorModal';
+import { Feather } from '@expo/vector-icons';
+
+// button for opening the country selector modal
+interface CountrySelectorButtonProps extends React.ComponentProps<typeof Pressable> {
+  value: CountryCode | null;
+  underlineButton?: React.ComponentType<React.ComponentProps<typeof Pressable>> | null;
+  isOpen?: boolean;
+}
+
+//
+
+function CountrySelectorButton(props: CountrySelectorButtonProps) {
+  const Button = useMemo(() => {
+    if (props.underlineButton) {
+      console.debug('Using custom button for CountrySelectorButton');
+      return props.underlineButton;
+    }
+    console.debug('Using default Pressable for CountrySelectorButton');
+    return Pressable;
+  }, [props.underlineButton]);
+  return (
+    // This could be a simple button that, when pressed, opens the country selector modal
+    <Button {...props}>
+      <Text>{props.value ? props.value.flag : '🏴‍☠️'}</Text>
+      <Feather name={`chevron-${props.isOpen ? 'up' : 'down'}`} size={14} color="gray" />
+    </Button>
+  );
+}
+export interface CountrySelectorProps extends React.ComponentProps<typeof CountrySelectorButton> {
+  filtedredCountryCodes?: CountryCode[] | null;
+  onSelectCountry?: (country: CountryCode) => void;
+  value: CountryCode | null;
+  underlineButton?: React.ComponentType<React.ComponentProps<typeof Pressable>> | null;
+  underlineModal?: React.ComponentType<React.ComponentProps<typeof Modal>> | null;
+  onOpenChange?: (open: boolean) => void;
+}
+export function CountrySelector(props: CountrySelectorProps) {
+  const [internalValue, setInternalValue] = useState(props.value);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const { filtedredCountryCodes, onSelectCountry, onOpenChange } = props;
+
+  const isControlled = props.isOpen !== undefined;
+  const effectiveIsOpen = isControlled ? (props.isOpen ?? false) : internalIsOpen;
+
+  const toggle = useCallback(() => {
+    const next = !effectiveIsOpen;
+    if (!isControlled) setInternalIsOpen(next);
+    onOpenChange?.(next);
+  }, [effectiveIsOpen, isControlled, onOpenChange]);
+
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
+  return (
+    <>
+      <CountrySelectorButton
+        {...props}
+        underlineButton={props.underlineButton}
+        value={internalValue}
+        isOpen={effectiveIsOpen}
+        onPress={toggle}
+      />
+      <CountrySelectorModal
+        value={internalValue}
+        onSelectCountry={onSelectCountry ?? (() => {})}
+        UserCountryCodes={filtedredCountryCodes}
+        isOpen={effectiveIsOpen}
+        toggleModalVisablity={toggle}
+      />
+    </>
+  );
+}

package/src/CountrySelector/CountrySelectorModal.tsx

@@ -0,0 +1,280 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  StyleSheet,
+  useWindowDimensions,
+  TouchableWithoutFeedback,
+  TextInput,
+  SectionList,
+  Pressable,
+} from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Feather } from '@expo/vector-icons';
+import { CountryCode } from '../consts/regions';
+import { getDefaultRegionWithNullableState } from '../utils/getDefaultRegion';
+import {
+  spacing,
+  borderWidth as borders,
+  fontSize as fontSizes,
+  padding,
+  borderWidth,
+  radius,
+  gap,
+  SIDE_SCREEN_PADDING,
+} from '../Styling/Sizing';
+import { colors } from '../Styling/Colors';
+
+export interface CountrySelectorModalProps extends React.ComponentProps<typeof Modal> {
+  underlineModal?: React.ComponentType<React.ComponentProps<typeof Modal>> | null;
+  value: CountryCode | null;
+  UserCountryCodes?: CountryCode[] | null;
+  onSelectCountry: (country: CountryCode) => void;
+  isOpen?: boolean;
+  toggleModalVisablity: () => void;
+}
+
+const CLICK_COUNTS_KEY = '@country_selector_click_counts';
+const RECENT_SECTION_COUNT = 4;
+
+export function CountrySelectorModal(props: CountrySelectorModalProps) {
+  const { height } = useWindowDimensions();
+  const [searchValue, setSearchValue] = useState('');
+  const [clickCounts, setClickCounts] = useState<Record<string, number>>({});
+
+  useEffect(() => {
+    AsyncStorage.getItem(CLICK_COUNTS_KEY).then((raw) => {
+      if (raw) setClickCounts(JSON.parse(raw));
+    });
+  }, []);
+
+  const recordClick = useCallback(
+    async (country: CountryCode) => {
+      const updated = { ...clickCounts, [country.id]: (clickCounts[country.id] ?? 0) + 1 };
+      setClickCounts(updated);
+      await AsyncStorage.setItem(CLICK_COUNTS_KEY, JSON.stringify(updated));
+    },
+    [clickCounts]
+  );
+
+  const recentSection = useMemo(() => {
+    const allCountries = props.UserCountryCodes ?? [];
+    const defaultCountry = getDefaultRegionWithNullableState(allCountries);
+
+    const topClicked = Object.entries(clickCounts)
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, RECENT_SECTION_COUNT)
+      .map(([id]) => allCountries.find((c) => c.id === id))
+      .filter((c): c is CountryCode => c != null);
+
+    if (!defaultCountry && topClicked.length === 0) return null;
+
+    const data: CountryCode[] = [];
+    if (defaultCountry) data.push(defaultCountry);
+    for (const c of topClicked) {
+      if (!data.some((d) => d.id === c.id)) data.push(c);
+    }
+
+    return { title: 'Recent Countries', data };
+  }, [clickCounts, props.UserCountryCodes]);
+
+  const sections = useMemo(() => {
+    const sorted = [...(props.UserCountryCodes ?? [])].sort((a, b) => a.name.localeCompare(b.name));
+    const filtered =
+      searchValue.length < 1
+        ? sorted
+        : sorted.filter(
+            ({ name, code, id }) =>
+              name.toLowerCase().includes(searchValue.toLowerCase()) ||
+              code.includes(searchValue) ||
+              id.toLowerCase().includes(searchValue.toLowerCase())
+          );
+
+    const grouped = filtered.reduce<Record<string, CountryCode[]>>((acc, country) => {
+      let letter = country.name[0].toUpperCase();
+      if (letter === 'Å') {
+        letter = 'A';
+      }
+      if (!acc[letter]) acc[letter] = [];
+      acc[letter].push(country);
+      return acc;
+    }, {});
+
+    const alphaSections = Object.keys(grouped)
+      .sort()
+      .map((letter) => ({ title: letter, data: grouped[letter] }));
+
+    return alphaSections;
+  }, [props.UserCountryCodes, searchValue]);
+
+  const allSections = useMemo(() => {
+    if (searchValue.length > 0 || !recentSection) return sections;
+    return [recentSection, ...sections];
+  }, [recentSection, sections, searchValue]);
+
+  const UserModal = useMemo(() => {
+    if (props.underlineModal) {
+      console.debug('underlineModal');
+      return props.underlineModal;
+    }
+    console.debug('underlineModal - underfine');
+    return undefined;
+  }, [props.underlineModal]);
+
+  if (UserModal) {
+    return <UserModal {...props} />;
+  }
+  return (
+    <Modal animationType="slide" visible={props.isOpen} transparent>
+      <View style={styles.overlay}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            props.toggleModalVisablity();
+            setSearchValue('');
+          }}>
+          <View style={StyleSheet.absoluteFillObject} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.container, { height: height / 2.5 }]}>
+          <View
+            style={{
+              backgroundColor: colors.white,
+              padding: padding[3],
+              borderTopLeftRadius: radius['3xl'],
+              borderTopRightRadius: radius['3xl'],
+            }}>
+            <View style={styles.searchContainer}>
+              <Feather name="search" size={16} color="gray" />
+              <TextInput
+                placeholder="Country name or code"
+                style={styles.searchInput}
+                value={searchValue}
+                onChangeText={(value) => {
+                  setSearchValue(value);
+                }}
+              />
+            </View>
+          </View>
+          <SectionList
+            ItemSeparatorComponent={() => <View style={styles.divider} />}
+            sections={allSections}
+            keyExtractor={(item, index) => `${item.id}-${index}`}
+            style={{
+              borderTopLeftRadius: radius['lg'],
+              borderTopRightRadius: radius['lg'],
+            }}
+            renderSectionHeader={({ section }) => (
+              <View style={styles.sectionHeader}>
+                <Text style={styles.sectionHeaderText}>{section.title}</Text>
+              </View>
+            )}
+            renderItem={({ item, index, section }) => {
+              const isSelected = item.id === props.value?.id;
+              const isFirst = index === 0;
+              const isLast = index === section.data.length - 1;
+              return (
+                <Pressable
+                  onPress={() => {
+                    recordClick(item);
+                    props.onSelectCountry(item);
+                    props.toggleModalVisablity();
+                    setSearchValue('');
+                  }}
+                  style={{
+                    padding: spacing[3],
+                    gap: spacing[1],
+                    marginHorizontal: SIDE_SCREEN_PADDING,
+                    backgroundColor: isSelected ? colors.blue[50] : colors.white,
+                    borderTopLeftRadius: isFirst ? radius.lg : 0,
+                    borderTopRightRadius: isFirst ? radius.lg : 0,
+                    borderBottomLeftRadius: isLast ? radius.lg : 0,
+                    borderBottomRightRadius: isLast ? radius.lg : 0,
+                  }}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      gap: spacing[1],
+                      alignItems: 'center',
+                    }}>
+                    <Text>{item.flag}</Text>
+                    <Text
+                      style={[{ flexShrink: 1 }, isSelected ? { fontWeight: '600' } : undefined]}>
+                      {item.name}
+                    </Text>
+                    <Text>({item.code})</Text>
+                    {isSelected && (
+                      <Feather
+                        name="check"
+                        size={14}
+                        color={colors.blue[500]}
+                        style={{ marginLeft: 'auto' }}
+                      />
+                    )}
+                  </View>
+                  <View>
+                    <Text
+                      style={{
+                        fontSize: fontSizes.xs,
+                        color: colors.gray[400],
+                        paddingHorizontal: padding[0.5],
+                      }}>
+                      {item.code} {item.mask.replace(/\#/g, '_')}
+                    </Text>
+                  </View>
+                </Pressable>
+              );
+            }}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  container: {
+    backgroundColor: colors.gray[200],
+    // gap: gap[4],
+    borderTopLeftRadius: radius['3xl'],
+    borderTopRightRadius: radius['3xl'],
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+  },
+  searchContainer: {
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: borders.DEFAULT,
+    borderColor: colors.gray[100],
+    paddingHorizontal: spacing[1],
+    backgroundColor: colors.gray[300],
+    borderRadius: radius['2xl'],
+  },
+  searchInput: {
+    flex: 1,
+    padding: spacing[1],
+  },
+  divider: {
+    height: borderWidth.DEFAULT,
+    backgroundColor: colors.gray[200],
+    marginHorizontal: spacing[1.5],
+  },
+  sectionHeader: {
+    backgroundColor: colors.gray[200],
+    paddingHorizontal: SIDE_SCREEN_PADDING,
+    paddingVertical: spacing[2],
+  },
+  sectionHeaderText: {
+    fontSize: fontSizes.xs,
+    fontWeight: '700',
+    color: colors.gray[500],
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+  },
+});