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",
    bg: "coolGray.100",
    _hover: {
      bg: "coolGray.200"
    },
    _focus: {
      bg: "coolGray.200:alpha.70"
    }
  }} _dark={{
    bg: "coolGray.800",
    _hover: {
      bg: "coolGray.900"
    },
    _focus: {
      bg: "coolGray.900:alpha.70"
    }
  }} />;
};
const Example = () => {
  return <TextArea shadow={2} h={20} placeholder="Text Area Placeholder" w="200" _light={{
    placeholderTextColor: "trueGray.700",
    bg: "coolGray.100",
    _hover: {
      bg: "coolGray.200"
    },
    _focus: {
      bg: "coolGray.200:alpha.70"
    }
  }} _dark={{
    bg: "coolGray.800",
    _hover: {
      bg: "coolGray.900"
    },
    _focus: {
      bg: "coolGray.900:alpha.70"
    }
  }} />;
};

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");
  return <Box alignItems="center" w="100%">
      <TextArea value={textAreaValue} onChange={e => setTextAreaValue(e.currentTarget.value)} // for web
    onChangeText={text => setTextAreaValue(text)} // for android and ios
    w="75%" maxW="300" />
    </Box>;
};
const Example = () => {
  const [textAreaValue, setTextAreaValue] = useState("Value Controlled");
  return <Box alignItems="center" w="100%">
      <TextArea value={textAreaValue} onChange={e => setTextAreaValue(e.currentTarget.value)} // for web
    onChangeText={text => setTextAreaValue(text)} // for android and ios
    w="75%" maxW="300" />
    </Box>;
};