Working with Forms and Input

<TextInput
  value={this.state.text}
  onChangeText={(text) => this.setState({ text })}
  placeholder="Enter your name"
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
/>

<TextInput
  value={this.state.password}
  onChangeText={(text) => this.setState({ password: text })}
  placeholder="Enter password"
  secureTextEntry={true}
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
/>

<TextInput
  placeholder="Enter your name"
  onChangeText={(text) => setName(text)}
  value={name}
/>

const [formData, setFormData] = useState({
  username: "",
  email: ""
});

const handleInputChange = (field, value) => {
  setFormData(prev => ({ ...prev, [field]: value }));
};

<TextInput
  placeholder="Username"
  value={formData.username}
  onChangeText={(text) => handleInputChange("username", text)}
/>
<TextInput
  placeholder="Email"
  value={formData.email}
  onChangeText={(text) => handleInputChange("email", text)}
/>

import React, { useRef } from 'react';
import { TextInput } from 'react-native';

const FocusExample = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <>
      <TextInput
        ref={inputRef}
        placeholder="Press button to focus"
      />
      <Button title="Focus Input" onPress={focusInput} />
    </>
  );
};

import { useForm } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("email", {
          required: "Email is required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "Invalid email address"
          }
        })}
      />
      {errors.email && <p>{errors.email.message}</p>}
      <input type="submit" />
    </form>
  );
}

const express = require("express");
const { body, validationResult } = require("express-validator");

const app = express();

app.post(
  "/submit-form",
  [
    body("username")
      .isLength({ min: 3, max: 20 })
      .withMessage("Username must be between 3 and 20 characters"),
    body("password")
      .isLength({ min: 8 })
      .withMessage("Password must be at least 8 characters")
  ],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
    // Proceed with form submission
  }
);

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

const ControlledInput = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Type here..."
      />
    </View>
  );
};

export default ControlledInput;

<TextInput
  placeholder="Enter email"
  keyboardType="email-address"
/>

<TextInput
  placeholder="Enter age"
  keyboardType="number-pad"
/>

<TextInput
  placeholder="Enter text"
  returnKeyType="done"
  onSubmitEditing={() => console.log("Submitted")}
>
</TextInput>

{'import React, { useState } from "react";\nimport { TextInput } from "react-native";\n\nconst MultiLineInput = () => {\n  const [text, setText] = useState(""\n\n  return (\n    <TextInput\n      multiline={true}\n      numberOfLines={4}\n      maxHeight={200}\n      value={text}\n      onChangeText={setText}\n      placeholder="Enter multi-line text here..."\n    /\>\n  );\n};\n\nexport default MultiLineInput;'}

<TextInput
  placeholder="Enter password"
  secureTextEntry={true}
  />

import React, { useState } from 'react';<br />import { View, TextInput, Button } from 'react-native';<br /><br />const MyForm = () => {<br />  const [formData, setFormData] = useState({<br />    name: '',<br />    email: ''<br />  });<br /><br />  const handleSubmit = (data) => {<br />    console.log('Form submitted:', data);<br />  };<br /><br />  return (<br />    <View><br />      <TextInput<br />        value={formData.name}<br />        onChangeText={(text) => setFormData({...formData, name: text})}<br />        placeholder="Name"<br />      /><br />      <TextInput<br />        value={formData.email}<br />        onChangeText={(text) => setFormData({...formData, email: text})}<br />        placeholder="Email"<br />      /><br />      <Button title="Submit" onPress={() => handleSubmit(formData)} /><br />    </View><br />  );<br />};

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

const CustomInput = ({ placeholder, value, onChange }) => {
  return (
    <View style={{ margin: 10 }}>
      <TextInput
        placeholder={placeholder}
        value={value}
        onChangeText={onChange}
        style={{
          borderWidth: 1,
          borderColor: '#ccc',
          padding: 10,
          borderRadius: 5
        }}
      />
    </View>
  );
};

export default CustomInput;

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import CustomInput from './CustomInput';

const FormExample = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    console.log({ name, email });
  };

  return (
    <View style={{ padding: 20 }}>
      <CustomInput
        placeholder="Name"
        value={name}
        onChange={setName}
      />
      <CustomInput
        placeholder="Email"
        value={email}
        onChange={setEmail}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default FormExample;

// Install: npm install react-hook-form
import { useForm } from "react-hook-form";

export default function MyForm() {
  const { register, handleSubmit } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("name")}
        placeholder="Name"
      />
      <input
        {...register("email")}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}