Skip to main content
This documentation is for Stitch.js (v4) SDK, which is now the recommended version for integrating Fasten Connect into your application. If you need access to the previous versions, please see v1 documentation or v3 documentation.This version includes compatibility with additional runtime environments (Web, React Native, React etc), improved performance, and additional features.v4 is backwards compatible with v3 — there are no breaking changes to the public API, but we have made significant improvements to the underlying codebase and architecture. If you are currently using v3, you can upgrade to v4 without making any changes to your code.The v1 Web Component and v3 Web Component are in maintenance mode and will no longer receive updates (outside of security fixes). Please update your code to use the new version.
The React Native SDK implements an experience similar to the <fasten-stitch-element> component, but designed specifically for React Native. You can provide a familiar mobile flow without maintaining a web surface. It forwards the same event payloads that the Web Component emits.

​
Installation

# npm
npm install @fastenhealth/fasten-stitch-element-react-native react-native-webview

# yarn
yarn add @fastenhealth/fasten-stitch-element-react-native react-native-webview
If you are using bare React Native, run npx pod-install so iOS picks up the native dependencies. Expo Managed apps only need to rebuild if you add the optional native module for secure storage.

​
Basic usage

Wrap your application (or the portion that should be able to trigger Stitch) with the provider that ships in the SDK. The provider accepts the standard Stitch configuration values and wires up a shared modal instance you can control from anywhere in your tree. 
import { FastenStitchElement } from 'fasten-connect-stitch-react-native';

const CUSTOMER_PUBLIC_ID = 'public_test_...';

export const ConnectScreen = () => (
  <FastenStitchElement
    publicId={CUSTOMER_PUBLIC_ID}
    debugModeEnabled
    onEventBus={(event) => {
      console.log('Fasten event', event);
    }}
  />
);
The hook returns an object with helpers for presenting/dismissing the modal and exposes the latest isVisible state so you can toggle secondary UI (disabling buttons, showing spinners, etc.).

​
Basic usage (TEFCA Mode)

If you would like to enable TEFCA IAS mode, you can do so by setting the tefcaMode="true" configuration option. The remaining installation steps are the same as above, just with the additional attribute. This is intentionally designed to be as simple as possible to get started with TEFCA IAS. 
import { FastenStitchElement } from 'fasten-connect-stitch-react-native';

const CUSTOMER_PUBLIC_ID = 'public_test_...';

export const ConnectScreen = () => (
  <FastenStitchElement
    publicId={CUSTOMER_PUBLIC_ID}
    tefcaMode={true}
    onEventBus={(event) => {
      console.log('Fasten event', event);
    }}
  />
);