connscreen form

app/index.tsx

@@ -1,7 +1,49 @@
-import SSHClient, { PtyType } from '@dylankenneally/react-native-ssh-sftp'
-import { Button, Text, View } from 'react-native'
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
+import { Button, TextInput, View } from 'react-native'
+
+const { fieldContext, formContext } = createFormHookContexts()
+
+function TextField() {
+	return <TextInput />
+}
+
+function NumberField() {
+	return <TextInput keyboardType="numeric" />
+}
+
+function SubmitButton() {
+	return <Button title="Submit" onPress={() => {}} />
+}
+
+// Allow us to bind components to the form to keep type safety but reduce production boilerplate
+// Define this once to have a generator of consistent form instances throughout your app
+const { useAppForm } = createFormHook({
+	fieldComponents: {
+		TextField,
+		NumberField,
+	},
+	formComponents: {
+		SubmitButton,
+	},
+	fieldContext,
+	formContext,
+})
 
 export default function Index() {
+	const connectionForm = useAppForm({
+		defaultValues: {
+			host: '',
+			port: 22,
+			username: '',
+			password: '',
+		},
+		validators: {
+			onSubmitAsync: async (values) => {
+				console.log(values)
+			},
+		},
+	})
+
 	return (
 		<View
 			style={{
@@ -10,8 +52,7 @@ export default function Index() {
 				alignItems: 'center',
 			}}
 		>
-			<Text>Edit app/index.tsx to edit this screen.</Text>
-			<Button
+			{/* <Button
 				title="Click me"
 				onPress={() => {
 					console.log('Connecting...')
@@ -32,7 +73,27 @@ export default function Index() {
 						}, 5_000)
 					})
 				}}
+			/> */}
+			<connectionForm.AppForm>
+				<connectionForm.AppField
+					name="host"
+					children={(field) => <field.TextField />}
 				/>
+				<connectionForm.AppField
+					name="port"
+					children={(field) => <field.NumberField />}
+				/>
+				<connectionForm.AppField
+					name="username"
+					children={(field) => <field.TextField />}
+				/>
+				<connectionForm.AppField
+					name="password"
+					children={(field) => <field.TextField />}
+				/>
+
+				<connectionForm.SubmitButton />
+			</connectionForm.AppForm>
 		</View>
 	)
 }

eslint.config.js

@@ -1,9 +1,11 @@
 // https://docs.expo.dev/guides/using-eslint/
 const { defineConfig } = require('eslint/config')
 const expoConfig = require('eslint-config-expo/flat')
+// const { config: epicConfig } = require('@epic-web/config/eslint')
 
 module.exports = defineConfig([
 	expoConfig,
+	// ...epicConfig,
 	{
 		ignores: ['dist/*'],
 	},

package.json

@@ -18,6 +18,7 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "@tanstack/react-form": "^1.19.3",
     "expo": "~54.0.0-preview.12",
     "expo-constants": "~18.0.6",
     "expo-font": "~14.0.6",
@@ -48,6 +49,5 @@
     "prettier-plugin-organize-imports": "^4.2.0",
     "tsx": "^4.20.5",
     "typescript": "~5.9.2"
-  },
-  "private": true
+  }
 }

prettier.config.js

@@ -1,4 +1,5 @@
 import defaultConfig from '@epic-web/config/prettier'
+// const defaultConfig = require('@epic-web/config/prettier')
 // Sometimes this plugin can remove imports that are in use.
 // As a workaround we will only use this in the cli. (npm run fmt)
 const sortImports = process.env.SORT_IMPORTS === 'true'