Textarea

1import * as React from "react"
2import { TextInput, Platform } from "react-native"
3import { cn } from "@/lib/utils"
4 
5const TextArea = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(
6  ({ className, ...props }, ref) => {
7    const [isFocused, setIsFocused] = React.useState(false)
8 
9    return (
10      <TextInput
11        className={cn(
12          "min-h-[120px] w-full rounded-md border border-input bg-transparent px-3 py-3 text-primary shadow-sm",
13          "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
14          "text-base multiline",
15          isFocused ? "border-ring ring-1 ring-ring" : "",
16          Platform.OS === "ios" ? "ios:shadow-sm ios:shadow-foreground/10" : "android:elevation-1",
17          className
18        )}
19        ref={ref}
20        multiline={true}
21        textAlignVertical="top"
22        underlineColorAndroid="transparent"
23        onFocus={() => setIsFocused(true)}
24        onBlur={() => setIsFocused(false)}
25        {...props}
26      />
27    )
28  }
29)
30 
31TextArea.displayName = "TextArea"
32 
33export { TextArea }