FastComments React Native Wrapper

npm install react-native-webview@13.6.4 --save
npm install fastcomments-react-native --save

Note: As of July 2024 it seems react-native-webview has a bug, so it's best to pin to 13.6.4 - don't use ^ to get the latest patch version.

This library uses a webview around the VanillaJS library.

FastComments now supports a completely native implementation of our client as part of fastcomments-react-native-sdk. If you want a completely native implementation you may want to look there.

The API is slightly different compared to fastcomments-react. With native, we pass a config object which follows this structure.

import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
  const myTenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
  const myAppPageId = 'native-test'; // the ID or URL of the comment thread in your app.
  const [config, setConfig] = useState({
    tenantId: myTenantId,
    urlId: myAppPageId
  });
  // by calling setConfig(), we can do things like change the current page, or the currently logged in user
  // See example/src/App.tsx
  return (
      <FastCommentsCommentWidget config={config}/>
  );

import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
  const myTenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
  const myAppPageId = 'native-test'; // the ID or URL of the comment thread in your app.
  const config = {
    tenantId: myTenantId,
    urlId: myAppPageId
  };
  return (
      <FastCommentsLiveChatWidget config={config}/>
  );

FastComments uses HMAC for Secure SSO. To use, have your backend create the SSO object (sso config property) and pass it to the comment widget.

You can find examples for various backends, here: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso

fastcomments-react-native requires react-native-webview. As such, you should follow the installation steps for react-native-webview.

If your account is located in the EU, set region = 'eu' in the widget configuration. Otherwise, you do not have to define region.

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT