Documentation

Integrate FeatureDeck into your React Native app in minutes. Collect feature requests, let users vote, view a roadmap, and build what matters.

Requirements

• React Native 0.72 or newer
• React 18+
• Expo supported
• iOS and Android supported

Installation

Install the FeatureDeck React Native SDK using your preferred package manager.

Using npm

npm install @featuredeck/react-native

Using yarn

yarn add @featuredeck/react-native

Using pnpm

pnpm add @featuredeck/react-native

Install Peer Dependency

FeatureDeck uses zustand for internal state management. If your project does not already include it, install it using:

npm install zustand

If your project already uses Zustand, you can skip this step.

Quick Start

Get up and running in 3 simple steps.

1. Initialize the SDK

Initialize FeatureDeck in your app entry point (usually App.tsx). You get your API key from the FeatureDeck dashboard.

import { FeatureDeck } from '@featuredeck/react-native';

// Initialize the SDK
await FeatureDeck.init({
  apiKey: 'your-api-key', // Get this from your FeatureDeck dashboard
});

// Identify the current user
await FeatureDeck.setUser({
  externalUserId: 'user-123',
  username: 'johndoe',
  email: 'john@example.com',
});

2. Wrap Your App with the Provider

Add the FeatureDeckProvider to your app root. This renders the feedback board modal.

import { FeatureDeckProvider } from '@featuredeck/react-native';

export default function App() {
  return (
    <FeatureDeckProvider>
      {/* Your app content */}
    </FeatureDeckProvider>
  );
}

3. Open the Feature Board

Open the feature board from anywhere in your app — a button, menu item, or settings screen.

import { FeatureDeck } from '@featuredeck/react-native';

function SettingsScreen() {
  return (
    <View>
      <TouchableOpacity onPress={() => FeatureDeck.openFeatureBoard()}>
        <Text>Feature Requests</Text>
      </TouchableOpacity>
    </View>
  );
}

What's Included

The SDK opens a full-screen modal with two tabs and built-in functionality:

💡 Features Tab

• Browse all feature requests
• Upvote features with optimistic UI
• Submit new feature requests
• Delete features you created
• Pull-to-refresh & infinite scroll

🗺️ Roadmap Tab

• View planned, in-progress, and completed items
• Grouped by status with clear labels
• Pull-to-refresh for latest updates
• Powered by FeatureDeck branding

User Management

Users must be identified to submit features, vote, and delete their own requests.

Setting the User

Call setUser after authentication. The externalUserId is required — it links the user in your system to FeatureDeck.

// When user logs in
await FeatureDeck.setUser({
  externalUserId: 'user-123',  // Required — your app's user ID
  username: 'johndoe',         // Optional
  email: 'john@example.com',   // Optional
});

// When user logs out
await FeatureDeck.setUser(null);

Customization

Theme Customization

Customize colors to match your app's design. Pass a theme during initialization or update it later.

// Initialize with a custom theme
await FeatureDeck.init({
  apiKey: 'your-api-key',
  theme: {
    colors: {
      primary: '#8B5CF6',
      background: '#FFFFFF',
      text: '#1F2937',
    },
    isDark: false,
  },
});

// Or update theme at runtime
FeatureDeck.setTheme({
  colors: {
    primary: '#10B981',
  },
  isDark: true,
});

// Quick dark/light mode toggles
FeatureDeck.enableDarkMode();
FeatureDeck.enableLightMode();

Theme Utilities

Use built-in helpers to create themes from a single color or merge themes.

import {
  createThemeFromColor,
  mergeTheme,
  lightTheme,
  darkTheme,
} from '@featuredeck/react-native';

// Generate a full theme from a single primary color
const customTheme = createThemeFromColor('#E85D04', false);

// Merge with the default light theme
const merged = mergeTheme(lightTheme, customTheme);

await FeatureDeck.init({
  apiKey: 'your-api-key',
  theme: merged,
});

API Reference

FeatureDeck.init(config)

Initialize the SDK. Must be called before any other method.

FeatureDeck.init(config: FeatureDeckConfig): Promise<void>

interface FeatureDeckConfig {
  apiKey: string;            // Your project API key
  theme?: Partial<Theme>;    // Optional custom theme
}

FeatureDeck.setUser(user)

Identify the current end user. Required for voting, creating, and deleting features.

FeatureDeck.setUser(user: UserInput | null): Promise<void>

interface UserInput {
  externalUserId: string;  // Required — your app's user ID
  username?: string;
  email?: string;
}

FeatureDeck.openFeatureBoard()

Open the feature board modal. Shows the Features and Roadmap tabs.

FeatureDeck.openFeatureBoard(): void

FeatureDeck.close()

Programmatically close the modal.

FeatureDeck.close(): void

FeatureDeck.setTheme(theme)

Update the theme at runtime.

FeatureDeck.setTheme(theme: Partial<Theme>): void
FeatureDeck.enableDarkMode(): void
FeatureDeck.enableLightMode(): void

Utility Methods

FeatureDeck.isReady(): boolean    // Has init() completed?
FeatureDeck.isVisible(): boolean   // Is the modal currently open?
FeatureDeck.getUser(): User | null // Get the current user

Full Example

A complete example wiring everything together in a React Native app.

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {
  FeatureDeck,
  FeatureDeckProvider,
} from '@featuredeck/react-native';

async function bootstrap() {
  await FeatureDeck.init({ apiKey: 'your-api-key' });

  await FeatureDeck.setUser({
    externalUserId: 'user-123',
    username: 'johndoe',
    email: 'john@example.com',
  });
}

export default function App() {
  useEffect(() => {
    bootstrap();
  }, []);

  return (
    <FeatureDeckProvider>
      <View style={styles.container}>
        <Text style={styles.title}>My App</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => FeatureDeck.openFeatureBoard()}
        >
          <Text style={styles.buttonText}>Feature Requests</Text>
        </TouchableOpacity>
      </View>
    </FeatureDeckProvider>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: '700', marginBottom: 24 },
  button: {
    backgroundColor: '#111',
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: 10,
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

Getting Your API Key

To use FeatureDeck, you need an API key:

Sign up and create a project in the FeatureDeck dashboard
Navigate to your project settings
Copy the API key and pass it to FeatureDeck.init()

Need Help?

If you have questions or run into issues, we're here to help:

📧 Email: featuredeck.support@gmail.com
💬 GitHub: https://github.com/Mak-3/featuredeck-react-native
📖 Examples: Check out the example app in the repository