@fformkit/react-native

Official React Native & Expo SDK for FFormkit — drop-in feedback forms for your mobile app.

Installation

npm install @fformkit/react-native
# or
yarn add @fformkit/react-native
# or
pnpm add @fformkit/react-native

Usage

Expo

No extra setup needed. expo-image-picker is already part of Expo and image attachment works out of the box.

import { FFormkit } from '@fformkit/react-native'

export default function FeedbackScreen() {
  return (
    <FFormkit
      apiKey="your-api-key"
      onSubmit={(id) => console.log('Submitted:', id)}
    />
  )
}

Bare React Native

Image attachment requires passing your own onPickImage function. Install any image picker you like and wire it up:

npm install react-native-image-picker
cd ios && pod install

import { FFormkit } from '@fformkit/react-native'
import { launchImageLibrary } from 'react-native-image-picker'

export default function FeedbackScreen() {
  return (
    <FFormkit
      apiKey="your-api-key"
      onPickImage={() =>
        new Promise((resolve) => {
          launchImageLibrary({ mediaType: 'photo', includeBase64: true, quality: 0.4 }, (response) => {
            const base64 = response.assets?.[0]?.base64
            resolve(base64 ? `data:image/jpeg;base64,${base64}` : null)
          })
        })
      }
      onSubmit={(id) => console.log('Submitted:', id)}
    />
  )
}

You can use any image picker you already have in your project — react-native-image-picker, react-native-vision-camera, or anything else. Just return a base64 data URI string or null.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Your FFormkit project API key | | onPickImage | () => Promise<string \| null> | No | Bare RN only: provide your own image picker. Return a base64 data URI or null | | onSubmit | (id: string) => void | No | Called with the submission ID on success | | onError | (err: Error) => void | No | Called when an error occurs | | style | ViewStyle | No | Custom style for the container | | placeholderTextColor | string | No | Override placeholder text color | | screenshotLabel | string | No | Custom label for the screenshot button | | screenshotIcon | string | No | Custom icon for the screenshot button | | successText | string | No | Custom success message text | | successColor | string | No | Custom success message color |

Peer dependencies

| Package | Version | Required | |---------|---------|----------| | react | >=18 | Yes | | react-native | >=0.73 | Yes |

Form configuration

The form's appearance and fields (title, colors, rating, email, screenshot toggle, etc.) are configured from the FFormkit dashboard — no code changes needed.

License

MIT