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