React Native - SpamBlock API and Forms Integration

Learn how to integrate SpamBlock API and Forms solution with React Native apps. Note: Pixel is web-only, but API integration is available.

Overview

This example shows how to integrate both the SpamBlock API and SpamBlock Forms solution with React Native applications. Note: The SpamBlock Pixel is web-only and cannot run in React Native. However, you can use the SpamBlock API directly to check submissions for spam, and submit to SpamBlock Forms endpoints.

Note: While you can use any backend endpoint, this example specifically demonstrates using both the SpamBlock API and SpamBlock Forms together. The SpamBlock Forms endpoint (https://api.spamblock.io/f/{form_id}) provides a complete hosted form solution. Learn more about Forms or use your own backend endpoint.

import React, { useState } from "react";
import { View, Text, TextInput, Button, Alert, ActivityIndicator } from "react-native";

export default function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const checkSpam = async (formData) => {
    // Check submission with SpamBlock API
    const response = await fetch("https://api.spamblock.io/v1/check", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: formData.email,
        message: formData.message,
        name: formData.name,
        // Add other fields as needed
      }),
    });

    const result = await response.json();
    return result.allowed; // Returns true if submission is allowed
  };

  const handleSubmit = async () => {
    if (!name || !email || !message) {
      Alert.alert("Error", "Please fill in all fields");
      return;
    }

    setIsSubmitting(true);

    try {
      const formData = { name, email, message };
      
      // Check for spam first
      const isAllowed = await checkSpam(formData);

      if (!isAllowed) {
        Alert.alert("Error", "Submission blocked as spam");
        setIsSubmitting(false);
        return;
      }

      // If allowed, submit to your backend
      const response = await fetch("https://api.spamblock.io/f/{form_id}", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        Alert.alert("Success", "Submission successful!");
        setName("");
        setEmail("");
        setMessage("");
      } else {
        Alert.alert("Error", "There was an error submitting the form.");
      }
    } catch (error) {
      Alert.alert("Error", "Network error. Please try again.");
      console.error("Error:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Name"
        value={name}
        onChangeText={setName}
        style={{ borderWidth: 1, padding: 10, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        style={{ borderWidth: 1, padding: 10, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Message"
        value={message}
        onChangeText={setMessage}
        multiline
        numberOfLines={4}
        style={{ borderWidth: 1, padding: 10, marginBottom: 10 }}
      />
      <Button
        title={isSubmitting ? "Sending..." : "Send"}
        onPress={handleSubmit}
        disabled={isSubmitting}
      />
      {isSubmitting && <ActivityIndicator style={{ marginTop: 10 }} />}
    </View>
  );
}

What This Example Shows

  • How to integrate SpamBlock API with React Native
  • Direct API calls since Pixel is web-only
  • Spam checking before form submission
  • React Native form handling patterns

When to Use It

Use this approach when:

  • You're building a React Native mobile application
  • You need spam protection in native apps
  • You want to check submissions before sending to backend
  • You're using React Native's built-in form components

How it Works

  1. User fills out form in React Native app
  2. User submits form
  3. App calls SpamBlock API to check submission
  4. If spam: submission blocked, user notified
  5. If allowed: submission sent to your backend
  6. Success/error feedback shown to user

Important Notes

  • Pixel is web-only: The SpamBlock Pixel cannot run in React Native
  • API integration: Use the SpamBlock API directly (/v1/check endpoint)
  • API key: You may need an API key for production use (check SpamBlock documentation)
  • Network requests: Ensure your app has proper network permissions

Common Mistakes

  1. Trying to use Pixel - Pixel is JavaScript and won't work in React Native
  2. Missing API endpoint - Use /v1/check endpoint for spam checking
  3. Not handling errors - Always wrap API calls in try/catch
  4. Missing network permissions - Ensure app has internet permissions
  5. Synchronous calls - All API calls must be async/await
  6. Not checking response - Always verify the API response before proceeding

Learn More