In-app surveys in React Native

App makers rarely get second chances to make a good first impression, so feedback is crucial.

In our time, we’ve gathered feedback in many ways and there are pros and cons for each approach.

TypeForm

Typeforms can be embedded in your app using the react-native-typeform-embed wrapper.

It's quick to get started, they're powerful, look good and are fully customisable.

You can also hand them over to your marketing team.

TypeForm also let you use an onSubmit event which fires after a respondent successfully submits the typeform.

import React from "react";
import TypeformEmbed from "react-native-typeform-embed";

class App extends React.Component {
  render() {
    return (
      <TypeformEmbed
        url="https://demo.typeform.com/to/njdbt5"
        onSubmit={() => alert("Submitted!")}
        onClose={() => alert("Closed!")}
      />
    );
  }
}

Or you could hook up responses with Zapier to do some other action (like send an email or send a Slack message).

We used this to ask our users to complete an account deletion exit survey and then we triggered delete based on this form submitting.

The downside is that the Wrapper hasn't been worked on for two years (at time of writing) and is kind of buggy so you'd probably be best to build/fork your own wrapper.

Do it yourself from scratch

You could make your own surveys fully from scratch.

At the simplest level, you could React Native's components such as TextInput or multiple choice icons and build all the logic out yourself, saving the state and adding a submit button.

If you want multiple choice though, you might still want to use a third party library such as @react-native-picker/picker

This is the most flexible option - you can do anything and it will work really well.

But it may be slower to implement than some of the other options.

And you're probably going to be sending your data to your database so you'll need to figure out how to get the data to your marketing team. Or be consigned to receiving Slack requests for data from the marketing team for the rest of your career.

Do it yourself with libraries

Then you have form libraries such as:

• Formik
• React Hook Form

These mean you can move faster but you may lose some flexibility. I think the flexibility trade off is worth it though if you want to make your own forms. I've used Formik in the past and it does a nice job.

Finally, if you want to make a simple poll, you might want to check out React Native Poll. It's a library for making quick polls. But it's not been updated for two years so proceed with caution.

Do it yourself with FormSpark

You could combine one of the DIY options with FormSpark. FormSpark is like a back end for your forms. So you can send your data to FormSpark.

From the FormSpark platform, your marketing/product team will be able to see all the data submitted so you can free yourself from keeping them updated.

import React, { useState } from "react";
import { Alert, Button, Text, TextInput, View } from "react-native";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

function ContactScreen() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onPress = async () => {
    await submit({ message });
    Alert.alert("Form submitted");
  };

  return (
    <View>
      <View>
        <Text>Message</Text>
        <TextInput
          value={message}
          onChangeText={(message) => setMessage(message)}
          multiline={true}
        />
      </View>
      <View>
        <Button title="Send" onPress={onPress} disabled={submitting} />
      </View>
    </View>
  );
}

export default ContactScreen;

And it's easy to integrate with Zapier and Slack so you can setup automated workflows easily.

Use a service like SurveyLoop

Ok shameless plug.

If the above options don't match what you want, we're building SurveyLoop to easily make native surveys in your app - for the best user experience

But with a TypeForm-y experience: templates, drag & drop, analytics.

And you can trigger your surveys based on in-app events such as completing their first action.

And then send your data to Zapier.

It's not out yet but if it sounds interesting, please let us know!

If you like this article, I also host a podcast on developer tools.