I have been working on developing a text form using typescript within the React Native framework. To accomplish this, I created a TextInput component specifically designed for email and password inputs. Below is the code I have been working with:
TextInput.tsx
interface StyledTextInputProps extends ComponentPropsWithoutRef<"input"> {
errorText: string;
description: string;
}
export default function StyledTextInput({ errorText, description, ...props } : StyledTextInputProps) {
return (
<View style={styles.container}>
<Input
style={styles.input}
selectionColor={theme.colors.primary}
underlineColor="transparent"
mode="outlined"
{...props}
/>
</View>
)
}
const styles = StyleSheet.create({
input: {
backgroundColor: theme.colors.surface,
},
})
SignUp.tsx
export default function RegisterScreen({ navigation } : { navigation : any }) {
const [name, setName] = useState({ value: '', error: '' })
const [email, setEmail] = useState({ value: '', error: '' })
const [password, setPassword] = useState({ value: '', error: '' })
return (
<Background>
<StyledTextInput
label="Name"
returnKeyType="next"
value={name.value}
onChangeText={(text) => setName({ value: text, error: '' })}
error={!!name.error}
errorText={name.error}
/>
</Background>
)
}
The error messages for TextInput.tsx can be viewed in the following link: https://i.sstatic.net/s0lg9.png
Similarly, the error messages for SignUp.tsx are available in this link: https://i.sstatic.net/DG1ie.png
You can check out the images by clicking on this link: https://i.sstatic.net/lHaEt.png