ICS React Native App
1import { StyleSheet, TextInput } from "react-native";
2import { ThemedView } from "./themed-view";
3import { ThemedErrorBox } from "./themed-error-box";
4import { useThemeColor } from "@/hooks/use-theme-color";
5
6interface ThemedTextInputProps {
7 // see https://reactnative.dev/docs/textinput#autocomplete
8 autoComplete?: "current-password" | "email";
9 // see https://reactnative.dev/docs/textinput#enterKeyHint
10 nextHint?: "next" | "done" | "search" | "go";
11 onChange: (value: string) => void | Promise<void>;
12 placeholder: string;
13 value?: string;
14 disabled?: boolean;
15 type?: "text" | "password";
16 error?: string | string[];
17}
18
19export const ThemedTextInput = ({
20 disabled,
21 nextHint,
22 onChange,
23 placeholder,
24 type,
25 value,
26 error,
27}: ThemedTextInputProps) => {
28 const borderColor = useThemeColor({}, error?.length ? "red" : "text");
29
30 const textColor = useThemeColor({}, "text");
31
32 return (
33 <ThemedView style={[styles.inputContainer]}>
34 <TextInput
35 autoCapitalize="none"
36 enterKeyHint={nextHint}
37 onChangeText={onChange}
38 placeholder={placeholder}
39 placeholderTextColor="#888"
40 style={[styles.input, { color: textColor, borderColor }]}
41 value={value}
42 readOnly={disabled}
43 aria-disabled={disabled}
44 secureTextEntry={type === "password"}
45 />
46 <ThemedErrorBox errors={error} />
47 </ThemedView>
48 );
49};
50
51const styles = StyleSheet.create({
52 input: {
53 borderRadius: 8,
54 padding: 8,
55 borderWidth: 1,
56 },
57 inputContainer: {
58 borderRadius: 8,
59 padding: 4,
60 marginVertical: 4,
61 },
62});