87 lines
2.0 KiB
JavaScript
87 lines
2.0 KiB
JavaScript
import { View, Text, TextInput, StyleSheet, } from 'react-native';
|
|
import React, { useState } from 'react';
|
|
import { GlobalTheme } from '../theme';
|
|
|
|
const CustomTextInput = ({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
keyboardType,
|
|
secureTextEntry,
|
|
right,
|
|
textstyle,
|
|
viewstyle,
|
|
maxLength
|
|
}) => {
|
|
const [isFocused, setFocused] = useState(false);
|
|
const [hidepassword, setHidePassword] = useState(false);
|
|
|
|
const handleFocus = () => {
|
|
setFocused(true);
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setFocused(false);
|
|
};
|
|
|
|
const inputStyle = {
|
|
borderColor: isFocused ? '#2680EB' : '#DFDFDF',
|
|
borderWidth: isFocused ? 2 : 1,
|
|
backgroundColor: isFocused ? '#FFF' : '#Fff',
|
|
borderRadius: GlobalTheme.borderRadius.md,
|
|
};
|
|
|
|
return (
|
|
<View style={styles.inputContainer}>
|
|
<Text
|
|
style={{
|
|
color: GlobalTheme.colors.black,
|
|
fontSize: GlobalTheme.typography.fontSize.medium,
|
|
fontWeight: GlobalTheme.typography.fontWeight.medium,
|
|
marginTop: 10,
|
|
marginHorizontal: 10,
|
|
...textstyle,
|
|
}}>
|
|
{label}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
borderRadius: GlobalTheme.borderRadius.lgg,
|
|
borderWidth: 6,
|
|
borderColor: isFocused ? '#DFECFF' : 'transparent',
|
|
marginTop: 8,
|
|
...viewstyle,
|
|
}}>
|
|
<TextInput
|
|
maxLength={maxLength}
|
|
style={[styles.input, inputStyle]}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
keyboardType={keyboardType}
|
|
autoCapitalize="none"
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
placeholder={`Enter your ${label.toLowerCase()}`}
|
|
placeholderTextColor={'#555555'}
|
|
/>
|
|
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CustomTextInput;
|
|
|
|
const styles = StyleSheet.create({
|
|
input: {
|
|
height: 50,
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
borderRadius: 4,
|
|
color: GlobalTheme.colors.black,
|
|
},
|
|
inputContainer: {
|
|
marginBottom: 16,
|
|
},
|
|
});
|