Untitled

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';

import PhoneInput from 'react-native-phone-input';
import { colors, spacings } from '../../../theme';
import { Controller } from 'react-hook-form';

export const CustomPhoneNumberInput = ({
    control,
    name,
    defaultValue,
}: {
    control: any;
    name: string;
    defaultValue?: string;
}) => {
    const phoneRef = useRef(null);

    return (
        <Controller
            control={control}
            name={name}
            render={({ field: { value, onChange }, fieldState: { error } }) => (
                <View style={styles.container}>
                    <PhoneInput
                        style={styles.phoneInput}
                        ref={phoneRef}
                        initialCountry="no"
                        onChangePhoneNumber={onChange}
                        initialValue={defaultValue}
                    />
                </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,
    },
});