@flexpa/link-react-native/README.md

React Native SDK for integrating FlexpaLink into mobile applications

# @flexpa/link-react-native

React Native SDK for integrating FlexpaLink into mobile applications.

## Installation

```bash
npm install @flexpa/link-react-native
```

or

```bash
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:

```bash
npm install react-native-webview
```

## Usage

```tsx
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:

```tsx
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](https://github.com/flexpa/flexpa/actions/workflows/link-react-native-npm-registry.yml) 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