feat(core): implement advanced keyboard management and fix monorepo b… (#1)

This commit introduces several new props to FieldForm (autoScroll, chainEnabled, autoReturnKeyType, dismissKeyboardOnTap, etc.) and resolves bundling issues in the monorepo showcase app by hoisting runtime polyfills to the project root.

Author: SyedSohaib456

bun.lock

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

example/.gitignore

@@ -17,9 +17,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   FieldForm,
   FieldInput,
-  type FieldFormHandle,
+  dismissKeyboard,
   useKeyboardState,
-} from 'react-native-fieldflow';
+  type FieldFormHandle,
+} from '../../../packages/react-native-fieldflow/src';
 import {
   ActionButton,
   FeatureCard,

example/app/(tabs)/advanced.tsx

@@ -21,7 +21,7 @@ import {
   useKeyboardHeight,
   useKeyboardState,
   useKeyboardVisible,
-} from 'react-native-fieldflow';
+} from '../../../packages/react-native-fieldflow/src';
 import {
   ActionButton,
   FeatureCard,

example/app/(tabs)/hooks.tsx

@@ -5,23 +5,17 @@
  * quick demo form, API list, and navigation to detail screens.
  */
 import Ionicons from '@expo/vector-icons/Ionicons';
+import { useRouter } from 'expo-router';
 import React, { useCallback, useRef, useState } from 'react';
 import {
   Alert,
   Platform,
   StyleSheet,
-  Switch,
   Text,
-  View,
+  View
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useRouter } from 'expo-router';
 
-import {
-  FieldForm,
-  useKeyboardState,
-  type FieldFormHandle,
-} from 'react-native-fieldflow';
 import {
   ActionButton,
   FeatureCard,
@@ -34,6 +28,11 @@ import {
   ShowcaseRadius,
   ShowcaseSpacing,
 } from '@/constants/showcase-theme';
+import {
+  FieldForm,
+  useKeyboardState,
+  type FieldFormHandle,
+} from '../../../packages/react-native-fieldflow/src';
 
 export default function HomeScreen() {
   const router = useRouter();
@@ -48,7 +47,9 @@ export default function HomeScreen() {
   // ── Feature toggles ────────────────────────────────
   const [scrollEnabled, setScrollEnabled] = useState(true);
   const [avoidEnabled, setAvoidEnabled] = useState(true);
+  const [autoScroll, setAutoScroll] = useState(true);
   const [chainEnabled, setChainEnabled] = useState(true);
+  const [dismissOnTap, setDismissOnTap] = useState(true);
 
   const handleSubmit = useCallback(() => {
     setSubmitted(true);
@@ -63,6 +64,9 @@ export default function HomeScreen() {
         onSubmit={handleSubmit}
         scrollable={scrollEnabled}
         avoidKeyboard={avoidEnabled}
+        autoScroll={autoScroll}
+        chainEnabled={chainEnabled}
+        dismissKeyboardOnTap={dismissOnTap}
         extraScrollPadding={100}
         keyboardVerticalOffset={0}
         scrollViewProps={{
@@ -117,6 +121,20 @@ export default function HomeScreen() {
               toggleValue={chainEnabled}
               onToggle={setChainEnabled}
             />
+            <FeatureCard
+              icon="color-filter-outline"
+              title="Auto Scroll"
+              description="Scroll to focused field"
+              toggleValue={autoScroll}
+              onToggle={setAutoScroll}
+            />
+            <FeatureCard
+              icon="hand-right-outline"
+              title="Tap to Dismiss"
+              description="Tap empty area to close"
+              toggleValue={dismissOnTap}
+              onToggle={setDismissOnTap}
+            />
           </View>
         </View>
 

example/app/(tabs)/index.tsx

@@ -20,7 +20,7 @@ import {
   FieldForm,
   type FieldFormHandle,
   useKeyboardState,
-} from 'react-native-fieldflow';
+} from '../../../packages/react-native-fieldflow/src';
 import {
   ActionButton,
   FeatureCard,

example/app/(tabs)/login.tsx

@@ -5,7 +5,7 @@ import Ionicons from '@expo/vector-icons/Ionicons';
 import React, { forwardRef, useState } from 'react';
 import { StyleSheet, Text, TextInput, View, type TextInputProps } from 'react-native';
 
-import { FieldInput, type FieldInputProps } from 'react-native-fieldflow';
+import { FieldInput, type FieldInputProps } from '../../../packages/react-native-fieldflow/src';
 import {
   ShowcaseColors as C,
   ShowcaseRadius,

example/components/showcase/StyledInput.tsx

@@ -17,7 +17,7 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, 'node_modules'),
 ];
 
-// 3. Force Metro to resolve the same version of dependencies from the workspace root
-config.resolver.disableHierarchicalLookup = true;
+// 3. Let Metro resolve hierarchically (important for bun node_modules cache)
+config.resolver.disableHierarchicalLookup = false;
 
 module.exports = config;

example/metro.config.js

@@ -11,6 +11,10 @@
     "lint": "expo lint"
   },
   "dependencies": {
+    "@babel/runtime": "^7.24.0",
+    "@expo/metro-runtime": "~6.1.2",
+    "expo-modules-core": "~2.2.0",
+    "invariant": "^2.2.4",
     "react-native-fieldflow": "workspace:*",
     "@expo/vector-icons": "^15.0.3",
     "@react-navigation/bottom-tabs": "^7.4.0",

example/package.json

@@ -16,6 +16,10 @@
     "release": "cd packages/react-native-fieldflow && npm publish"
   },
   "devDependencies": {
-    "turbo": "latest"
+    "turbo": "latest",
+    "whatwg-fetch": "^3.6.20",
+    "anser": "^1.4.9",
+    "stacktrace-parser": "^0.1.10",
+    "pretty-format": "^29.7.0"
   }
 }