feat(rhf-plugin): implement new plugin

.changeset/add-rhf-plugin.md

@@ -0,0 +1,5 @@
+---
+'@rozenite/rhf-plugin': minor
+---
+
+Add React Hook Form plugin. Inspect form state, field values, errors, dirty/touched fields, and validation status in real time from React Native DevTools.

apps/playground/package.json

@@ -33,6 +33,7 @@
     "@rozenite/overlay-plugin": "workspace:*",
     "@rozenite/performance-monitor-plugin": "workspace:*",
     "@rozenite/plugin-bridge": "workspace:*",
+    "@rozenite/rhf-plugin": "workspace:*",
     "@rozenite/react-navigation-plugin": "workspace:*",
     "@rozenite/redux-devtools-plugin": "workspace:*",
     "@rozenite/require-profiler-plugin": "workspace:*",
@@ -75,6 +76,7 @@
     "react-native-svg-web": "~1.0.9",
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.7.2",
+    "react-hook-form": "^7.54.2",
     "react-redux": "^9.2.0",
     "zustand": "^5.0.6"
   },

apps/playground/src/app/App.tsx

@@ -29,6 +29,7 @@ import { ReduxTestScreen } from './screens/ReduxTestScreen';
 import { RequestBodyTestScreen } from './screens/RequestBodyTestScreen';
 import { RequireProfilerTestScreen } from './screens/RequireProfilerTestScreen';
 import { FileSystemTestScreen } from './screens/FileSystemTestScreen';
+import { ReactHookFormPluginScreen } from './screens/ReactHookFormPluginScreen';
 import { StoragePluginScreen } from './screens/StoragePluginScreen';
 import { storagePluginAdapters } from './storage-plugin-adapters';
 import { sqlitePluginAdapters } from './sqlite-plugin-databases';
@@ -77,6 +78,7 @@ const Wrapper = () => {
     >
       <Stack.Screen name="Landing" component={LandingScreen} />
       <Stack.Screen name="ControlsPlugin" component={ControlsPluginScreen} />
+      <Stack.Screen name="ReactHookFormPlugin" component={ReactHookFormPluginScreen} />
       <Stack.Screen name="StoragePlugin" component={StoragePluginScreen} />
       <Stack.Screen name="NetworkTest" component={NetworkTestScreen} />
       <Stack.Screen name="RequestBodyTest" component={RequestBodyTestScreen} />

apps/playground/src/app/navigation/types.ts

@@ -3,6 +3,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 export type RootStackParamList = {
   Landing: undefined;
   ControlsPlugin: undefined;
+  ReactHookFormPlugin: undefined;
   StoragePlugin: undefined;
   NetworkTest: undefined;
   RequestBodyTest: undefined;

apps/playground/src/app/screens/LandingScreen.tsx

@@ -13,7 +13,7 @@
 
 export const LandingScreen = () => {
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
 
   return (
     <View style={styles.container}>
@@ -44,6 +44,13 @@
                 <Text style={styles.buttonText}>Storage Plugin</Text>
               </TouchableOpacity>
 
+              <TouchableOpacity
+                style={styles.navigationButton}
+                onPress={() => navigation.navigate('ReactHookFormPlugin' as never)}
+              >
+                <Text style={styles.buttonText}>React Hook Form</Text>
+              </TouchableOpacity>
+
               <TouchableOpacity
                 style={styles.navigationButton}
                 onPress={() => navigation.navigate('NetworkTest' as never)}