PhoneInput.tsx

import React, {useMemo} from 'react';
import {
  Pressable,
  StyleProp,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import Theme from '../../utils/theme';
import {TextInput} from 'react-native-gesture-handler';
import FlagIcon from '../FlagIcon';
import {CountryData} from '../../models/CountryData';

type Props = {
  style?: StyleProp<ViewStyle>;
  onChangeText?: (text: string) => void;
  onTogglePickerModal?: () => void;
  country: CountryData;
};

export const PhoneInput: React.FunctionComponent<Props> = ({
  style,
  onChangeText,
  onTogglePickerModal,
  country,
}) => {
  console.log('PhoneInput is rendered');

  return (
    <View style={[styles.container, style]}>
      <Pressable
        android_ripple={{color: Theme.colors.gray}}
        onPress={onTogglePickerModal}>
        <View
          style={{
            flexDirection: 'row',
            paddingHorizontal: Theme.spacing.padding,
            flex: 1,
          }}>
          <View style={{justifyContent: 'center'}}>
            <FlagIcon name={country.flag} size={25} />
          </View>

          <View style={{justifyContent: 'center', marginLeft: 5}}>
            <Icon name="caret-down" color={Theme.colors.black} />
          </View>
        </View>
      </Pressable>
      <View style={styles.divider} />
      <View
        style={{
          flexDirection: 'row',
          paddingHorizontal: Theme.spacing.padding,
          flex: 4,
          alignItems: 'center',
        }}>
        <Text style={styles.input}>{country.code}</Text>

        <TextInput
          keyboardType="numeric"
          placeholder="0323456789"
          placeholderTextColor={Theme.colors.gray}
          autoFocus={true}
          maxLength={12}
          onChangeText={onChangeText}
          multiline={false}
          style={[styles.input, {flex: 1, paddingTop: 0, paddingBottom: 0}]}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    height: 50,
    backgroundColor: Theme.colors.white,
    borderRadius: 10,
    alignItems: 'center',
  },
  divider: {
    height: '70%',
    width: 2,
    backgroundColor: '#F3F3F3',
  },
  input: {
    ...Theme.fonts.h6,
    color: Theme.colors.black,
  },
});