import React, { useRef } from 'react';
import { View, StyleSheet, KeyboardAvoidingView } from 'react-native';
import PhoneInput from 'react-native-phone-input';
import { colors, spacings } from '../../../theme';
import { Controller } from 'react-hook-form';
import { HelperText } from 'react-native-paper';
export const CustomPhoneNumberInput = ({
control,
name,
defaultValue,
rules,
}: {
control: any;
name: string;
defaultValue?: string;
rules?: object;
}) => {
const phoneRef = useRef<PhoneInput>(null);
console.log('phoneRef', phoneRef.current?.isValidNumber());
return (
<Controller
control={control}
name={name}
rules={phoneRef.current?.isValidNumber() === false ? { required: true } : rules}
render={({ field: { onChange }, fieldState: { error } }) => (
<View>
<PhoneInput
style={styles.phoneInput}
ref={phoneRef}
initialCountry="no"
onChangePhoneNumber={onChange}
initialValue={defaultValue}
autoFormat
/>
{error && (
<HelperText style={styles.helperTextStyle} type="error">
{error.message || error}
</HelperText>
)}
</View>
)}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingRight: spacings.medium,
paddingLeft: spacings.medium,
},
phoneInput: {
borderBottomColor: colors.gray7,
borderBottomWidth: 1,
borderRadius: spacings.xsmall2,
padding: spacings.medium,
},
helperTextStyle: {
paddingLeft: spacings.medium,
color: colors.error,
},
});