FormErrorSummary

FormErrorSummary takes the same props as on the web (errors, title, autoFocus). It renders nothing while there are no errors, so it can sit at the top of a form permanently; after a failed submit it lists every error in a danger alert and moves the screen reader to it. errors is a list of { id, message } or a map from field to message, the shape most validation libraries return. See the web FormErrorSummary for the same component in the browser.

Signup.tsx

const [errors, setErrors] = useState<Record<string, string>>({});

<Form as="form" onSubmit={async () => setErrors(await validate())}>
<FormErrorSummary errors={errors} />
<Field label="Email" error={errors.email}>
  <Input />
</Field>
<SubmitButton label="Continue" />
</Form>

Differences from the web

Entries are plain text. On the web each one moves focus to its field; React Native has no ids to find a control by.

API reference

Prop	Type	Default	Description
errors	{ id?, message }[] \| Record<string, ReactNode>		The errors. Empty messages are skipped. Required.
title	string	"Check the highlighted fields"	The alert's heading.
autoFocus	boolean	true	Moves the screen reader to the summary when its errors change.
span	number		Columns to take inside a Form.