-
Notifications
You must be signed in to change notification settings - Fork 0
/
Input.js
79 lines (75 loc) · 1.96 KB
/
Input.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
*
* |\\ || ||\\\\
* ||\\ || ||
* || \\|| ||
* || \|| ||////
*
* ------This file was created, authored, currently owned and all rights belong to the author NC------
*
* Author: Nicholas Ciraulo
*/
import React from "react";
import { TextInput, StyleSheet, View } from "react-native";
import { Colors, Dim, Font } from "../../Constants";
import { Feather as Icon } from "@expo/vector-icons";
export const CustomInput = React.forwardRef((props, ref) => {
let width = undefined;
if (props.small) {
width = Dim.width * 0.4;
} else if (props.medium) {
width = Dim.width * 0.6;
} else if (props.large) {
width = Dim.width * 0.8;
}
const styles = StyleSheet.create({
container: {
width: width,
flexDirection: "row",
backgroundColor: Colors.aegean,
borderRadius: 23,
margin: 12,
alignItems: "center",
paddingHorizontal: 15,
paddingVertical: 10,
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.3,
shadowColor: Colors.led,
},
input: {
// backgroundColor: "#00FF0030",
fontSize: Font.p2.size,
flex: 1,
// paddingVertical: 10,
// fontFamily: "LilitaOne_400Regular"
},
});
return (
<View style={styles.container}>
{props.iconName ? (
<Icon
name={props.iconName}
size={Font.p1.size}
color={Colors.dusk}
style={{
marginRight: 10,
// backgroundColor: "#FF000030",
}}
/>
) : null}
<TextInput
placeholderTextColor={
props.placeholderColor ? props.placeholderColor : Colors.dusk
}
style={{ ...styles.input, ...props.style, color: Colors.black }}
ref={ref}
{...props}
>
{props.children}
</TextInput>
</View>
);
});