@flexpa/link-react-native

React Native SDK for integrating FlexpaLink into mobile applications.

Installation

npm install @flexpa/link-react-native

or

yarn add @flexpa/link-react-native

Prerequisites

This package requires the following peer dependencies:

• react-native-webview (>= 11.0.0)

The following dependencies are included automatically:

• expo-linking
• expo-web-browser

Install the peer dependency with:

npm install react-native-webview

Usage

import React from 'react';
import { FlexpaLink } from '@flexpa/link-react-native';

export default function App() {
  const publishableKey = 'pk_test_your_key_here';
  const userId = 'user_123';
  const redirectUri = 'https://your-app.com/callback';

  return (
    <FlexpaLink
      publishableKey={publishableKey}
      userExternalId={userId}
      redirectUri={redirectUri}
      containerStyle={{ flex: 1, backgroundColor: '#0003' }}
      onSuccess={(publicToken) => {
        console.log('Success! Public token:', publicToken);
        // Handle successful authentication
      }}
      onExit={(error) => {
        console.log('Exit! Error:', error);
        // Handle user exit or errors
      }}
      webViewStyle={{ borderRadius: 20 }}
    />
  );
}

Props

Required Props

| Prop | Type | Description | |------|------|-------------| | publishableKey | string | Your Flexpa publishable key | | userExternalId | string | Unique identifier for your user | | redirectUri | string | URI to redirect to after authentication | | onSuccess | (token: string) => void | Callback fired when authentication succeeds |

Optional Props

| Prop | Type | Description | |------|------|-------------| | onExit | (error?: unknown) => void | Callback fired when user exits or error occurs | | containerStyle | ViewStyle | Style for the container View | | webViewStyle | ViewStyle | Style for the WebView component | | webViewProps | Partial<WebViewProps> | Additional props to pass to WebView |

TypeScript

This package includes TypeScript definitions. Import the types:

import { FlexpaLink, FlexpaLinkProps } from '@flexpa/link-react-native';

Deep Linking

The component automatically handles deep linking for OAuth flows. Make sure your app is configured to handle the redirectUri you provide.

Example

See the example/ directory for a complete implementation example.

Publishing to NPM

• Run yarn workspace @flexpa/link-react-native version patch | minor | major to update the package's version.
• Open a PR to merge the version changes into the master branch.
• Once merged, run the Publish @flexpa/link-react-native github workflow to publish the new version to NPM.
• The NPM package will be available at https://www.npmjs.com/package/@flexpa/link-react-native

FAQ

| Topic | Answer | Comments | | ----------- | -------------- | ------------ | | Runtime | React Native | | | Build | Through yarn | yarn build |

License

MIT