react-native-ui-lib/src/incubator/TextField/ValidationMessage.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import _pt from "prop-types";
import React, { useContext } from 'react';
import { StyleSheet } from 'react-native';
import Text from "../../components/text";
import FieldContext from "./FieldContext";
import { getRelevantValidationMessage } from "./Presenter";

const ValidationMessage = ({
  validationMessage,
  enableErrors,
  validationMessageStyle,
  retainSpace,
  validate,
  testID
}) => {
  const context = useContext(FieldContext);

  if (!enableErrors || !retainSpace && context.isValid) {
    return null;
  }

  const relevantValidationMessage = getRelevantValidationMessage(validationMessage, context.failingValidatorIndex);
  const showValidationMessage = !context.isValid || !validate && !!validationMessage;
  return <Text testID={testID} red30 style={[styles.validationMessage, validationMessageStyle]}>
      {showValidationMessage ? relevantValidationMessage : ''}
    </Text>;
};

ValidationMessage.propTypes = {
  /**
     * Should support showing validation error message
     */
  enableErrors: _pt.bool,

  /**
     * The validation message to display when field is invalid (depends on validate)
     */
  validationMessage: _pt.oneOfType([_pt.string, _pt.arrayOf(_pt.string)]),
  retainSpace: _pt.bool,
  testID: _pt.string
};
const styles = StyleSheet.create({
  validationMessage: {
    minHeight: 20
  }
});
ValidationMessage.displayName = 'Incubator.TextField';
export default ValidationMessage;