react-native-ui-lib/src/incubator/TextField/CharCounter.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 _ from 'lodash';
import Text from "../../components/text";
import FieldContext from "./FieldContext";

const CharCounter = ({
  maxLength,
  charCounterStyle,
  testID
}) => {
  const {
    value
  } = useContext(FieldContext);

  if (_.isUndefined(maxLength)) {
    return null;
  }

  return <Text grey30 style={[styles.container, charCounterStyle]} testID={testID}>
      {`${_.size(value)}/${maxLength}`}
    </Text>;
};

CharCounter.propTypes = {
  /**
     * Should show a character counter (works only with maxLength)
     */
  showCharCounter: _pt.bool,
  maxLength: _pt.number,
  testID: _pt.string.isRequired
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    textAlign: 'right'
  }
});
CharCounter.displayName = 'Incubator.TextField';
export default CharCounter;