Form Setup in React Native

Forms in React Native generally consist of several TextInput components, along with buttons for submission. You use useState (or useReducer for more complex forms) to handle form state.

Here's a simple example of a form with basic event handling:
import React, { useState } from 'react';

import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

const App = () => {

  // State to hold form data

  const [name, setName] = useState('');

  const [email, setEmail] = useState('');

  // Handling form submission

  const handleSubmit = () => {

    console.log('Form Submitted:', { name, email });

    // Do form submission logic here (like sending data to a backend)

  };

  return (

    <View style={styles.container}>

      <TextInput

        style={styles.input}

        placeholder="Enter your name"

        value={name}

        onChangeText={setName} // Event handler for input change

      />

      <TextInput

        style={styles.input}

        placeholder="Enter your email"

        value={email}

        onChangeText={setEmail}

        keyboardType="email-address"

      />

      <Button title="Submit" onPress={handleSubmit} /> {/* Button event */}

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    padding: 16,

  },

  input: {

    height: 40,

    borderColor: 'gray',

    borderWidth: 1,

    marginBottom: 12,

    padding: 8,

  },

});

export default App;