Fasten Connect React Native SDK
A lightweight React Native SDK that embeds the Fasten Connect experience inside any React Native application. The
package wraps the Stitch.js workflow in a pair of coordinated WebViews so you can authenticate with provider portals
and receive connection events without leaving your native app.
Installation
Add the package to your project along with its React Native peer dependency:
npm install @fastenhealth/fasten-stitch-element-react-native react-native-webview
# or
yarn add @fastenhealth/fasten-stitch-element-react-native react-native-webview
react-native-base64 is bundled with the SDK. If you do not already have react-native-webview installed, follow the
official installation guide for your
platform(s).
Usage
import { FastenStitchElement } from 'fasten-connect-stitch-react-native';
const CUSTOMER_PUBLIC_ID = 'public_test_...';
export const ConnectScreen = () => (
<FastenStitchElement
publicId={CUSTOMER_PUBLIC_ID}
email="[email protected]"
brandingTheme="dark"
brandingAccentColor="#E04E3C"
brandingCompanyName="your brand"
brandingLogoUrl="https://your-brand.com/assets/logo.svg"
debugModeEnabled
onEventBus={(event) => {
console.log('Fasten event', event);
}}
/>
);
FastenStitchElement renders to fill the available space, so wrap it in a container that matches how you want it to appear in
your layout (e.g., a View with flex: 1).
Props
The component accepts the following options (matching the Stitch.js widget configuration):
publicId(required) – Your Fasten Connect public identifier.externalId– Identifier you want to associate with the patient/session.email– Email address used to prepopulate supported Fasten Connect forms.reconnectOrgConnectionId– Reconnect a previously established patient connection.searchOnly,searchQuery,searchSortBy,searchSortByOpts,showSplash– Configure the provider search experience.brandId,portalId,endpointId– Restrict the experience to a specific brand/portal/endpoint.brandingTheme,brandingAccentColor,brandingCompanyName,brandingLogoUrl– Customize the embedded experience. These optional strings map to thebranding-theme,branding-accent-color,branding-company-name, andbranding-logo-urlquery parameters, respectively.tefcaMode- Enable TEFCA flowseventTypes– Comma-delimited list of event types to receive.debugModeEnabled– Surfaces debugging tools in the embedded web views.onEventBus– Callback invoked with parsed payloads sent from Fasten Connect (e.g., when a connection is created).
Refer to FastenConnectOptions in src/FastenStitchElement.tsx for the complete, documented type definition.
Building the SDK locally
Transpile TypeScript to the distributable dist/ folder:
npm run build
Feedback
Please open an issue with any bugs or requests. Your feedback will help us stabilize the public SDK interface.