Hello, we are back with a simple content. A simple form example using typescript zod react-hook-form while creating a form in the Expo ecosystem.
Let's get started without further ado.
- Let's prepare the expo installation and development environment
npx create-expo-app RNHF-demo --template blank-typescript
cd RNHF-demo
code .
- Let's install other npm packages
npm install @hookform/resolvers
npm i react-hook-form
npm i react-native-paper
npm i react-native-safe-area-context
npm i zod
import { Text, View, Button, StyleSheet } from "react-native";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { TextInput } from "react-native-paper";
export default function App() {
const userSchema = z.object({
username: z
.string()
.min(5, { message: "Username must be at least 5 characters." })
.max(30, { message: "Username must be at most 30 characters." }),
email: z.string().email({ message: "Please enter a valid email address." }),
age: z.number().min(18, { message: "You must be over 18 years old." }),
});
type UserFormType = z.infer<typeof userSchema>;
const {
control,
handleSubmit,
formState: { errors },
} = useForm<UserFormType>({
resolver: zodResolver(userSchema),
});
const onSubmit: SubmitHandler<UserFormType> = (data: UserFormType) => {
console.log(data);
};
return (
<View style={styles.container}>
<Controller
control={control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
}) => (
<View>
<TextInput
mode="outlined"
label="Username"
onBlur={onBlur}
onChangeText={onChange}
value={value}
activeOutlineColor={error ? "red" : "black"}
style={styles.input}
/>
</View>
)}
name="username"
/>
{errors.username && (
<Text style={{ color: "#ff8566" }}>{errors.username.message}</Text>
)}
<Controller
control={control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
}) => (
<TextInput
mode="outlined"
label="E-mail"
onBlur={onBlur}
onChangeText={onChange}
value={value}
activeOutlineColor={error ? "red" : "black"}
style={styles.input}
/>
)}
name="email"
/>
{errors.email && (
<Text style={{ color: "#ff8566" }}>{errors.email.message}</Text>
)}
<Controller
control={control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
}) => (
<TextInput
mode="outlined"
label="Age"
onBlur={onBlur}
onChangeText={(text) => {
const parsed = parseInt(text, 10);
onChange(isNaN(parsed) ? "" : parsed);
}}
value={
value === null || value === undefined ? "" : value.toString()
}
placeholder="Yaş"
keyboardType="numeric"
activeOutlineColor={error ? "red" : "black"}
style={styles.input}
/>
)}
name="age"
/>
{errors.age && (
<Text style={{ color: "#ff8566" }}>{errors.age.message}</Text>
)}
<Button title="Submit" onPress={handleSubmit(onSubmit)} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
marginVertical: 10,
padding: 8,
},
input: {
marginVertical: 10,
},
});
- Let's run our application
npx expo start
Top comments (0)