What's New in React Native SDK 1.1

React Native SDK 1.1's changelog lists community files and a new sort. The tag holds more than that: the two screens React Native SDK 1.0 left you to build, the views in eleven languages, and a mailing-list opt-in. Paired with JavaScript SDK 1.1, it also fixes the vote counts that 1.0 could not read. This post lists all of it, starting with how to install it, because that is not npm install.

Installing 1.1

npm holds 1.0.0 and 1.0.1 of feedbackkit-react-native and feedbackkit-js, so npm install still gives you 1.0.1. Version 1.1 lives in the tags of the two GitHub repositories, and it needs both:

• React Native SDK 1.1 imports FeedbackSort from the JavaScript SDK. JavaScript SDK 1.0.1 has no such export, so with the npm version the list fails as soon as it loads.
• The JavaScript SDK's 1.1.0 tag contains source and no build, and it has no prepare script, so installing it straight from GitHub gives a package with nothing to import. Build it yourself.
• The React Native SDK's 1.1.0 tag also has no build, but its package.json points Metro at the TypeScript source through the react-native field, so Metro bundles it from GitHub as it is.

Build and pack the JavaScript SDK from its tag:

git clone --branch 1.1.0 https://github.com/Swiftly-Developed/SwiftlyFeedbackKit-Javascript-SDK.git
cd SwiftlyFeedbackKit-Javascript-SDK
npm install
npm run build
npm pack

Then, in your app, install that tarball with the React Native SDK's tag:

npm install ../SwiftlyFeedbackKit-Javascript-SDK/feedbackkit-js-1.1.0.tgz \
  "github:Swiftly-Developed/SwiftlyFeedbackKit-React-SDK#1.1.0" \
  @react-native-async-storage/async-storage

If you would rather stay on the registry, 1.0.1 keeps working, and the React Native SDK 1.0 tutorial covers it.

The short version

• New: SubmitFeedbackView, a complete form with validation and a mailing-list opt-in.
• New: FeedbackDetailView, one request with its vote button and comments.
• New: a sort picker on FeedbackList, by votes, newest, oldest or comments.
• New: the views in eleven languages, chosen from the device, with overrides.
• Fixed with JavaScript SDK 1.1: vote counts, voted state and comment counts come through.

Vote counts that show

In 1.0, the API's snake-case field names reached your code unchanged, so voteCount, hasVoted and commentCount were undefined. JavaScript SDK 1.1 renames every response field to camel case and every request field to snake case on the way out. With it, the built-in VoteButton shows its count, switches to the voted look, and a second tap removes the vote. Cards show their comment count. If you built the field helper from the 1.0 tutorial, it keeps working and you can drop it when convenient.

A ready-made submit form

SubmitFeedbackView is the form 1.0 asked you to write: category pills for Feature Request, Bug Report, Improvement and Other, a title, a description and an optional email. Submitting with an empty title or description outlines the field in red with a message under it. While the request is in flight the button shows a spinner, and a failure appears above the buttons.

import { SubmitFeedbackView, FeedbackCategory } from 'feedbackkit-react-native';

export function SuggestIdeaScreen({ navigation }) {
  return (
    <SubmitFeedbackView
      initialCategory={FeedbackCategory.FeatureRequest}
      onSubmit={(created) => navigation.replace('Idea', { id: created.id })}
      onCancel={() => navigation.goBack()}
    />
  );
}

onSubmit receives the created request. A Cancel button appears when you pass onCancel. The form does not navigate on its own, so the two callbacks decide where the user goes.

Once someone types an email, a checkbox appears: "Keep me updated via email newsletter". Ticking it reveals two more, for operational and marketing emails, both ticked by default. The consent goes to the email tool connected to your project.

A ready-made detail screen

FeedbackDetailView takes a Feedback and shows its status and category badges, a vote button, the title, the description, when it was submitted ("Submitted 3d ago"), and the comments with a field and a Send button. Comments from your team carry a Team badge. Pair it with useFeedback to load the request by id:

import { ActivityIndicator } from 'react-native';
import { FeedbackDetailView, useFeedback } from 'feedbackkit-react-native';

export function IdeaScreen({ route }) {
  const { feedback } = useFeedback(route.params.id);
  if (!feedback) return <ActivityIndicator />;
  return <FeedbackDetailView feedback={feedback} />;
}

Watch for: each comment's author line is the commenter's user id, with "Anonymous" when it is empty. If you pass email addresses or readable account names as user ids, everyone reading the comments sees them. Use an opaque id, such as a database key or a generated string.

Sorting

FeedbackList now shows a row of sort chips above the cards: Most Votes, Newest, Oldest and Most Comments. It appears once the list has requests and starts on votes. sortBy sets the starting order and showSortPicker={false} hides the row. The sort is done by the server, and useFeedbackList takes the same value:

import { FeedbackList, FeedbackSort, FeedbackStatus } from 'feedbackkit-react-native';

<FeedbackList
  filterByStatus={FeedbackStatus.Approved}
  sortBy={FeedbackSort.Newest}
  onFeedbackPress={(feedback) => navigation.navigate('Idea', { id: feedback.id })}
/>

Eleven languages

Every label in the views is translated into English, Spanish, French, German, Japanese, Simplified Chinese, Brazilian Portuguese, Korean, Italian, Arabic and Russian, including the status and category names on the badges. The SDK reads the device's language when it loads, from SettingsManager on iOS and I18nManager on Android, and falls back to English. To choose, pass props to the provider:

<FeedbackProvider
  apiKey={FEEDBACK_API_KEY}
  locale="de"
  translations={{ 'feedback.submit.button': 'Idee senden' }}
>

translations replaces single strings by key, in every language. The functions behind both props are exported as well: setLocale, getLocale, setOverrideStrings, registerTranslations for a language of your own, t for a lookup, and en, the English table, which lists every key. One detail: the language is a module-level value, and changing it does not re-render anything. The provider applies its locale after the views' opening render, so for a fixed language, call setLocale('de') at startup, before your root component renders.

Mailing-list consent in the hooks

The same opt-in the form shows is available to your own screens. submit from useSubmitFeedback, and the options of vote from useVote, take subscribeToMailingList and mailingListEmailTypes:

await vote(feedback.id, {
  email: account.email,
  notifyStatusChange: true,
  subscribeToMailingList: true,
  mailingListEmailTypes: ['operational']
});

Both are sent with an email and dropped without one. Leave out the types and the server records both. The server passes the address, tagged with the types, to the project's email campaign tool (Mailchimp, Kit, Beehiiv or MailerLite), or to HubSpot or Salesforce, when one is connected. Integrations need Pro or Team.

Smaller changes

• JavaScript SDK 1.1 moves the default server address to api.prod.getfeedbackkit.com. It is still the production server, so apps that never set baseUrl change nothing.
• Feedback gains isHiddenOverLimit. On the Free plan, a project's eleventh request is saved and submit resolves, with this flag set to true. The person who filed it still sees it in the list, and everyone else does not.
• The repository gained a changelog, contributing and security notes, and a code of conduct.

How FeedbackKit fits in

A request filed through the new form lands in your project, and your team gets a push notification. In the admin apps and the web dashboard, your team reads it, merges duplicates, replies in the comments, and moves it through Approved, In Progress and TestFlight to Completed, while the person who filed it can follow along by email. Here is how filing looks in FeedbackKit, with sample data from a fictional hiking app:

Upgrading from 1.0

• Install both 1.1 packages as shown above. Upgrading the React Native SDK alone breaks the list.
• Replace a hand-written form with SubmitFeedbackView and a hand-written detail screen with FeedbackDetailView, if you like. The hooks are unchanged.
• Check what you pass as userId before adopting FeedbackDetailView, since it displays it.
• If you hid the vote count or wrote your own vote control because of 1.0's missing counts, the built-in VoteButton now works.
• As in 1.0, the package ships no type declarations. The paths entry from the 1.0 tutorial still applies.

A later 1.1.1 tag changes the version number and nothing else. The reference is in the React Native SDK docs, and the JavaScript side of this release is in What's New in JavaScript SDK 1.1. If you are starting today, use the current React Native tutorial.

Every plan includes the React Native SDK. Start free and add the board to your app.