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
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;
|
|
|