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
|
import {ComponentProps} from 'react'
import {StyleSheet, TextInput as RNTextInput, View} from 'react-native'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from '#/lib/hooks/usePalette'
import {useTheme} from '#/lib/ThemeContext'
interface Props extends Omit<ComponentProps<typeof RNTextInput>, 'onChange'> {
testID?: string
icon: IconProp
onChange: (v: string) => void
}
export function TextInput({testID, icon, onChange, ...props}: Props) {
const theme = useTheme()
const pal = usePalette('default')
return (
<View style={[pal.border, styles.container]}>
<FontAwesomeIcon icon={icon} style={[pal.textLight, styles.icon]} />
<RNTextInput
testID={testID}
style={[pal.text, styles.textInput]}
placeholderTextColor={pal.colors.textLight}
autoCapitalize="none"
autoCorrect={false}
keyboardAppearance={theme.colorScheme}
onChangeText={v => onChange(v)}
{...props}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
borderWidth: 1,
borderRadius: 6,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 4,
},
icon: {
marginLeft: 10,
},
textInput: {
flex: 1,
width: '100%',
paddingVertical: 10,
paddingHorizontal: 10,
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '400',
borderRadius: 10,
},
})
|
