DEV Community

Cover image for Surveys for React Native
Nick Smet
Nick Smet

Posted on

Surveys for React Native

Image description

As developers, we understand the impact of user feedback in refining our apps. It's not just about fixing bugs; it's about understanding user needs and enhancing their experience. In-app feedback is a crucial piece of this puzzle.

But who here likes building forms, say "I"... *even the crickets are silent

Image description

That's what I thought, no one really. Why isn't there a Typeform alternative for mobile apps, designed and created for mobile usage?

That's why I created Qualli. This project started to scratch my own itch, but now I'm building it publicly.

Qualli enables you to easily send out surveys to your users.

Why In-App Feedback Matters

  • Real-Time Insights: Capture user sentiments and issues as they happen.
  • Enhanced Engagement: Direct interaction within the app increases user engagement.
  • Data-Driven Decisions: Make improvements based on actual user feedback, not assumptions.

Integrating Qualli in React Native

Here's a quick walkthrough of setting up Qualli in your React Native project.

Installation

Add Qualli RN SDK:

Use yarn to add the SDK to your project.

yarn add @qualli/qualli-rn-sdk
Enter fullscreen mode Exit fullscreen mode

Install Dependencies:
Qualli relies on @react-native-async-storage/async-storage and react-native-device-info.

For bare RN installation:

yarn add @react-native-async-storage/async-storage react-native-device-info
Enter fullscreen mode Exit fullscreen mode

Post-Installation:
For iOS, don't forget to run:

npx pod install
Enter fullscreen mode Exit fullscreen mode

If using Expo:

npx expo install @react-native-async-storage/async-storage react-native-device-info
Enter fullscreen mode Exit fullscreen mode

Usage

Adding the Provider:
Wrap your main component with QualliProvider.

import { QualliProvider } from '@qualli/qualli-rn-sdk';

function App() {
    return (
        <QualliProvider apiKey="YOUR_API_KEY_HERE">
            {/* Your components */}
        </QualliProvider>
    );
}
Enter fullscreen mode Exit fullscreen mode

Setting Up Triggers:
Use the performTrigger function to invoke specific user actions.

const qualli = useQualli();
qualli.performTrigger('TRIGGER_NAME');
Enter fullscreen mode Exit fullscreen mode

Setting Custom Attributes:
Store custom attributes at the user level.

const qualli = useQualli();
qualli.setAttributes({
    email: 'example@email.com',
    first_name: 'John',
    last_name: 'Doe',
    custom_attribute: 'value',
});
Enter fullscreen mode Exit fullscreen mode

The SDK is fully open source and can be found here

In-app feedback is more than a feature; it's a bridge connecting developers with users.

Top comments (0)