Add Comment Widgets to Your React Native App
This is the official React Native Library for FastComments.
Embed live commenting, chat, and review widgets in your React Native app.
Repository
Live Showcase 
To see every widget and flow running locally against the public demo tenant, clone the repo and run:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webThe showcase entry point is example/src/ShowcaseApp.tsx — a single app that exposes all widgets, themes, and flows.
The yarn web target uses react-native-web + react-native-web-webview (which renders the WebView as an iframe). Useful for quick visual smoke tests in a browser; native-only WebView APIs like injectJavaScript and onShouldStartLoadWithRequest won't fully behave on web.
Installation
npm install react-native-webview --save
npm install fastcomments-react-native --saveConsider The Native SDK
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.
Usage - The Live Comment Widget
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 myAppPageUrl = 'https://example.com/external-page'; // you can optional set a url to an external page
const myAppPageTitle = 'Example Title'; // ... and you probably want a title for this content
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// 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}/>
);Usage - The Live Chat Widget
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 myAppPageUrl = 'https://example.com/external-page'; // you can optional set a url to an external page
const myAppPageTitle = 'Example Title'; // ... and you probably want a title for this content
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Usage - SSO
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
Peer Dependencies
fastcomments-react-native requires react-native-webview. As such, you should follow the installation steps for react-native-webview.
Account Region (ATTENTION: EU Customers)
If your account is located in the EU, set region = 'eu' in the widget configuration.
Otherwise, you do not have to define region.
Maintenance Status
These components are wrappers around our core VanillaJS components. We can automatically update these components (fix bugs, add features) without publishing this library, so while it may not be published for a while that does not mean FastComments is not under active development! Feel free to check our blog for updates. Breaking API changes or features will never be shipped to the underlying core library without a version bump in this library.
Need Help?
If you encounter any issues or have questions about the React Native Library, please:
Contributing
Contributions are welcome! Please visit the GitHub repository for contribution guidelines.