Replace phone number field in sign up flow

[justinmakaila]

My cognito pool collects phone numbers at sign up. The Authenticator UI in react allows for modifying the phone number field to allow dropdown selection of country codes, but I can't seem to fine the equivalent in react-native. I don't want to rely on users putting in the '+1' manually. How can I manually override the component that is rendered in the form fields to replace it with a masked field or a field that provides a drop down for country codes?

[justinmakaila]

I'd love to get this component piped in there:

https://www.npmjs.com/package/react-native-phone-number-input

[justinmakaila]

Here's my current workaround to support US country codes only:

    <Authenticator.SignUp
      {...props}
      fields={normalizedFields}
      handleSubmit={values => {
        const normalizedPhoneNumber = values.country_code + values.phone_number
        const parsedPhoneNumber = parsePhoneNumber(normalizedPhoneNumber, 'US')
        const internationalPhoneNumber = parsedPhoneNumber.format('E.164')

        const normalizedValues = {
          ...values,
          country_code: internationalPhoneNumber.substring(0, 3),
          phone_number: internationalPhoneNumber.substring(3),
        }

        props.handleSubmit(normalizedValues)
      }}
    />

parsePhoneNumber() is from libphonenumber-js

[reesscot]

Have you taken a look at the Subcomponent override slots?
https://ui.docs.amplify.aws/react-native/connected-components/authenticator/customization#subcomponent-override-slots

[justinmakaila]

@reesscot i have but that doesn't let me replace the independent fields. Its always a TextInput component and I can't change or format the values with the onChange and "set state" bits due to the "black box" of the useFieldValues hook

[justinmakaila]

Im using the subcomponent replacement to customize the handleSubmit functions

[reesscot]

Hi @justinmakaila,

The API doesn't currently support replacing individual fields, you have to replace the whole SignIn screen if you want to customize it. I'm converting this to a feature request for consideration on our roadmap.