Creat Register Form React Native to Google Spreadsheet

Create a React Native registration form that sends data to a Google Sheet by creating a Google Form, connecting it to a spreadsheet, generating a POST API URL via Apps Script, and using fetch to submit input data. This approach avoids needing a custom backend server. 

Here's how to create a React Native registration form that sends data to a spreadsheet:

Set Up Google Sheet & API 

1. Create a Sheet: Create a new Google Sheet. Add headers, such as Name, Email, and Password.
2. Create Script: Open Extensions > Apps Script.
3. Add Code: Use the following code to handle POST requests and add rows:
   javascript

   function doPost(e) {
     const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
     const data = JSON.parse(e.postData.contents);
     sheet.appendRow([data.name, data.email, data.password, new Date()]);
     return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);
   }
   

4. Deploy: Click Deploy > New deployment, select Web app, set execute as Me, and Who has access to Anyone. Copy the Web app URL.

React Native Registration Form

jsx

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

const RegisterForm = () => {
  const [form, setForm] = useState({ name: '', email: '', password: '' });
  const [loading, setLoading] = useState(false);

  // REPLACE WITH YOUR APPS SCRIPT URL
  const API_URL = 'YOUR_GOOGLE_SCRIPT_URL_HERE';

  const handleSubmit = () => {
    if (!form.name || !form.email || !form.password) {
      Alert.alert('Error', 'Please fill all fields');
      return;
    }
    setLoading(true);
    fetch(API_URL, {
      method: 'POST',
      body: JSON.stringify(form),
      headers: { 'Content-Type': 'application/json' },
    })
      .then(() => {
        Alert.alert('Success', 'Registered successfully!');
        setForm({ name: '', email: '', password: '' });
      })
      .catch((err) => Alert.alert('Error', err.message))
      .finally(() => setLoading(false));
  };

  return (
    <View style={styles.container}>
      <TextInput placeholder="Name" style={styles.input} onChangeText={(text) => setForm({ ...form, name: text })} value={form.name} />
      <TextInput placeholder="Email" style={styles.input} onChangeText={(text) => setForm({ ...form, email: text })} value={form.email} />
      <TextInput placeholder="Password" style={styles.input} secureTextEntry onChangeText={(text) => setForm({ ...form, password: text })} value={form.password} />
      <Button title={loading ? 'Submitting...' : 'Register'} onPress={handleSubmit} disabled={loading} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, flex: 1, justifyContent: 'center' },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginBottom: 15, borderRadius: 5 },
});

export default RegisterForm;

Important Considerations

• Security: This method is suitable for prototypes but not for secure applications because it exposes the URL.
• Data Structure: The keys in JSON.stringify(form) must match the data.key references in your Apps Script.
• Permissions: If you encounter permission issues, ensure the Google Sheet is shared with "Anyone with the link can edit".