You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1003 B
32 lines
1003 B
import React from "react";
|
|
import { LockIcon, EyeIcon, EyeOffIcon } from "../ui/icon";
|
|
import { Input, InputIcon, InputField, InputSlot } from "../ui/input";
|
|
import { VariantProps } from "@gluestack-ui/nativewind-utils";
|
|
|
|
type props = React.ComponentProps<typeof Input> &
|
|
VariantProps<typeof InputField>;
|
|
|
|
export default function PasswordField({ value, onChangeText }: props) {
|
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
const handleState = () => {
|
|
setShowPassword((showState) => {
|
|
return !showState;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Input variant="outline" size="xl">
|
|
<InputIcon color="black" as={LockIcon} />
|
|
<InputField
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆"
|
|
/>
|
|
<InputSlot className="pr-3" onPress={handleState}>
|
|
<InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
|
|
</InputSlot>
|
|
</Input>
|
|
);
|
|
}
|