React Native Integration

React Native Contact Form with only Frontend Code

Start collecting form submissions from your React app with FormAPI in 2 minutes. Create your form in FormAPI and paste your unique URL inside your form. Look at the code examples and detailed tutorial below to get started.

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

const FetchForm = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    setError('');
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message }),
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Text>Message:</Text>
      <TextInput style={[styles.input, styles.textarea]} value={message} onChangeText={setMessage} multiline />

      <Button title='Send' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
  textarea: { height: 80 },
});

export default FetchForm;

How to Integrate Code

What is React Native?

React Native is a JavaScript framework for building mobile applications using React. It allows you to create native-like mobile experiences for both iOS and Android. FormAPI works seamlessly with React Native, and this guide will show you how to use it.

FormAPI Setup with React Native using Fetch

Fetch is a native API, so every React Native app can use it without any installation. The steps are simple. Please make sure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique endpoint URL.

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

const FetchForm = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    setError('');
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message }),
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Text>Message:</Text>
      <TextInput style={[styles.input, styles.textarea]} value={message} onChangeText={setMessage} multiline />

      <Button title='Send' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
  textarea: { height: 80 },
});

export default FetchForm;

FormAPI Setup with React Native using Axios

Below you will see the code that works using Axios, which is a library to perform HTTP requests. It's simple and effective. The code will show a success or error message and is ready to work. Please make sure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique endpoint URL..

Vs Code
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import axios from 'axios';

const AxiosForm = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    setError('');
    try {
      const response = await axios.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email, message });
      if (response.data.code === 200) setSubmitted(true);
      else setError(response.data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Text>Message:</Text>
      <TextInput style={[styles.input, styles.textarea]} value={message} onChangeText={setMessage} multiline />

      <Button title='Send' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
  textarea: { height: 80 },
});

export default AxiosForm;

FormAPI Setup for File Uploads in React Native

Below is an example of how to upload files in React Native using FormAPI. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique endpoint URL.

Vs Code
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import * as DocumentPicker from 'expo-document-picker';

const FileUploadForm = () => {
  const [email, setEmail] = useState('');
  const [file, setFile] = useState(null);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const pickFile = async () => {
    try {
      const result = await DocumentPicker.getDocumentAsync({ type: '*/*' });
      if (result.type === 'success') {
        setFile(result);
      }
    } catch (err) {
      setError(err.message);
    }
  };

  const handleSubmit = async () => {
    if (!file) return setError('Please select a file');
    setError('');

    const formData = new FormData();
    formData.append('email', email);
    formData.append('file', { uri: file.uri, name: file.name, type: 'application/octet-stream' });

    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        body: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} value={email} onChangeText={setEmail} keyboardType='email-address' />

      <Button title='Pick File' onPress={pickFile} />
      {file && <Text>Selected: {file.name}</Text>}

      <Button title='Upload' onPress={handleSubmit} />
      {submitted && <Text>Form submitted successfully!</Text>}
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 8, borderRadius: 4 },
});

export default FileUploadForm;

Set Up Forms Checks in 60 Seconds

1

Choose HTTPS Monitor

Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.

2

Enter Site URL & Options

Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.

3

Activate & Get Instant Status

We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.

Get Started Now

USe CAses

Need templates? Say less.

A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.

  • Simple Contact Form
  • Survery Form
  • Book a Demo Form
  • News Letter Form
  • Registration Form & more...
Learn More

Ready to Experience Zunoy?

Start your journey with Zunoy’s powerful suite of tools, designed for startups, developers, and growing teams alike.

Sign UP Now

All our products come with a lifetime free tier.

FormAPI

Collect submissions without a backend—add a headless endpoint to any <form>

Operational

Home

Shield

Pricing

Integrations

FormAPI for React-Native

FormAPI for Flutter

FormAPI for React

FormAPI for Angular

FormAPI for Vue

FormAPI for Elementor

FormAPI for WordPress

FormAPI for HTML

support@zunoy.com

Copyright © 2025 - Mentcube Innovations Pvt Ltd. All Rights Reserved.

FormAPI