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.
 
 
 
 
 

77 lines
1.8 KiB

import React, { useState } from "react";
import {
TextInput,
View,
Text,
Dimensions,
StyleSheet,
useColorScheme,
} from "react-native";
import tw from "tailwind-rn";
import Colors from "../constants/Colors";
import fontSize from "../constants/fontSize";
const width = Dimensions.get("window").width;
const FloatingLabelInput = ({
label,
textAlign,
direction,
labelBackgroundColor,
onChange,
name,
value,
color,
maxLength,
autoFocus,
regex,
...props
}) => {
const colorScheme = useColorScheme();
const [isFocused, setIsFocused] = useState(false);
const styles = StyleSheet.create({
labelStyle: {
fontFamily: "regular",
top: !isFocused ? "50%" : 1,
fontSize: !isFocused ? fontSize.base : fontSize.sm,
transform: [{ translateY: -width / 35 }],
color: !isFocused ? "#555" : Colors.theme1[colorScheme].greenC8,
},
inputStyle: {
fontSize: fontSize.lg,
color: Colors.theme1[colorScheme].black,
borderWidth: 1,
borderColor: isFocused ? Colors.theme1[colorScheme].greenC8 : "#777",
textAlign: textAlign,
fontFamily: "light",
fontWeight : "900"
},
});
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 = regex(text)))}
placeholder={"09123456789"}
onFocus={() => setIsFocused(true)}
autoFocus={autoFocus}
underlineColorAndroid={"transparent"}
maxLength={maxLength}
onBlur={() =>
value ? setIsFocused(() => false) : setIsFocused(() => false)
}
/>
</View>
);
};
export default FloatingLabelInput;