Supported Platforms

Installation

Install the Reflekt SDK:

npm install @reflekt/react-native

npm install @react-native-async-storage/async-storage react-native-gesture-handler react-native-reanimated react-native-svg

module.exports = {
  plugins: ['react-native-reanimated/plugin'],
};

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

Quick Start

So easy you don't even need to make Claude do it.

Wrap your app with ReflektProvider inside your GestureHandlerRootView:

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { ReflektProvider } from '@reflekt/react-native';

export default function App() {
  return (
    <GestureHandlerRootView>
      <ReflektProvider
        config={{ 
          apiKey: process.env.EXPO_PUBLIC_REFLEKT_API_KEY,
          respondentId: user.id 
        }}
      >
        <YourApp />
      </ReflektProvider>
    </GestureHandlerRootView>
  );
}

Provider Placement

Surveys automatically appear as popups when they become available at the level of the ReflektProvider. This means:

• The provider should be placed after authentication, so you have access to a unique identifier for the user
• All screens wrapped by the provider can receive survey popups
• Surveys trigger automatically when published

Coming soon: More precise targeting options to control exactly when and where surveys appear.

Configuration

The ReflektProvider accepts a config object with the following properties:

You can find your API key in the dashboard under Project Settings → API Keys.

Hooks

useReflekt

Access the SDK state within your components:

import { useReflekt } from '@reflekt/react-native';

function MyComponent() {
  const { isReady } = useReflekt();

  if (!isReady) {
    return <LoadingSpinner />;
  }

  return <YourContent />;
}

Advanced Usage

import { ReflektSDK } from '@reflekt/react-native';

// Check if SDK is initialized
if (ReflektSDK.isInitialized()) {
  const sdk = ReflektSDK.getInstance();
  
  // Get available surveys
  const surveys = await sdk.getAvailableSurveys();
  
  // Reload surveys from the server
  await sdk.reloadAvailableSurveys();
  
  // Get the current theme
  const theme = sdk.getTheme();
}

// Reset the SDK (e.g., on user logout)
ReflektSDK.reset();

async function handleLogout() {
  ReflektSDK.reset();
  // ... rest of your logout logic
}

Theming

Surveys automatically inherit your project's theme from the Reflekt dashboard. The theme includes:

• Colors: Background, text, primary accent, and more
• Border Radius: Customizable corners for sheets, buttons, inputs

Question Types

The SDK supports the following question types:

• Free Text: Open-ended text responses
• Single Select: Radio button selection
• Multi Select: Checkbox selection
• Rating: Star, number, or emoji scales (3-10 range)
• Message: Informational screens (no response required)

Requirements

• React Native >= 0.64.0
• React >= 17.0.0
• iOS 12.0+ / Android API 21+

Rate Limits

The default rate limit is 1,000 responses per hour per API key.

If you need higher limits, send me an email and we'll work something out.

Exporting Data

Export your survey responses from the dashboard in CSV format. Here's how to import the data into your preferred spreadsheet app:

Troubleshooting

Surveys not appearing

1. 1Ensure your API key is correct
2. 2Check that you have active surveys in your Reflekt dashboard
3. 3Enable debug: true to see detailed logs
4. 4Verify the respondentId hasn't already completed the survey