aws-amplify / aws-amplify/amplify-ui
Ability to customize SignUp component (Add a checkbox)
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### On which framework/platform would you like to see this feature implemented?
React Native
### Which UI component is this feature-request for?
Authenticator
### Please describe your feature-request in detail.
Hi there,
I'm currently using the React Native Authenticator component, and I'm trying to implement a sign up page with a T&C's checkbox, similar to the one described in the Amplify React docs [here](https://ui.docs.amplify.aws/react/connected-components/authenticator/customization#sign-up-fields), but I'm having some trouble with figuring out if this is possible with the React Native package.
I've tried a couple of ways:
1. Trying to override the SignUp component using the subcomponent override method described [here](https://ui.docs.amplify.aws/react-native/connected-components/authenticator/customization#subcomponent-override-slots).
When I try to do something like this, the checkbox doesn't show below the form fields. It does show up if I move it outside of the `Authenticator` component. If I remove the `Authenticator` component the Sign Up form fields fail to show up. Am I doing something wrong? Or is this not currently possible with the React Native package?
Example code for the custom SignUp component:
```
const MySignUp = () => {
return (
);
};
```
Passed into the Authenticator component, in my root _layout file.
```
```
2. Adding a form field to SignUp as described [here](https://ui.docs.amplify.aws/react-native/connected-components/authenticator/customization#form-field-customization)
The fields array doesn't support a `type` of `checkbox` so I'm not sure if this way is even feasible.
Does anyone have any thoughts on how I would achieve this?
Thanks!
### Please describe a solution you'd like.
- An answer on whether this is currently possible, or on the roadmap, or if the only current way to do this is to use the Amplify API directly without using the cloud components.
### We love contributors! Is this something you'd be interested in working on?
- [ ] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.
Contributor guide
Research direction
Start with the React Native Authenticator subcomponent-override and form-field-customization documentation linked in the issue, then reproduce the MySignUp example in a minimal app. Trace the SignUp slot and supported field types; done means the requested checkbox path is supported and documented, or the limitation and supported alternative are clearly recorded.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- authentication, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100