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.
 
 
 
 
 

59 lines
1.6 KiB

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 (
<View style={{marginTop: 18}}>
<Text
style={[styles.labelStyle, tw.style('transition-all transform duration-300')]}>
{label}
</Text>
<TextInput
style={[styles.inputStyle , tw.style('rounded-md') ]}
onChangeText={text => onChange(name, text)}
onFocus={() => setIsFocused(true)}
onBlur={() =>
value ? setIsFocused(() => true) : setIsFocused(() => false)
}
/>
</View>
);
};
export default FloatingLabelInput;