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.
 
 
 
 
 

60 lines
1.5 KiB

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 (
<View style={tw('mt-4')}>
<Text
style={[styles.labelStyle, tw('px-1 z-10 bg-white absolute right-4 text-center')]}>
{label}
</Text>
<TextInput
style={[styles.inputStyle , tw('rounded-md p-2') ]}
onChangeText={text => onChange(name, text)}
placeholder={'09123456789'}
onFocus={() => setIsFocused(true)}
autoFocus={autoFocus}
underlineColorAndroid={"transparent"}
maxLength={maxLength}
onBlur={() =>
value ? setIsFocused(() => false) : setIsFocused(() => false)
}
/>
</View>
);
};
export default FloatingLabelInput;