Skip to main content
Logo Appt Light

Input errors on React Native

Users should be notified when they make input errors. Show a clear error message when data has been entered incorrectly. Furthermore, provide suggestions that help users to fix the error. It is important that error messages are also posted to users of assistive technologies.

In React Native we recommend using a Text component to display an error. The error message should also be posted to assistive technologies by using an accessibility announcement.

You can also use a package for displaying errors, such as React Native Paper. This package includes a HelperText component which can be used for displaying errors. The type should be set to error for errors.

<Text>Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000</Text>

<View>
  <TextInput label="Date of birth" value={text} onChangeText={onChangeText} />
  <HelperText type="error" visible={hasErrors()}>
    Invalid date, must be in the form DD/MM/YYYY, for example, 01/01/2000
  </HelperText>
</View>

Feedback?

Let us know!