Commit 5a4c0d69 authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Se agregó la posibilidad de que si es un campo de contraseña, esta se pueda ocultar y ver

parent 6ff8e071

mobile/src/common/components/form/text_input.tsx

+23 −5
Original line number Diff line number Diff line 
import { useEffect, useRef } from "react";

import React, { useEffect, useRef, useState } from "react";

import { TextInput, Text, StyleSheet, View, Animated, TouchableOpacity, TextInputProps } from "react-native";

import { LIGTHT_THEME } from "../../constants/theme";

import { LIGHT_THEME } from "../../constants/theme";

import { Feather } from '@expo/vector-icons';



interface CustomTextInputProps {

  isPassword?: boolean;
@@ -15,6 +16,7 @@ interface CustomTextInputProps { 
export const CustomTextInput = ({ textInputProps, label, value, errors, onBlur, editable, isPassword }: CustomTextInputProps) => {

  const labelFocusAnimation = useRef(new Animated.Value(value.length > 0 ? 1 : 0)).current;

  const inputRef = useRef<TextInput>(null);

  const [showPassword, setShowPassword] = useState(false);



  const handleFocus = () => {

    Animated.timing(labelFocusAnimation, {
@@ -57,9 +59,20 @@ export const CustomTextInput = ({ textInputProps, label, value, errors, onBlur, 
          onFocus={handleFocus}

          onBlur={handleBlur}

          style={styles.input}

          secureTextEntry={isPassword}

          cursorColor={LIGTHT_THEME.color.black}

          secureTextEntry={isPassword && !showPassword}

          cursorColor={LIGHT_THEME.color.black}

        />

        {

          isPassword && (

            <Feather

              name={showPassword ? "eye-off" : "eye"}

              size={24}

              color={LIGHT_THEME.color.black}

              style={styles.showPassword}

              onPress={() => setShowPassword(!showPassword)}

            />

          )

        }

      </View>

        {

          errors ? <Text style={{ color: "red" }}>{errors}</Text> : <Text></Text>
@@ -90,6 +103,11 @@ const styles = StyleSheet.create({ 
    position: "absolute",

    left: 10,

    zIndex: 1,

    backgroundColor: LIGTHT_THEME.color.white,

    backgroundColor: LIGHT_THEME.color.white,

  },

  showPassword: {

    position: "absolute",

    right: 10,

    zIndex: 2,

  },

});