lineargradient add

src/components/CustomTextInput.js

@@ -0,0 +1,86 @@
+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' : 'transparent',
+    borderWidth: 2,
+    backgroundColor: isFocused ? '#FFF' : '#F1F1F1',
+    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,
+  },
+});