In-app surveys for React Native Apps
Tags: reactnative, ios, android, mobile
Published: 2024-01-30 09:12:40


## TypeForm or SurveyMonkey, using webviews
Let's talk about the big 2 first: [Typeform](https://www.typeform.com/) and [SurveyMonkey](https://surveymonkey.com/)

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](https://github.com/react-native-webview/react-native-webview) component. Here’s a basic example of how this can be accomplished:

```tsx
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

- It doesn't integrate smoothly into the user experience. It will always look like a [webview](https://github.com/react-native-webview/react-native-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, **<u>it demands considerable time and technical knowledge</u>**. 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:

- **[Formik](https://formik.org/):** 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.

- **[React Hook Form](https://react-hook-form.com/):** 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.

```tsx
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 
This is promoted, but we fully support this company ⭐️

When you're looking for a easy-to-implement, time-saving 3rd party library: [Qualli](https://usequalli.com?utm_source=dev.to) could be a good fit for you.

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

[Lean more here](https://usequalli.com?utm_source=dev.to)

**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.

```tsx
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>
    );
}
```
![Qualli hero image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0lyhx73vowxymv9gwjt.png)