### Start Example App Packager

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Commands to start the development packager for the example application. This allows for live reloading of changes in the example app.

```shell
yarn example start
```

```shell
yarn expo-example start
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Commands to build and run the example application on an iOS simulator or device. Requires running 'bundle install' in the 'example/ios' directory first.

```shell
yarn example ios
```

```shell
yarn expo-example ios
```

--------------------------------

### Start Metro Server (npm/Yarn)

Source: https://github.com/contentpass/react-native-contentpass/blob/main/example/README.md

Starts the Metro bundler, which is essential for running React Native applications. This command should be executed from the root of the React Native project.

```bash
# using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install CocoaPods

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Command to install CocoaPods, a dependency manager for Swift and Objective-C projects. This is a prerequisite for running iOS example applications.

```shell
sudo gem install cocoapods
```

--------------------------------

### Run Example App on Android

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Commands to build and run the example application on an Android device or emulator. This is used to test changes made to the library.

```shell
yarn example android
```

```shell
yarn expo-example android
```

--------------------------------

### Install @contentpass/react-native-contentpass and Dependencies

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Installs the main Contentpass React Native SDK package along with its required peer dependencies, react-native-app-auth and react-native-encrypted-storage. This setup is necessary before integrating the SDK into your application.

```bash
# Install the main package
npm install @contentpass/react-native-contentpass

# Or using Yarn
yarn add @contentpass/react-native-contentpass

# Required peer dependencies
npm install react-native-app-auth react-native-encrypted-storage
```

--------------------------------

### Run Application on iOS (npm/Yarn)

Source: https://github.com/contentpass/react-native-contentpass/blob/main/example/README.md

Builds and runs the React Native application on an iOS simulator or device. The Metro server must be running concurrently.

```bash
# using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Command to install all required project dependencies using Yarn workspaces. This command should be run in the root directory of the project.

```shell
yarn
```

--------------------------------

### Install @contentpass/react-native-contentpass using npm or Yarn

Source: https://github.com/contentpass/react-native-contentpass/blob/main/README.md

Installs the Contentpass React Native SDK package. Ensure you have Node.js and npm or Yarn installed.

```sh
npm install @contentpass/react-native-contentpass
```

```sh
yarn add @contentpass/react-native-contentpass
```

--------------------------------

### Run Application on Android (npm/Yarn)

Source: https://github.com/contentpass/react-native-contentpass/blob/main/example/README.md

Builds and runs the React Native application on an Android device or emulator. Ensure the Metro server is running in a separate terminal.

```bash
# using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Sourcepoint CMP Integration for Contentpass Authentication

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Shows how to integrate the Contentpass SDK with Sourcepoint CMP for consent management. This example configures Sourcepoint to receive subscription status via targeting parameters and handles custom actions within the consent dialog, such as initiating Contentpass authentication.

```tsx
import { useEffect, useRef, useState } from 'react';
import { SPConsentManager } from '@sourcepoint/react-native-cmp';
import {
  useContentpassSdk,
  ContentpassState,
  ContentpassStateType,
} from '@contentpass/react-native-contentpass';

const sourcePointConfig = {
  accountId: 12345,
  propertyId: 67890,
  propertyName: 'your-property.com',
};

const AppWithSourcepoint = () => {
  const [authResult, setAuthResult] = useState<ContentpassState>();
  const contentpassSdk = useContentpassSdk();
  const spConsentManager = useRef<SPConsentManager | null>(null);

  // Listen to Contentpass state changes
  useEffect(() => {
    const observer = (state: ContentpassState) => setAuthResult(state);
    contentpassSdk.registerObserver(observer);
    return () => contentpassSdk.unregisterObserver(observer);
  }, [contentpassSdk]);

  // Initialize Sourcepoint after auth state is known
  useEffect(() => {
    if (!authResult || authResult.state === ContentpassStateType.INITIALISING) {
      return;
    }

    const { accountId, propertyName, propertyId } = sourcePointConfig;
    const manager = new SPConsentManager();

    manager.build(accountId, propertyId, propertyName, {
      gdpr: {
        targetingParams: {
          // Pass subscription status to Sourcepoint
          acps: authResult.hasValidSubscription ? 'true' : 'false',
        },
      },
    });

    // Handle custom "Login with Contentpass" button in consent dialog
    manager.onAction((action) => {
      if (action.customActionId === "cp('login')") {
        contentpassSdk.authenticate().catch(console.error);
      }
    });

    manager.loadMessage();
    spConsentManager.current = manager;

    return () => {
      manager.dispose();
    };
  }, [authResult, contentpassSdk]);

  return <YourAppContent />;
};

```

--------------------------------

### Contentpass State Handling with TypeScript Types

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Demonstrates how to use exported TypeScript types from the Contentpass SDK for type-safe handling of authentication states. Includes type guard functions and an example state handler for different authentication scenarios.

```tsx
import {
  ContentpassState,
  ContentpassStateType,
  InitialisingState,
  UnauthenticatedState,
  AuthenticatedState,
  ErrorState,
} from '@contentpass/react-native-contentpass';

// Type guard functions for state handling
const isAuthenticated = (state: ContentpassState): state is AuthenticatedState => {
  return state.state === ContentpassStateType.AUTHENTICATED;
};

const hasActiveSubscription = (state: ContentpassState): boolean => {
  return isAuthenticated(state) && state.hasValidSubscription;
};

// Example state handler
const handleState = (state: ContentpassState) => {
  switch (state.state) {
    case ContentpassStateType.INITIALISING:
      // state: InitialisingState
      return { showLoader: true };

    case ContentpassStateType.UNAUTHENTICATED:
      // state: UnauthenticatedState
      // state.hasValidSubscription is always false
      return { showLoginPrompt: true };

    case ContentpassStateType.AUTHENTICATED:
      // state: AuthenticatedState
      // state.hasValidSubscription is boolean
      return {
        showContent: true,
        isPremium: state.hasValidSubscription
      };

    case ContentpassStateType.ERROR:
      // state: ErrorState
      // state.error contains the original exception
      return { showError: true, error: state.error };
  }
};
```

--------------------------------

### Integrate Contentpass and Sourcepoint SDKs in React Native App

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/SOURCEPOINT_SDK_INTEGRATION.md

This code snippet demonstrates how to integrate the Contentpass and Sourcepoint SDKs within a React Native application. It sets up the Sourcepoint consent manager, listens for Contentpass state changes, and triggers Contentpass authentication when a specific Sourcepoint custom action is detected. Ensure you have both SDKs installed and Sourcepoint configured correctly.

```jsx
import { useEffect, useRef, useState } from 'react';
import { SPConsentManager } from '@sourcepoint/react-native-cmp';
import { ContentpassStateType, useContentpassSdk } from '@contentpass/react-native-contentpass';

const sourcePointConfig = {
  accountId: 'SOURCEPOINT_ACCOUNT_ID',
  propertyId: 'SOURCEPOINT_PROPERTY_ID',
  propertyName: 'SOURCEPOINT_PROPERTY_NAME',
};

const setupSourcepoint = (hasValidSubscription) => {
  const { accountId, propertyName, propertyId } = sourcePointConfig;
  const spConsentManager = new SPConsentManager();

  spConsentManager.build(accountId, propertyId, propertyName, {
    gdpr: {
      targetingParams: {
        acps: hasValidSubscription ? 'true' : 'false',
      },
    },
  });

  return spConsentManager;
};

const App = () => {
  const [authResult, setAuthResult] = useState();
  const contentpassSdk = useContentpassSdk();
  const spConsentManager = useRef();

  useEffect(() => {
    const onContentpassStateChange = (state) => {
      setAuthResult(state);
    };

    contentpassSdk.registerObserver(onContentpassStateChange);

    return () => {
      contentpassSdk.unregisterObserver(onContentpassStateChange);
    };
  }, [contentpassSdk]);

  useEffect(() => {
    // wait for the authResult to be set before setting up Sourcepoint
    if (!authResult || authResult.state === ContentpassStateType.INITIALISING) {
      return;
    }

    spConsentManager.current = setupSourcepoint(
      authResult.hasValidSubscription || false
    );

    spConsentManager.current?.onAction((action) => {
      if (action.customActionId === "cp('login')") {
        contentpassSdk.authenticate()
      }
    });

    spConsentManager.current?.loadMessage();

    return () => {
      spConsentManager.current?.dispose();
    };
  }, [authResult, contentpassSdk]);

  return (
    //   Your app content
  )
}
```

--------------------------------

### Initialize Contentpass SDK with ContentpassSdkProvider

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Demonstrates how to set up the Contentpass SDK within a React Native application using the ContentpassSdkProvider. This provider wraps the application's root component and requires a configuration object containing essential Contentpass credentials and settings.

```tsx
import React from 'react';
import { ContentpassSdkProvider } from '@contentpass/react-native-contentpass';
import type { ContentpassConfig } from '@contentpass/react-native-contentpass';

const contentpassConfig: ContentpassConfig = {
  propertyId: 'your-property-uuid',
  planId: 'your-plan-uuid',
  issuer: 'https://my.contentpass.net',
  apiUrl: 'https://cp.cmp-sourcepoint.contentpass.net',
  redirectUrl: 'com.yourapp://oauth',
  samplingRate: 0.05, // Optional: 5% sampling rate for anonymous impressions
  logLevel: 'info',   // Optional: 'debug' | 'info' | 'warn' | 'error'
};

const App = () => {
  return (
    <ContentpassSdkProvider contentpassConfig={contentpassConfig}>
      <YourApp />
    </ContentpassSdkProvider>
  );
};

export default App;
```

--------------------------------

### Run Unit Tests

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Command to execute the project's unit tests. It is recommended to add tests for any new changes made to the library.

```shell
yarn test
```

--------------------------------

### Initiate OAuth 2.0 Authentication with authenticate()

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Explains how to trigger the OAuth 2.0 authentication flow using the authenticate() method. This method opens a modal browser for user login, validates subscriptions upon success, and updates the SDK's internal state. It returns a Promise that resolves on completion or rejects on error.

```tsx
import { useContentpassSdk } from '@contentpass/react-native-contentpass';

const LoginButton = () => {
  const { authenticate } = useContentpassSdk();

  const handleAuthenticate = async () => {
    try {
      await authenticate();
      // Authentication successful
      // State will automatically update to AUTHENTICATED
      // Check hasValidSubscription in observer callback
    } catch (error) {
      if (error.message.includes('cancelled')) {
        console.log('User cancelled authentication');
      } else {
        console.error('Authentication error:', error);
      }
    }
  };

  return <Button title="Sign In with Contentpass" onPress={handleAuthenticate} />;
};

```

--------------------------------

### Initialize ContentpassSdkProvider in React Native

Source: https://github.com/contentpass/react-native-contentpass/blob/main/README.md

Wraps the application's root component with ContentpassSdkProvider to initialize the SDK. Requires a configuration object with propertyId, planId, issuer, and redirectUrl.

```jsx
import React from 'react';
import { ContentpassSdkProvider } from '@contentpass/react-native-contentpass';

const contentpassConfig = {
  propertyId: 'property-id',
  planId: 'plan-id',
  issuer: 'https://my.contentpass.net',
  redirectUrl: 'com.yourapp://oauthredirect',
  samplingRate: 0.1,
  logLevel: 'info'
};

const App = () => {
  return (
    <ContentpassSdkProvider contentpassConfig={contentpassConfig}>
      <YourApp />
    </ContentpassSdkProvider>
  );
};

export default App;
```

--------------------------------

### Use Contentpass SDK methods in React Native

Source: https://github.com/contentpass/react-native-contentpass/blob/main/README.md

Demonstrates using the useContentpassSdk hook to access SDK methods like authenticate, countImpression, registerObserver, unregisterObserver, logout, and recoverFromError. Includes setting up an observer for status changes.

```jsx
import React, { useEffect } from 'react';
import { useContentpassSdk } from '@contentpass/react-native-contentpass';
import { Button, View } from 'react-native';

const YourApp = () => {
  const {
    authenticate,
    countImpression,
    registerObserver,
    unregisterObserver,
    logout,
    recoverFromError
  } = useContentpassSdk();

  useEffect(() => {
    const observer = (state) => {
      console.log('Contentpass state changed:', state);
    };

    registerObserver(observer);

    return () => {
      unregisterObserver(observer);
    };
  }, []);

  return (
    <View>
      <Button onPress={authenticate} title={'Authenticate'} />
      <Button onPress={countImpression} title={'Count Impression'} />
    </View>
  );
};

```

--------------------------------

### Expo prebuild command for native modifications

Source: https://github.com/contentpass/react-native-contentpass/blob/main/README.md

Command to run if you are using Expo and need to enable modifications to the ios and android directories for native dependencies.

```sh
npx expo prebuild
```

--------------------------------

### Fix Formatting Errors

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Command to automatically fix code formatting errors according to ESLint rules. This should be run before committing changes.

```shell
yarn lint --fix
```

--------------------------------

### registerObserver() / unregisterObserver()

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Manages observers for authentication and subscription state changes. `registerObserver` adds a callback function that receives `ContentpassState`, and `unregisterObserver` removes it. It's crucial to unregister observers in cleanup functions to prevent memory leaks.

```APIDOC
## registerObserver() / unregisterObserver()

### Description
Registers a callback function to listen for changes in authentication and subscription state. The observer receives a `ContentpassState` object with the current status. Always unregister observers in cleanup functions to prevent memory leaks.

### Method
- `registerObserver(callback: (state: ContentpassState) => void): void`
- `unregisterObserver(callback: (state: ContentpassState) => void): void`

### Parameters
#### `registerObserver` Parameters
- **callback** (`(state: ContentpassState) => void`) - Required - The function to be called when the state changes.

#### `unregisterObserver` Parameters
- **callback** (`(state: ContentpassState) => void`) - Required - The specific callback function to remove.

### Request Example
```typescript
import { useEffect } from 'react';
import { useContentpassSdk, ContentpassState, ContentpassStateType } from '@contentpass/react-native-contentpass';

const { registerObserver, unregisterObserver } = useContentpassSdk();

useEffect(() => {
  const observer = (state: ContentpassState) => {
    console.log('Contentpass state changed:', state);
    // Handle different states like INITIALISING, UNAUTHENTICATED, AUTHENTICATED, ERROR
  };

  registerObserver(observer);

  // Cleanup on unmount
  return () => {
    unregisterObserver(observer);
  };
}, [registerObserver, unregisterObserver]);
```

### Response
Observers do not return a value but are invoked with a `ContentpassState` object upon state changes.

### `ContentpassState` Object
- **state** (`ContentpassStateType`) - The current state of the SDK (e.g., INITIALISING, UNAUTHENTICATED, AUTHENTICATED, ERROR).
- **hasValidSubscription** (`boolean`, optional) - Indicates if the user has a valid subscription (only present in AUTHENTICATED state).
- **error** (`Error`, optional) - The error object if the state is ERROR.
```

--------------------------------

### Access Contentpass SDK methods with useContentpassSdk Hook

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Shows how to utilize the useContentpassSdk hook to access various Contentpass SDK functionalities within components. This hook provides methods for authentication, impression tracking, state observation, and error recovery, making SDK features readily available.

```tsx
import React, { useEffect, useState } from 'react';
import { Button, View, Text } from 'react-native';
import {
  useContentpassSdk,
  ContentpassState,
  ContentpassStateType,
} from '@contentpass/react-native-contentpass';

const ContentManager = () => {
  const {
    authenticate,
    countImpression,
    registerObserver,
    unregisterObserver,
    logout,
    recoverFromError,
  } = useContentpassSdk();

  const [state, setState] = useState<ContentpassState | undefined>();

  useEffect(() => {
    const observer = (newState: ContentpassState) => {
      console.log('State changed:', newState.state);
      setState(newState);
    };

    registerObserver(observer);
    return () => unregisterObserver(observer);
  }, [registerObserver, unregisterObserver]);

  const handleLogin = async () => {
    try {
      await authenticate();
      console.log('Authentication successful');
    } catch (error) {
      console.error('Authentication failed:', error);
    }
  };

  return (
    <View>
      <Text>Status: {state?.state}</Text>
      <Text>Has Subscription: {state?.hasValidSubscription ? 'Yes' : 'No'}</Text>
      <Button title="Login" onPress={handleLogin} />
      <Button title="Track View" onPress={countImpression} />
      <Button title="Logout" onPress={logout} />
    </View>
  );
};

```

--------------------------------

### Verify Code Quality

Source: https://github.com/contentpass/react-native-contentpass/blob/main/docs/CONTRIBUTING.md

Commands to check if the code adheres to TypeScript type checking, ESLint linting rules, and Prettier formatting standards.

```shell
yarn typecheck
```

```shell
yarn lint
```

```shell
yarn prettier:check
```

--------------------------------

### recoverFromError()

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Attempts to recover the SDK from an error state, typically caused by network issues during background token refresh. This method should be called when network connectivity is restored to re-validate authentication tokens.

```APIDOC
## recoverFromError()

### Description
Attempts to recover from an error state, typically caused by network issues during background token refresh. Call this method when network connectivity is restored to re-validate authentication tokens.

### Method
`recoverFromError(): Promise<void>`

### Parameters
This method does not accept any parameters.

### Request Example
```typescript
import { useNetInfo } from '@react-native-community/netinfo';
import { useContentpassSdk, ContentpassStateType } from '@contentpass/react-native-contentpass';

const { recoverFromError, registerObserver, unregisterObserver } = useContentpassSdk();
const netInfo = useNetInfo();

// Example of triggering recovery when network is back and in error state
useEffect(() => {
  let isInErrorState = false;
  const observer = (state) => {
    isInErrorState = state.state === ContentpassStateType.ERROR;
  };
  registerObserver(observer);

  if (netInfo.isConnected && isInErrorState) {
    recoverFromError()
      .then(() => console.log('Recovered from error state'))
      .catch((err) => console.error('Recovery failed:', err));
  }

  return () => unregisterObserver(observer);
}, [netInfo.isConnected]);
```

### Response
This method returns a `Promise<void>` that resolves when the recovery attempt is complete. It may reject if the recovery fails.
```

--------------------------------

### Observe Authentication and Subscription State with registerObserver() in React Native

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Registers a callback function to listen for changes in authentication and subscription state. The observer receives a ContentpassState object with the current status. Always unregister observers in cleanup functions to prevent memory leaks.

```tsx
import { useEffect, useState } from 'react';
import {
  useContentpassSdk,
  ContentpassState,
  ContentpassStateType,
} from '@contentpass/react-native-contentpass';

const SubscriptionStatus = () => {
  const { registerObserver, unregisterObserver } = useContentpassSdk();
  const [status, setStatus] = useState<ContentpassState>();

  useEffect(() => {
    const observer = (state: ContentpassState) => {
      setStatus(state);

      switch (state.state) {
        case ContentpassStateType.INITIALISING:
          console.log('SDK initializing...');
          break;
        case ContentpassStateType.UNAUTHENTICATED:
          console.log('User not logged in');
          break;
        case ContentpassStateType.AUTHENTICATED:
          console.log('Authenticated, subscription:', state.hasValidSubscription);
          break;
        case ContentpassStateType.ERROR:
          console.error('Error state:', state.error);
          break;
      }
    };

    registerObserver(observer);

    // Cleanup on unmount
    return () => {
      unregisterObserver(observer);
    };
  }, [registerObserver, unregisterObserver]);

  if (!status) return <Text>Loading...</Text>;

  return (
    <View>
      <Text>State: {status.state}</Text>
      {status.state === ContentpassStateType.AUTHENTICATED && (
        <Text>Subscription Active: {status.hasValidSubscription ? 'Yes' : 'No'}</Text>
      )}
    </View>
  );
};

```

--------------------------------

### countImpression()

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Tracks and increments the impression count for the current content view. This function can send paid impression events for authenticated users with subscriptions and sampled impression events for all users.

```APIDOC
## countImpression()

### Description
Tracks and increments the impression count for the current content view. For authenticated users with valid subscriptions, it sends a paid impression event. For all users (authenticated or not), it may send a sampled impression based on the configured sampling rate (default 5%).

### Method
`countImpression()`

### Parameters
This method does not accept any parameters.

### Request Example
```typescript
import { useContentpassSdk } from '@contentpass/react-native-contentpass';

const { countImpression } = useContentpassSdk();

// Call to track impression
await countImpression();
```

### Response
This method does not return a value directly but performs side effects (tracking impressions).

### Error Handling
Failures in tracking impressions are non-blocking and logged as warnings.
```

--------------------------------

### logout()

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Logs the current user out of the Contentpass service. This action clears all stored authentication tokens from encrypted storage, and the SDK state will automatically transition to `UNAUTHENTICATED`.

```APIDOC
## logout()

### Description
Logs the user out by clearing all stored authentication tokens from encrypted storage. The state automatically transitions to `UNAUTHENTICATED` after logout completes.

### Method
`logout(): Promise<void>`

### Parameters
This method does not accept any parameters.

### Request Example
```typescript
import { useContentpassSdk } from '@contentpass/react-native-contentpass';

const { logout } = useContentpassSdk();

const handleLogout = async () => {
  await logout();
  console.log('User logged out successfully');
};
```

### Response
This method returns a `Promise<void>` that resolves when the logout process is complete.
```

--------------------------------

### Track Impressions with countImpression() in React Native

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Tracks and increments the impression count for the current content view. For authenticated users with valid subscriptions, it sends a paid impression event. For all users, it may send a sampled impression based on the configured sampling rate.

```tsx
import { useEffect } from 'react';
import { useContentpassSdk } from '@contentpass/react-native-contentpass';

const ArticleScreen = ({ articleId }: { articleId: string }) => {
  const { countImpression } = useContentpassSdk();

  useEffect(() => {
    // Track impression when article is viewed
    const trackView = async () => {
      try {
        await countImpression();
        console.log('Impression tracked for article:', articleId);
      } catch (error) {
        // Impression tracking failures are non-blocking
        console.warn('Failed to track impression:', error);
      }
    };

    trackView();
  }, [articleId, countImpression]);

  return (
    <View>
      <Text>Article Content...</Text>
    </View>
  );
};

```

--------------------------------

### Recover from Error State with recoverFromError() in React Native

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Attempts to recover from an error state, typically caused by network issues during background token refresh. Call this method when network connectivity is restored to re-validate authentication tokens.

```tsx
import { useEffect } from 'react';
import { useNetInfo } from '@react-native-community/netinfo';
import {
  useContentpassSdk,
  ContentpassStateType,
} from '@contentpass/react-native-contentpass';

const NetworkRecovery = () => {
  const { registerObserver, unregisterObserver, recoverFromError } = useContentpassSdk();
  const netInfo = useNetInfo();
  const [isInErrorState, setIsInErrorState] = useState(false);

  useEffect(() => {
    const observer = (state) => {
      setIsInErrorState(state.state === ContentpassStateType.ERROR);
    };
    registerObserver(observer);
    return () => unregisterObserver(observer);
  }, []);

  useEffect(() => {
    // Auto-recover when network comes back online and we're in error state
    if (netInfo.isConnected && isInErrorState) {
      recoverFromError()
        .then(() => console.log('Recovered from error state'))
        .catch((err) => console.error('Recovery failed:', err));
    }
  }, [netInfo.isConnected, isInErrorState, recoverFromError]);

  return null;
};

```

--------------------------------

### Log Out User with logout() in React Native

Source: https://context7.com/contentpass/react-native-contentpass/llms.txt

Logs the user out by clearing all stored authentication tokens from encrypted storage. The state automatically transitions to UNAUTHENTICATED after logout completes.

```tsx
import { Alert } from 'react-native';
import { useContentpassSdk } from '@contentpass/react-native-contentpass';

const ProfileScreen = () => {
  const { logout } = useContentpassSdk();

  const handleLogout = async () => {
    Alert.alert(
      'Logout',
      'Are you sure you want to log out?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: async () => {
            await logout();
            console.log('User logged out successfully');
          },
        },
      ]
    );
  };

  return <Button title="Sign Out" onPress={handleLogout} />;
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.