import React, {useState} from 'react'; import {TextInput, View, Text, Dimensions, StyleSheet} from 'react-native'; import tw from 'tailwind-react-native-classnames'; const FloatingLabelInput = ({ label, textAlign, direction, labelBackgroundColor, onChange, value, name, ...props }) => { const [isFocused, setIsFocused] = useState(false); const styles = StyleSheet.create({ labelStyle: { position: 'absolute', right: 15, backgroundColor: 'white', zIndex: 100, paddingHorizontal: 5, textAlign: 'center', top: !isFocused ? '50%' : 0, fontSize: !isFocused ? Dimensions.get('window').width / 27 : 14, transform: [{translateY: -Dimensions.get('window').width / 35}], color: !isFocused ? '#555' : '#6CBE44', // transition: Transitions.all(Transitions.) }, inputStyle: { fontSize: Dimensions.get('window').width / 25, color: '#000', borderWidth: 0.5, borderColor: isFocused ? '#6CBE44' : '#555', paddingVertical: 15, paddingHorizontal: 10, direction: 'rtl', textAlign: 'right', }, }); return ( {label} onChange(name, text)} onFocus={() => setIsFocused(true)} onBlur={() => value ? setIsFocused(() => true) : setIsFocused(() => false) } /> ); }; export default FloatingLabelInput;