Phone Input React Native

Como usar?

instalação

Utilize npm:

$ npm install input-phone-rn-br

ou yarn:

$ yarn add input-phone-rn-br

Importando a biblioteca

import PhoneInputRn from "input-phone-rn-br"

Exemplo de uso

import React, {useState} from "react";
import {SafeAreaView, StyleSheet, Text} from "react-native";
import PhoneInputRn from "input-phone-rn-br";

const App = () => {
  const [value, setValue] = useState<string>('');
  const [phoneFormated, setPhoneFormated] = useState<string>('');

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Phone Input React Native</Text>
      <PhoneInputRn
        value={value}
        onChangeText={(text) => setValue(text)}
        setPhoneFormated={setPhoneFormated}
        withDarkTheme={false}
      />

      <Text style={{fontSize: 20}}>Phone Formated: {phoneFormated}</Text>
      <Text style={{fontSize: 20}}>Phone Value: {value}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

export default App;

Props

• value: boolean
• onChangeText: (text: string) => void
• autoFocus?: boolean
• placeHolder?: string
• inputMaxLenth?: number
• cellFormat?: boolean
• telephoneFormat?: boolean
• phoneFullFormat?: string
• setPhoneFormated?: (text: string) => void
• withDarkTheme?: boolean
• containerStyle?: StyleProp<ViewStyle>
• containerButtonStyle?: StyleProp<ViewStyle>
• selfRef?: React.LegacyRef<TextInput>

Agradecimentos

• React-native-country-picker-modal é uma biblioteca de "country select" exlucisiva para react native que possibilitou a criação dessa lib;

• React Native Phone Number Input é uma biblioteca semelhante que inspirou esse projeto ser criado.

Made with ❤️ by developer for developers