TextArea | NativeBase | Universal Components for React and React Native

Show Code
Playground
const Example = () => {
  return <TextArea shadow={2} h={20} placeholder="Text Area Placeholder" w="200" _light={{
    placeholderTextColor: 'trueGray.700'
  }} _dark={{
    bg: 'coolGray.800'
  }} _hover={{
    bg: 'coolGray.200'
  }} />;
};
const Example = () => {
  return <TextArea shadow={2} h={20} placeholder="Text Area Placeholder" w="200" _light={{
    placeholderTextColor: 'trueGray.700'
  }} _dark={{
    bg: 'coolGray.800'
  }} _hover={{
    bg: 'coolGray.200'
  }} />;
};

Playground
const Example = () => {
  return <Box alignItems="center" w="100%">
      <TextArea h={20} placeholder="Text Area Placeholder" w="75%" maxW="300" />
    </Box>;
};
const Example = () => {
  return <Box alignItems="center" w="100%">
      <TextArea h={20} placeholder="Text Area Placeholder" w="75%" maxW="300" />
    </Box>;
};

Playground
const Example = () => {
  return <Box alignItems="center" w="100%">
      <Stack space={2.5} w="75%" maxW="300">
        <Box>
          <Text mb="4" bold fontSize="lg">
            Invalid TextArea
          </Text>
          <TextArea aria-label="t1" numberOfLines={4} placeholder="Invalid TextArea" isInvalid _dark={{
          placeholderTextColor: "gray.300"
        }} mb="5" />
          <Divider />
        </Box>
        <Box>
          <Text bold fontSize="lg" mb="4">
            Disabled TextArea
          </Text>

          <TextArea aria-label="t1Disabled" placeholder="Disabled TextArea" isDisabled />
        </Box>
      </Stack>
    </Box>;
};
const Example = () => {
  return <Box alignItems="center" w="100%">
      <Stack space={2.5} w="75%" maxW="300">
        <Box>
          <Text mb="4" bold fontSize="lg">
            Invalid TextArea
          </Text>
          <TextArea aria-label="t1" numberOfLines={4} placeholder="Invalid TextArea" isInvalid _dark={{
          placeholderTextColor: "gray.300"
        }} mb="5" />
          <Divider />
        </Box>
        <Box>
          <Text bold fontSize="lg" mb="4">
            Disabled TextArea
          </Text>

          <TextArea aria-label="t1Disabled" placeholder="Disabled TextArea" isDisabled />
        </Box>
      </Stack>
    </Box>;
};

Playground
const Example = () => {
  const [textAreaValue, setTextAreaValue] = useState("Value Controlled");

  const demoValueControlledTextArea = e => {
    setTextAreaValue(e.currentTarget.value);
  };

  return <Box alignItems="center" w="100%">
      <TextArea value={textAreaValue} onChange={demoValueControlledTextArea} w="75%" maxW="300" />
    </Box>;
};
const Example = () => {
  const [textAreaValue, setTextAreaValue] = useState("Value Controlled");

  const demoValueControlledTextArea = e => {
    setTextAreaValue(e.currentTarget.value);
  };

  return <Box alignItems="center" w="100%">
      <TextArea value={textAreaValue} onChange={demoValueControlledTextArea} w="75%" maxW="300" />
    </Box>;
};