react-native-phone-country-input 1.0.0

package/src/Keyboard/Keyboard.tsx

@@ -0,0 +1,322 @@
+import React, { memo, MutableRefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { GAP, KEYBOARD_LAYOUT, KEYPAD_KEY } from '../consts/KEYBOARD_LAYOUT';
+import KeypadRow from './KeypadRow';
+import { Pressable, View, StyleSheet, Dimensions, Modal, Text } from 'react-native';
+import { Portal } from 'react-native-teleport';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import KeyboardToolbar from './KeyboardToolbar';
+import { spacing, radius, padding } from '../Styling/Sizing';
+import { colors } from '../Styling/Colors';
+import { Feather } from '@expo/vector-icons';
+
+export interface PasteErrorModalProps extends React.ComponentProps<typeof Modal> {
+  isPasteErrorVisible: boolean;
+  dismissPasteError: () => void;
+}
+
+export interface CopySuccessModalProps extends React.ComponentProps<typeof Modal> {
+  isCopySuccessVisible: boolean;
+  dismissCopySuccess: () => void;
+}
+
+export interface KeyboardProps {
+  value?: string;
+  onKeyPress: (_value: KEYPAD_KEY) => void;
+  onCopy: () => void;
+  onPaste: () => Promise<boolean>;
+  isOpen: boolean;
+  onClose: () => void;
+  underlinePasteErrorModal?: React.ComponentType<PasteErrorModalProps> | null;
+  underlineCopySuccessModal?: React.ComponentType<CopySuccessModalProps> | null;
+}
+
+function Keyboard(props: KeyboardProps) {
+  const PasteErrorModal = useMemo(
+    () => props.underlinePasteErrorModal ?? null,
+    [props.underlinePasteErrorModal]
+  );
+  const CopySuccessModal = useMemo(
+    () => props.underlineCopySuccessModal ?? null,
+    [props.underlineCopySuccessModal]
+  );
+
+  const [isPasteErrorVisible, setIsPasteErrorVisible] = useState(false);
+  const dismissPasteError = useCallback(() => setIsPasteErrorVisible(false), []);
+
+  const [isCopySuccessVisible, setIsCopySuccessVisible] = useState(false);
+  const dismissCopySuccess = useCallback(() => setIsCopySuccessVisible(false), []);
+
+  const handlePaste = useCallback(() => {
+    props.onPaste().then((success) => {
+      if (!success) setIsPasteErrorVisible(true);
+    });
+  }, [props.onPaste]);
+
+  const handleCopy = useCallback(() => {
+    props.onCopy();
+    setIsCopySuccessVisible(true);
+  }, [props.onCopy]);
+
+  const isOpenShared = useSharedValue(props.isOpen);
+
+  useEffect(() => {
+    isOpenShared.value = props.isOpen;
+  }, [isOpenShared, props.isOpen]);
+
+  const height = useSharedValue(0);
+  const progress = useDerivedValue(() => withTiming(isOpenShared.value ? 0 : 1, { duration: 250 }));
+
+  const sheetStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: progress.value * 2 * height.value }],
+  }));
+
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value,
+    zIndex: isOpenShared.value ? 1 : withDelay(250, withTiming(-1, { duration: 0 })),
+  }));
+
+  const layout = useMemo(() => {
+    console.debug('-- ⚠️  Rerender Keyboard--');
+    return KEYBOARD_LAYOUT.map((row, i) => {
+      return <KeypadRow row={row} key={'row-' + i} onPress={props.onKeyPress} />;
+    });
+  }, [props.onKeyPress]);
+
+  const { height: screenHeight } = Dimensions.get('window');
+
+  return (
+    <Portal hostName="ipad-keyboard">
+      {props.isOpen && (
+        <Pressable style={[StyleSheet.absoluteFillObject, { zIndex: 0 }]} onPress={props.onClose} />
+      )}
+      <Animated.View
+        onLayout={(e) => {
+          height.value = e.nativeEvent.layout.height;
+        }}
+        style={[sheetStyles.sheet, { height: screenHeight / 2.5 }, sheetStyle, backdropStyle]}>
+        <View
+          style={{
+            flex: 1,
+            gap: GAP,
+            paddingBottom: spacing[14],
+            paddingHorizontal: spacing[4],
+          }}>
+          <KeyboardToolbar
+            onClose={props.onClose}
+            value={props.value}
+            onCopy={handleCopy}
+            onPaste={handlePaste}
+          />
+          {layout}
+        </View>
+      </Animated.View>
+      {PasteErrorModal ? (
+        <PasteErrorModal
+          visible={isPasteErrorVisible}
+          onRequestClose={dismissPasteError}
+          isPasteErrorVisible={isPasteErrorVisible}
+          dismissPasteError={dismissPasteError}
+          transparent
+          animationType="fade"
+        />
+      ) : (
+        <Modal
+          visible={isPasteErrorVisible}
+          onRequestClose={dismissPasteError}
+          transparent
+          animationType="fade">
+          <Pressable style={pasteErrorStyles.overlay} onPress={dismissPasteError}>
+            <View style={pasteErrorStyles.card}>
+              <View style={pasteErrorStyles.cardContent}>
+                <View style={pasteErrorStyles.textContent}>
+                  <View style={pasteErrorStyles.titleContainer}>
+                    <Feather name="alert-triangle" size={spacing[6]} />
+                    <Text style={pasteErrorStyles.title}>Cannot Paste</Text>
+                  </View>
+                  <Text style={pasteErrorStyles.message}>
+                    Clipboard does not contain a valid phone number.
+                  </Text>
+                </View>
+                <Pressable style={pasteErrorStyles.button} onPress={dismissPasteError}>
+                  <Text style={pasteErrorStyles.buttonText}>OK</Text>
+                </Pressable>
+              </View>
+            </View>
+          </Pressable>
+        </Modal>
+      )}
+      {CopySuccessModal ? (
+        <CopySuccessModal
+          visible={isCopySuccessVisible}
+          onRequestClose={dismissCopySuccess}
+          isCopySuccessVisible={isCopySuccessVisible}
+          dismissCopySuccess={dismissCopySuccess}
+          transparent
+          animationType="fade"
+        />
+      ) : (
+        <Modal
+          visible={isCopySuccessVisible}
+          onRequestClose={dismissCopySuccess}
+          transparent
+          animationType="fade">
+          <Pressable style={copySuccessStyles.overlay} onPress={dismissCopySuccess}>
+            <View style={copySuccessStyles.card}>
+              <View style={copySuccessStyles.cardContent}>
+                <View style={copySuccessStyles.textContent}>
+                  <View style={copySuccessStyles.titleContainer}>
+                    <Feather name="clipboard" size={spacing[6]} />
+                    <Text style={copySuccessStyles.title}>Copied</Text>
+                  </View>
+                  <Text style={copySuccessStyles.message}>Phone number copied to clipboard.</Text>
+                </View>
+                <Pressable style={copySuccessStyles.button} onPress={dismissCopySuccess}>
+                  <Text style={copySuccessStyles.buttonText}>OK</Text>
+                </Pressable>
+              </View>
+            </View>
+          </Pressable>
+        </Modal>
+      )}
+    </Portal>
+  );
+}
+
+export default memo(Keyboard);
+
+const sheetStyles = StyleSheet.create({
+  sheet: {
+    width: '100%',
+    position: 'absolute',
+    bottom: 0,
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    backgroundColor: '#D1D5DB',
+    zIndex: 3,
+    gap: 12,
+  },
+});
+
+const pasteErrorStyles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: spacing[6],
+  },
+  card: {
+    backgroundColor: colors.white,
+    borderRadius: radius.xl,
+    padding: padding[5],
+    width: '100%',
+    maxWidth: 250,
+    maxHeight: 220,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardContent: {},
+  textContent: {
+    flex: 4,
+    gap: spacing[2],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    gap: spacing[2],
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: spacing[6],
+    fontWeight: '600',
+    color: colors.black,
+  },
+  message: {
+    fontSize: 14,
+    color: colors.gray[500],
+    textAlign: 'center',
+  },
+  button: {
+    marginTop: spacing[2],
+    backgroundColor: colors.red[800],
+    borderRadius: radius.lg,
+    paddingVertical: spacing[2],
+    paddingHorizontal: spacing[8],
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: colors.white,
+    textAlign: 'center',
+  },
+});
+
+const copySuccessStyles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: spacing[6],
+  },
+  card: {
+    backgroundColor: colors.white,
+    borderRadius: radius.xl,
+    padding: padding[5],
+    width: '100%',
+    maxWidth: 250,
+    maxHeight: 220,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardContent: {},
+  textContent: {
+    flex: 4,
+    gap: spacing[2],
+    // justifyContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    gap: spacing[1],
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: spacing[6],
+    fontWeight: '600',
+    color: colors.black,
+  },
+  message: {
+    fontSize: 14,
+    color: colors.gray[500],
+
+    textAlign: 'center',
+  },
+  button: {
+    marginTop: spacing[2],
+    backgroundColor: colors.green[800],
+    borderRadius: radius.lg,
+    paddingVertical: spacing[2],
+    paddingHorizontal: spacing[8],
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: colors.white,
+    textAlign: 'center',
+  },
+});

package/src/Keyboard/KeyboardToolbar.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { GAP } from '../consts/KEYBOARD_LAYOUT';
+import { spacing } from '../Styling/Sizing';
+import { colors } from '../Styling/Colors';
+
+export interface KeyboardToolbarProps {
+  value?: string;
+  onClose: () => void;
+  onCopy?: () => void;
+  onPaste?: () => void;
+}
+
+export default function KeyboardToolbar({ onClose, value, onCopy, onPaste }: KeyboardToolbarProps) {
+  const isCopyDisabled = useMemo(() => {
+    return (value ?? '').length < 3;
+  }, [value]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.leftGroup}>
+        <Pressable disabled={isCopyDisabled} onPress={onCopy}>
+          <Feather name="copy" size={20} color={!isCopyDisabled ? '#000' : colors.gray[600]} />
+        </Pressable>
+        <Pressable onPress={onPaste}>
+          <Feather name="clipboard" size={20} color="#000" />
+        </Pressable>
+      </View>
+      <Pressable onPress={onClose}>
+        <Text style={styles.doneText}>Done</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 56,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: spacing[2],
+  },
+  leftGroup: {
+    flexDirection: 'row',
+    gap: GAP,
+  },
+  doneText: {
+    color: '#000',
+    fontSize: 16,
+  },
+});

package/src/Keyboard/KeypadButton.tsx

@@ -0,0 +1,58 @@
+import { memo, useCallback, useMemo } from 'react';
+import { BACK_BUTTON, CLEAR_BUTTON, GLOBE_BUTTON, KEYPAD_KEY } from '../consts/KEYBOARD_LAYOUT';
+import KeypadButtonContainer from './KeypadButtonContainer';
+import { Platform, Text } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+
+export interface KeypadButtonProps {
+  currentKey: KEYPAD_KEY;
+  onPress: (_key: KEYPAD_KEY) => void;
+}
+
+function KeypadButton({ currentKey, onPress }: KeypadButtonProps) {
+  const handlePress = useCallback(() => onPress(currentKey), [onPress, currentKey]);
+  const handleClear = useCallback(() => onPress({ main: CLEAR_BUTTON }), [onPress]);
+
+  const isBackButton = useMemo(() => currentKey.main === BACK_BUTTON, [currentKey.main]);
+  const isGlobeButton = useMemo(() => currentKey.main === GLOBE_BUTTON, [currentKey.main]);
+
+  if (isGlobeButton) {
+    return (
+      <KeypadButtonContainer
+        bgColor={null}
+        shouldDisableShadow={Platform.OS === 'android'}
+        bgPressedColor={'background-color: rgba(0, 0, 0, 0.1);'}
+        onPress={handlePress}
+        key="country-button">
+        <Feather name="globe" size={24} />
+      </KeypadButtonContainer>
+    );
+  }
+
+  if (isBackButton) {
+    return (
+      <KeypadButtonContainer
+        bgColor={null}
+        bgPressedColor={
+          'background-color: rgba(0, 0, 0, 0.1);'
+        }
+        shouldDisableShadow={Platform.OS === 'android'}
+        onPress={handlePress}
+        onLongPress={handleClear}
+        key="back-button">
+        <Feather name="delete" size={24} />
+        <Text style={{ fontWeight: 'bold' }}>clear</Text>
+      </KeypadButtonContainer>
+    );
+  }
+
+  return (
+    <KeypadButtonContainer onPress={handlePress}>
+      <Text style={{}}>{currentKey.main}</Text>
+      {(currentKey?.subtext ?? '').length > 0 && <Text>{currentKey.subtext}</Text>}
+    </KeypadButtonContainer>
+  );
+}
+
+export { KeypadButton };
+export default memo(KeypadButton);

package/src/Keyboard/KeypadButtonContainer.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Pressable, PressableProps, StyleSheet, View, Text } from 'react-native';
+import { colors } from '../Styling/Colors';
+import { spacing } from '@/Styling/Sizing';
+// import { Box } from '@/components/ui/box';
+// import { GetColor } from '@/utils/get-color';
+
+interface KeypadButtonContainerProps extends PressableProps {
+  children: React.ReactNode;
+  onPress?: PressableProps['onPress'];
+  bgColor?: string | null;
+  bgPressedColor?: string | null;
+  shouldDisableShadow?: boolean;
+}
+
+export default function KeypadButtonContainer({
+  children,
+  shouldDisableShadow,
+  bgColor = colors.white,
+  bgPressedColor = colors.gray[300],
+  ...props
+}: KeypadButtonContainerProps) {
+  const [isCurrentlyPressed, setIsCurrentlyPressed] = useState(false);
+
+  return (
+    <Pressable
+      style={styles.pressable}
+      unstable_pressDelay={0}
+      onPressIn={() => {
+        setIsCurrentlyPressed(true);
+      }}
+      onPressOut={() => {
+        setIsCurrentlyPressed(false);
+      }}
+      {...props}>
+      <View
+        style={[
+          styles.container,
+          { backgroundColor: (isCurrentlyPressed ? bgPressedColor : bgColor) ?? undefined },
+          !shouldDisableShadow && {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.25,
+            shadowRadius: 2,
+            elevation: 2,
+          }
+        ]}>
+        {children}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 4,
+    borderRadius: 12,
+    paddingVertical: spacing[2],
+  },
+});

package/src/Keyboard/KeypadRow.tsx

@@ -0,0 +1,29 @@
+import { View } from 'react-native';
+import { GAP, KEYPAD_KEY, KEYPAD_ROW } from '../consts/KEYBOARD_LAYOUT';
+import { KeypadButton } from './KeypadButton';
+import { memo, useMemo } from 'react';
+
+export interface KeypadRowProps {
+  row: KEYPAD_ROW;
+  onPress: (_value: KEYPAD_KEY) => void;
+}
+
+function KeypadRow({ row, onPress }: KeypadRowProps) {
+  const keyboardRow = useMemo(() => {
+    return row.map((_key, i) => {
+      return <KeypadButton currentKey={_key} key={_key.main + (i + '')} onPress={onPress} />;
+    });
+  }, [onPress, row]);
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        gap: GAP,
+      }}>
+      {keyboardRow}
+    </View>
+  );
+}
+
+export default memo(KeypadRow);

package/src/PhoneCountryInput/PhoneCountryInput.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { View, Modal, Pressable } from 'react-native';
+import { spacing } from '../Styling/Sizing';
+import { PhoneFieldOutcome, PhoneNumberField, PhoneNumberFieldProps } from '../PhoneNumberField';
+import { CountrySelector } from '../CountrySelector/CountrySelector';
+import { usePhoneFieldState } from '../hooks/UsePhoneFieldState';
+import { CountryId } from '../enum/CountryIds';
+
+import Keyboard, { CopySuccessModalProps, PasteErrorModalProps } from '../Keyboard/Keyboard';
+
+export interface PhoneCountryInputProps extends PhoneNumberFieldProps {
+  underlineButton?: React.ComponentType<React.ComponentProps<typeof Pressable>> | null;
+  underlineModal?: React.ComponentType<React.ComponentProps<typeof Modal>> | null;
+  underlinePasteErrorModal?: React.ComponentType<PasteErrorModalProps> | null;
+  underlineCopySuccessModal?: React.ComponentType<CopySuccessModalProps> | null;
+  allowedCountryCodes?: CountryId[] | null;
+  disallowedCountryCodes?: CountryId[] | null;
+  onOutcomeChange: (outcome?: PhoneFieldOutcome) => void;
+}
+
+export function PhoneCountryInput({
+  underlineButton,
+  underlineModal,
+  underlinePasteErrorModal,
+  underlineCopySuccessModal,
+  style,
+  allowedCountryCodes,
+  disallowedCountryCodes,
+  onOutcomeChange,
+  ...props
+}: PhoneCountryInputProps) {
+  const {
+    filteredCountryCodes,
+    outcome,
+    onChangeText,
+    onChangeFlag,
+    onKeyPress,
+    phoneNumber,
+    onCopy,
+    onPaste,
+    isKeyboardOpen,
+    openKeyboard,
+    closeKeyboard,
+    isCountrySelectorOpen,
+    openCountrySelector,
+    closeCountrySelector,
+    onTextSelection,
+    cursorPosition,
+  } = usePhoneFieldState({
+    allowedCountryCodes,
+    disallowedCountryCodes,
+  });
+
+  useEffect(() => {
+    onOutcomeChange(outcome);
+  }, [onOutcomeChange, outcome]);
+
+  return (
+    <>
+      <View
+        style={[
+          {
+            flexDirection: 'row',
+            gap: spacing[1],
+          },
+          style,
+        ]}>
+        <CountrySelector
+          value={outcome?.countryDetails ?? null}
+          onSelectCountry={onChangeFlag}
+          underlineButton={underlineButton}
+          underlineModal={underlineModal}
+          filtedredCountryCodes={filteredCountryCodes}
+          isOpen={isCountrySelectorOpen}
+          onOpenChange={(open) => (open ? openCountrySelector() : closeCountrySelector())}
+        />
+        <PhoneNumberField
+          {...props}
+          value={phoneNumber}
+          onChangeText={onChangeText}
+          onOpen={openKeyboard}
+          onTextSelection={onTextSelection}
+          selection={cursorPosition}
+        />
+      </View>
+      <Keyboard
+        onKeyPress={onKeyPress}
+        value={phoneNumber}
+        onCopy={onCopy}
+        onPaste={onPaste}
+        isOpen={isKeyboardOpen}
+        onClose={closeKeyboard}
+        underlinePasteErrorModal={underlinePasteErrorModal}
+        underlineCopySuccessModal={underlineCopySuccessModal}
+      />
+    </>
+  );
+}

package/src/PhoneNumberField.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native';
+
+import { CountryCode } from './consts/regions';
+
+export interface PhoneFieldOutcome {
+  countryDetails: CountryCode | null;
+  phoneNumber: string;
+  isValid: boolean;
+  correctLength: number;
+}
+
+export interface PhoneNumberFieldProps extends React.ComponentProps<typeof TextInput> {
+  underlineInput?: React.ComponentType<React.ComponentProps<typeof TextInput>> | null;
+  onInputChange?: (outcome: PhoneFieldOutcome) => void;
+  onOpen?: () => void;
+  onTextSelection?: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+}
+
+export function PhoneNumberField(props: PhoneNumberFieldProps) {
+  const { underlineInput, onOpen, onTextSelection, ...textInputProps } = props;
+
+  const Input = useMemo((): React.ComponentType<React.ComponentProps<typeof TextInput>> => {
+    if (!underlineInput) {
+      return TextInput;
+    }
+    return underlineInput;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [underlineInput, props.selection]);
+
+  return (
+    <Input
+      {...textInputProps}
+      value={'+' + props.value}
+      showSoftInputOnFocus={false}
+      onPressIn={onOpen}
+      onSelectionChange={onTextSelection}
+      style={[
+        props.style,
+        {
+          zIndex: 1,
+        },
+      ]}
+    />
+  );
+}