import React, { useState } from "react"; import { TextInput, View, Text, Dimensions, StyleSheet, useColorScheme, } from "react-native"; import tw from "tailwind-rn"; import Colors from "../constants/Colors"; import fontSize from "../constants/fontSize"; const width = Dimensions.get("window").width; const FloatingLabelInput = ({ label, textAlign, direction, labelBackgroundColor, onChange, name, value, color, maxLength, autoFocus, regex, ...props }) => { const colorScheme = useColorScheme(); const [isFocused, setIsFocused] = useState(false); const styles = StyleSheet.create({ labelStyle: { fontFamily: "regular", top: !isFocused ? "50%" : 1, fontSize: !isFocused ? fontSize.base : fontSize.sm, transform: [{ translateY: -width / 35 }], color: !isFocused ? "#555" : Colors.theme1[colorScheme].greenC8, }, inputStyle: { fontSize: fontSize.lg, color: Colors.theme1[colorScheme].black, borderWidth: 1, borderColor: isFocused ? Colors.theme1[colorScheme].greenC8 : "#777", textAlign: textAlign, fontFamily: "light", fontWeight : "900" }, }); return ( {label} onChange(name, (text = regex(text)))} placeholder={"09123456789"} onFocus={() => setIsFocused(true)} autoFocus={autoFocus} underlineColorAndroid={"transparent"} maxLength={maxLength} onBlur={() => value ? setIsFocused(() => false) : setIsFocused(() => false) } /> ); }; export default FloatingLabelInput;