Nonlinear Performance Magnification

    react-native-tel-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-native-tel-input

    npm i react-native-tel-input --save
    

    Usage

    import React, {useState} from 'react';
    import {View, Text, StyleSheet} from 'react-native';
    import PhoneInput, {isValidPhoneNumber} from 'react-native-input-phone';
    
    const Example = () => {
      const [phoneNumber, setPhoneNumber] = useState('');
      const [formattedText, setFormattedText] = useState();
      const [country, setCountry] = useState('IN');
      const [callingCode, setCallingCode] = useState();
    
      return (
        <View style={styles.container}>
          <View style={styles.output}>
            <Text>
              {JSON.stringify(
                {
                  phoneNumber: phoneNumber,
                  countryCode: country,
                  callingCode: callingCode,
                  formattedText: formattedText,
                  isValid: isValidPhoneNumber(phoneNumber, country),
                },
                null,
                2,
              )}
            </Text>
          </View>
          <PhoneInput
            value={phoneNumber}
            countryCode={country}
            onChange={setPhoneNumber}
            onCountryChange={setCountry}
            onFormattedText={setFormattedText}
            onCallingCodeChange={setCallingCode}
          />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        width: '100%',
      },
      output: {
        alignItems: 'center',
        margin: 16,
      },
    });
    export default Example;
    

    Props

    • value: string;--(phone number with or without callingcode)
    • countryCode: string; --(two letter country code)
    • onChange?: (value: string) => void;
    • onCountryChange?: (value: string) => void;
    • onFormattedText?: (value: string) => void;
    • onCallingCodeChange?: (value: string) => void;
    • disable?: boolean;
    • containerStyle?: StyleProp;
    • inputStyle?: StyleProp;

    Helper methods

    • isValidPhoneNumber(phoneNumber: string,countryCode?: string): boolean;

    isvalidphonenumber(formattedtext)

    or

    isvalidphonenumber(value,countrycode)

    Install

    npm i react-native-tel-input

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    52.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • s-sukesh