TypeForm or SurveyMonkey, using webviews

Let's talk about the big 2 first: Typeform and SurveyMonkey

When you already use one of these 2 big players, you might consider also using it in your app. But both don't have react native support, so the only way to do this is using Webviews.

Why Consider WebViews?

• Simplicity: Leveraging WebView for embedding external surveys bypasses the need for a complex native integration or API interfacing, making it a straightforward approach.

• Feature-rich Platforms: Both Typeform and SurveyMonkey are known for their user-friendly design interfaces and powerful analytics, enabling developers to create engaging surveys without reinventing the wheel.

• Consistency Across Platforms: Using WebView ensures your surveys appear and function consistently across different devices, preserving the intended user experience.

How to Implement

Embedding Typeform or SurveyMonkey surveys in your React Native app involves encapsulating the survey URL within a WebView component.

Here’s a basic example of how this can be accomplished:

import React from "react";
import { WebView } from "react-native-webview";

const SurveyView = () => {
  return (
    <WebView
      source={{ uri: "https://your.typeform.com/to/example" }}
      style={{ marginTop: 20 }}
    />
  );
};

export default SurveyView;

Replace "https://your.typeform.com/to/example" with the actual URL of your Typeform or SurveyMonkey survey. This simple integration allows you to harness the robust survey creation and management capabilities of these platforms directly within your app.

The downsides of using webviews

• It doesn't integrate smoothly into the user experience.

• It will always look like a webview.

• Heavily dependent on you, the developer. A new survey has to be coded in manually

Building it yourself

Maybe you want to build your own surveys, for maximum flexibility.

There are 2 main approaches on doing this:

1. Using React Native components

2. Using libraries

   
   

Using React Native components

1. Designing the User Interface: Utilize React Native's rich set of components to design your surveys. For textual feedback, TextInput is invaluable, whereas multiple-choice queries can leverage custom-designed icons or toggle buttons for a more interactive experience.

2. Handling State and Logic: Managing user responses requires careful state management within your component. Incorporate state hooks like useState to track user input and useEffect for actions upon form submission.

3. Data Storage and Retrieval: Decide on how and where to store the collected data. Firebase, MongoDB, or your proprietary backend can serve as robust data repositories. Ensure you establish secure and efficient communication between your app and the database.

While building from scratch offers maximum control, it demands considerable time and technical knowledge. For developers seeking speed without compromising on personalization, fitting form libraries into your architecture can be an advantageous middle ground.

Using libraries

Several React Native-compatible libraries provide a rich foundation for quickly building flexible and functional forms, without starting from zero. Two notable examples include:

1. Formik: Praised for its simplicity and comprehensiveness, Formik facilitates form construction with minimal boilerplate. It's built around the premise of making forms first-class citizens in React Native, handling form state, validation, and submission seamlessly.

2. React Hook Form: This library emphasizes performance and minimal re-renders. Utilizing React hooks, it simplifies form management, offering an efficient way to build scalable forms with built-in validation powered by the Yup schema.

Formick example code

import { useFormik } from 'formik';

function CustomSurvey() {
  const formik = useFormik({
    initialValues: { feedback: '' },
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <View>
      <TextInput
        onChangeText={formik.handleChange('feedback')}
        value={formik.values.feedback}
      />
      <Button onPress={formik.handleSubmit} title="Submit" />
    </View>
  );
}

Using a service like Qualli

When you're looking for a easy-to-implement, time-saving 3rd party library: Qualli could be a good fit for you.

Qualli is capable for in-app surveys, straight into your user experience

Benefits:

• 👨‍💻 React Native SDK (created by and for RN developers)

• 🎨 Typeform like survey builder

• ⏳Little to none dev-time required after implementation

• 😌 Non-tech user friendly: Hand it off to your marketing or UX team

• 📈 Send your data to Zapier

• 🖥️📱Its cross platform (works on web too!)

Below you can see a code example of the Qualli RN SDK.

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { QualliProvider, useQualli } from '@qualli/qualli-rn-sdk';

const Home = () => {
    const qualli = useQualli();

    return (
        <View>
            <TouchableOpacity
                onPress={() => {
                    // Give your users unique attributes to later be used in your audience filter
                    qualli.setAttributes({
                        plan: 'trial',
                        email: 'john@doe.com',
                        first_name: 'John',
                        last_name: 'Doe',
                    });
                }}
            >
                <Text>{'Update User Attributes'}</Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => qualli.performTrigger('cart_abandoned')}
                style={{ marginTop: 20 }}
            >
                <Text>{'Trigger cart abandoned'}</Text>
            </TouchableOpacity>
        </View>
    );
};

export default function App() {
    return (
        <QualliProvider apiKey="YOUR_API_KEY_HERE">
            <Home />
        </QualliProvider>
    );
}

Want to learn more?

• Discover our Mobile app surveys

• Discover our Web surveys

• Try out our demo