react-native-ui-lib/src/incubator/TextField/Label.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 { Colors } from "../../style";
import Text from "../../components/text";
import { ValidationMessagePosition } from "./types";
import { getColorByState } from "./Presenter";
import FieldContext from "./FieldContext";

const Label = ({
  label,
  labelColor = Colors.grey10,
  labelStyle,
  labelProps,
  validationMessagePosition,
  floatingPlaceholder,
  testID
}) => {
  const context = useContext(FieldContext);
  const forceHidingLabel = !context.isValid && validationMessagePosition === ValidationMessagePosition.TOP;

  if ((label || floatingPlaceholder) && !forceHidingLabel) {
    return <Text testID={testID} color={getColorByState(labelColor, context)} style={[styles.label, labelStyle, floatingPlaceholder && styles.dummyPlaceholder]} {...labelProps}>
        {label}
      </Text>;
  }

  return null;
};

Label.propTypes = {
  /**
     * Field label
     */
  label: _pt.string,
  floatingPlaceholder: _pt.bool,
  testID: _pt.string
};
const styles = StyleSheet.create({
  label: {
    minHeight: 20
  },
  dummyPlaceholder: {
    opacity: 0
  }
});
Label.displayName = 'Incubator.TextField';
export default Label;