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.