diff --git a/with-react-hook-form/App.js b/with-react-hook-form/App.js
new file mode 100644
index 00000000..baaebefd
--- /dev/null
+++ b/with-react-hook-form/App.js
@@ -0,0 +1,114 @@
+import { View, Text, StyleSheet, TextInput, Button } from "react-native";
+import { useForm, Controller } from "react-hook-form";
+
+const EMAIL_REGEX = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
+export default function App() {
+ const {
+ control,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ defaultValues: {
+ email: "",
+ password: "",
+ },
+ });
+
+ const onSubmit = (values) => {
+ const { email, password } = values;
+
+ alert(`Email: ${email}, Password: ${password}`);
+ };
+
+ return (
+
+ Email
+ (
+
+ )}
+ rules={{
+ required: "Email is required.",
+ pattern: {
+ value: EMAIL_REGEX,
+ message: "Enter a valid email address.",
+ },
+ }}
+ />
+ {errors.email && {errors.email.message}}
+
+ Password
+ (
+
+ )}
+ rules={{
+ required: "Password is required.",
+ minLength: {
+ value: 6,
+ message: "Password must be at least 6 characters long.",
+ },
+ }}
+ />
+ {errors.password && (
+ {errors.password.message}
+ )}
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ padding: 24,
+ justifyContent: "center",
+ },
+ label: {
+ marginBottom: 8,
+ fontSize: 14,
+ fontWeight: "bold",
+ color: "#333",
+ },
+ textInput: {
+ height: 40,
+ borderColor: "#ccc",
+ borderWidth: 1,
+ borderRadius: 4,
+ paddingHorizontal: 8,
+ marginBottom: 16,
+ backgroundColor: "#fff",
+ },
+ error: {
+ color: "red",
+ marginBottom: 12,
+ },
+ buttonContainer: {
+ marginTop: 24,
+ borderRadius: 4,
+ },
+});
diff --git a/with-react-hook-form/README.md b/with-react-hook-form/README.md
new file mode 100644
index 00000000..fac7d959
--- /dev/null
+++ b/with-react-hook-form/README.md
@@ -0,0 +1,51 @@
+# React Hook Form Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This example demonstrates how to integrate [React Hook Form](https://react-hook-form.com/) with Expo, helping you write less code and avoid unnecessary re-renders for improved performance.
+
+
+
+## 🚀 How to use
+
+Execute [`create-expo`](https://github.com/expo/expo/tree/main/packages/create-expo) with [npm](https://docs.npmjs.com/cli/init), [yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io/cli/create), or [bun](https://bun.sh/docs/cli/bun-create) to bootstrap the example:
+
+```bash
+npx create-expo --example with-react-hook-form
+```
+
+```bash
+yarn create expo --example with-react-hook-form
+```
+
+```bash
+pnpm create expo --example with-react-hook-form
+```
+
+```bash
+bun create expo --example with-react-hook-form
+```
+
+To run your project, navigate to the directory and start the dev server.
+
+Open the project on your preferred platform:
+ - iOS: [Expo Go](https://itunes.apple.com/app/apple-store/id982107779)
+ - Android: [Expo Go](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample)
+ - Web: Any web browser
+
+## 📝 Notes
+
+- Learn more about [React Hook Form](https://react-hook-form.com/)
diff --git a/with-react-hook-form/babel.config.js b/with-react-hook-form/babel.config.js
new file mode 100644
index 00000000..2900afe9
--- /dev/null
+++ b/with-react-hook-form/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function(api) {
+ api.cache(true);
+ return {
+ presets: ['babel-preset-expo'],
+ };
+};
diff --git a/with-react-hook-form/package.json b/with-react-hook-form/package.json
new file mode 100644
index 00000000..57dd032d
--- /dev/null
+++ b/with-react-hook-form/package.json
@@ -0,0 +1,20 @@
+{
+ "scripts": {
+ "start": "expo start",
+ "android": "expo start --android",
+ "ios": "expo start --ios",
+ "web": "expo start --web"
+ },
+ "dependencies": {
+ "@expo/metro-runtime": "~3.2.1",
+ "expo": "^51.0.0",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "react-hook-form": "^7.52.1",
+ "react-native": "0.74.1",
+ "react-native-web": "~0.19.6"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.19.3"
+ }
+}