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 getAssessment = async (formData) => {
    const response = await fetch("https://api.spamblock.io/v1/check", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        site: "react-native",
        fields: [
          { name: "name", value: formData.name, type: "text" },
          { name: "email", value: formData.email, type: "email" },
          { name: "message", value: formData.message, type: "textarea" },
        ],
        hpFilled: false,
      }),
    });
    return response.json();
  };

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

    setIsSubmitting(true);

    try {
      const formData = { name, email, message };
      const assessment = await getAssessment(formData);

      // Always send to backend with markers; backend filters spam
      const payload = {
        ...formData,
        spamblock_allow: assessment.allow ? "true" : "false",
        spamblock_score: String(assessment.score ?? 0),
        spamblock_reasons: (assessment.reasons || []).join(","),
      };

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

      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. App sends submission to backend with assessment data
  5. Backend filters spam based on markers
  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