import * as React from 'react'
2import {
3 View,
4 TextInput,
5 Text,
6 StyleSheet,
7 ViewStyle,
8 TextStyle,
9 TextInputProps,
10} from 'react-native'
11import { FieldError } from 'react-hook-form'
12interface Props extends TextInputProps {
13 name: string
14 label?: string
15 labelStyle?: TextStyle
16 error?: FieldError | undefined
17}
18
19export default React.forwardRef<any, Props>(
20 (props, ref): React.ReactElement => {
21 const { label, labelStyle, error, ...inputProps } = props
22
23 return (
24 <View style={styles.container}>
25 {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
26 <TextInput
27 autoCapitalize="none"
28 ref={ref}
29 style={[
30 styles.inputContainer,
31 { borderColor: error ? '#fc6d47' : '#c0cbd3' },
32 ]}
33 {...inputProps}
34 />
35 <Text style={styles.textError}>{error && error.message}</Text>
36 </View>
37 )
38 }
39)