aws-amplify / aws-amplify/amplify-ui-android

Improve documentation regarding "Full UI custimization" and custom validators

Open
#155 5 comments 0 reactions 0 assignees View on GitHub
authenticator question
Dominant language
Kotlin
Stars
25
Forks
18
Avg merge
7d 3h
Merged PRs (30d)
1

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui-android/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui-android/blob/main/CONTRIBUTING.md#reporting-bugsfeature-requests).

### Which UI component?

Authenticator

### Gradle script dependencies

```groovy
// Put output below this line
authenticatorVersion = "1.1.0"
```

### Environment information

```
# Put output below this line
Gradle 8.6

```

### Please include any relevant guides or documentation you're referencing

https://ui.docs.amplify.aws/android/connected-components/authenticator/customization#full-ui-customization

### Describe the bug

I'm trying to implement the custom UI for the Authenticator steps (e.g. SignUp) but still depend on the State instance provided by Authenticator. Lets say that in my case the username is always email so I would like to replace the orig username validator with email validator. I'm able to replace the UI components (e.g. username input) without problems but I'm having hard time trying to replace the validator used for my custom input (TextInputField). This because the validator inside fieldData is a val not var. Can you please provide more documentation on how this can be done with simple code example. Furthermore, I don't quite get why validator can be found from both fieldData and fieldConfig.

### Reproduction steps (if applicable)

_No response_

### Code Snippet

```java
// Trying to replace the orig username validator with email validator

val userName = state.form.fields[FieldKey.Username]!!
val userNameData = object : MutableFieldData {
override val config: FieldConfig = userName.config
override val state = userName.state
override val validator: FieldValidator = {
if (content.isNotBlank() && !Patterns.EMAIL_ADDRESS.matcher(content)
.matches()
) FieldError.InvalidFormat else null
}
}

// And then passing the userNameData to custom TextInputField

TextInputField(
fieldConfig = userNameData.config as FieldConfig.Text,
fieldState = userNameData.state,
enabled = formStateEnabled
)

// The above code does really replace the username's MutablefieldData and the original validator is still in use.

```

### Log output

```
// Put your logs below this line

```

### amplifyconfiguration.json

_No response_

### Additional information and screenshots

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked Authenticator Full UI customization guide and the custom TextInputField, MutableFieldData, FieldConfig, and FieldValidator entry points shown in the issue. Document how a custom username validator can be used with the Authenticator state, clarify why validation appears in fieldData and fieldConfig, and include a small Kotlin example showing the expected result.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
documentation, mobile
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.