SDK UI Component

Add a full feature request UI to your app with FeatureRequestsScreen or FeaturamaView.

Basic usage

import { FeatureRequestsScreen } from '@featurama/react-native';
import { useColorScheme } from 'react-native';

function FeedbackScreen({ onClose }: { onClose: () => void }) {
  const colorScheme = useColorScheme() ?? 'light';

  return (
    <FeatureRequestsScreen
      colorScheme={colorScheme}
      accentColor="#6366f1"
      onClose={onClose}
    />
  );
}

Props

React Native — FeatureRequestsScreen

Prop	Type	Required	Description
`colorScheme`	`'light' \| 'dark'`	Yes	Controls light/dark theme
`accentColor`	`string`	Yes	Hex color for buttons, votes, active states
`onClose`	`() => void`	No	Called when user taps the close button
`safeAreaTop`	`number`	No	Top safe area inset (for full-screen modals)
`theme`	`Partial<FeaturamaTheme>`	No	Override individual theme colors

Swift — FeaturamaView

Parameter	Type	Required	Description
`accentColor`	`Color`	Yes	Accent color for buttons, votes, active states
`colorScheme`	`ColorScheme?`	No	Force light/dark (defaults to system)
`theme`	`FeaturamaThemeOverrides?`	No	Override individual theme colors
`onClose`	`(() -> Void)?`	No	Called when user taps the close button
`strings`	`FeaturamaStrings?`	No	Custom localization strings

Theming

The theme is auto-generated from colorScheme and accentColor. Override any key with the theme prop:

<FeatureRequestsScreen
  colorScheme="dark"
  accentColor="#4cb211"
  theme={{
    background: '#1a1a2e',
    card: '#16213e',
  }}
/>

Available theme keys:

Key	Description
`background`	Page background
`card`	Card/item background
`secondary`	Secondary background
`text`	Primary text color
`textSecondary`	Secondary/muted text
`accent`	Accent color (buttons, links)
`accentLight`	Light accent variant
`accentForeground`	Text on accent background
`border`	Default border color
`borderAccent`	Accent border color
`gray100`	Neutral gray
`warning`	Warning accent (pending review)
`warningLight`	Warning background
`warningText`	Warning text

Localization

Both SDKs support localization, but the approach differs by platform.

React Native: Language is auto-detected from the device locale. No configuration needed. Supported: English, German, French, Spanish, Portuguese, Italian, Dutch, Polish, Japanese, Korean, Chinese. Detection order: expo-localization > react-native-localize > NativeModules > English fallback.

Swift: Pass custom strings for full localization:

let strings = FeaturamaStrings(
    featureRequests: "Funktionswünsche",
    newRequest: "Neuer Wunsch",
    vote: "Stimme"
    // ... see FeaturamaStrings for all keys
)

FeaturamaView(accentColor: .blue, strings: strings)

Features included

Filter tabs — New, Planned, In Progress, Done
Create form — Title, description, optional email (respects project's email collection setting)
Vote toggle — Tap to vote, tap again to remove vote
Detail view — Full request details with comment thread
Comments — View, add, and vote on comments
Pending badge — Shows "Pending Review" for unapproved submissions
Branding — "Powered by Featurama" footer (controlled in Dashboard Settings)
Developer badge — Comments from developers show a "Developer" label

// app/feedback.tsx
import { FeatureRequestsScreen } from '@featurama/react-native';
import { useRouter } from 'expo-router';
import { useColorScheme } from 'react-native';

export default function FeedbackModal() {
  const router = useRouter();
  const colorScheme = useColorScheme() ?? 'light';

  return (
    <FeatureRequestsScreen
      colorScheme={colorScheme}
      accentColor="#6366f1"
      onClose={() => router.back()}
    />
  );
}

SDK Setup

Approval & Review