> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bare Workflow

> Set up the Para SDK in a React Native bare workflow project.

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

The Para SDK for React Native allows you to easily integrate secure and scalable wallet functionalities into your mobile
applications. This guide covers the installation and project setup for the Para SDK in a bare React Native workflow.

## Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.

<Warning>
  Don't have an API key yet? Request access to the <Link label="Developer Portal" href="https://developer.getpara.com" /> to create API keys, manage billing, teams, and more.
</Warning>

## Dependency Installation

Install the required packages for Para SDK integration:

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/react-native-wallet @react-native-async-storage/async-storage react-native-keychain react-native-modpow react-native-nitro-modules react-native-passkey react-native-quick-base64 @craftzdog/react-native-buffer react-native-quick-crypto viem --save-exact
  ```

  ```bash yarn theme={null}
  yarn add @getpara/react-native-wallet @react-native-async-storage/async-storage react-native-keychain react-native-modpow react-native-nitro-modules react-native-passkey react-native-quick-base64 @craftzdog/react-native-buffer react-native-quick-crypto viem --exact
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/react-native-wallet @react-native-async-storage/async-storage react-native-keychain react-native-modpow react-native-nitro-modules react-native-passkey react-native-quick-base64 @craftzdog/react-native-buffer react-native-quick-crypto viem --save-exact
  ```

  ```bash bun theme={null}
  bun add @getpara/react-native-wallet @react-native-async-storage/async-storage react-native-keychain react-native-modpow react-native-nitro-modules react-native-passkey react-native-quick-base64 @craftzdog/react-native-buffer react-native-quick-crypto viem --exact
  ```
</CodeGroup>

## Project Setup

### iOS Setup

Install CocoaPods for native dependencies:

```bash theme={null}
cd ios
bundle install
bundle exec pod install
cd ..
```

<Note>Remember to run `pod install` after adding new dependencies to your project.</Note>

<Note>
  Getting ready for App Review? See <Link label="iOS App Store Submission" href="/v2/general/ios-app-store-submission" /> for Para-specific review tips.
</Note>

<Info>If you plan to use native passkeys, additional platform configuration is required. See <Link label="Add Passkeys" href="/v2/react-native/guides/add-passkeys" /> for iOS and Android setup.</Info>

### Configure Metro Bundler

Create or update `metro.config.js` in your project root:

```javascript metro.config.js theme={null}
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const config = {
  resolver: {
    extraNodeModules: {
      crypto: require.resolve("react-native-quick-crypto"),
      buffer: require.resolve("@craftzdog/react-native-buffer"),
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
```

### Add Para Shim

Import the Para shim as the FIRST import in your application's entry file (typically `index.js`):

```javascript theme={null}
import "@getpara/react-native-wallet/shim";
// Other imports...
```

<Warning>**Important**: The shim import must come before any other imports to ensure required modules are available.</Warning>

## Initialize the SDK

Set up the Para client singleton to enable SDK interactions:

```typescript para.ts theme={null}
import { ParaMobile } from "@getpara/react-native-wallet";

export const para = new ParaMobile(YOUR_API_KEY, undefined, {
  disableWorkers: true,
});
```

Initialize it in your app entry point:

```typescript index.js theme={null}
import "@getpara/react-native-wallet/shim";
import { para } from "./para";

// Initialize Para before rendering
para.init();
```

<Note>
  **Beta Testing Credentials** In the `BETA` Environment, you can use any email ending in `@test.getpara.com` (like
  [dev@test.getpara.com](mailto:dev@test.getpara.com)) or US phone numbers (+1) in the format `(area code)-555-xxxx` (like (425)-555-1234). Any OTP
  code will work for verification with these test credentials. These credentials are for beta testing only. You can
  delete test users anytime in the beta developer console to free up user slots.
</Note>

<Note>If you're using a legacy API key (one without an environment prefix) you must provide the `Environment` as the first argument to the `ParaMobile` constructor. You can retrieve your updated API key from the Para Developer Portal at [https://developer.getpara.com/](https://developer.getpara.com/)</Note>

## Examples

<Card horizontal title="React Native Integration Examples" imgUrl="/images/v2/framework-react-native.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/mobile/with-react-native" description="Explore our repository containing React Native implementations, along with shared UI components demonstrating Para integration." />

## Troubleshooting

<AccordionGroup>
  <Accordion title="Para SDK initialization fails">
    If you're having trouble initializing the Para SDK:

    * Ensure that you've called `para.init()` after creating the Para instance.
    * Verify that you're using the correct API key and environment.
    * Check that all necessary dependencies are installed and linked properly.
    * Look for any JavaScript errors in your Metro bundler console.
  </Accordion>

  <Accordion title="Native modules are not found or linked">
    If you're seeing errors about missing native modules:

    * Run `pod install` in the `ios` directory to ensure all CocoaPods dependencies are installed.
    * For Android, make sure your `android/app/build.gradle` file includes the necessary dependencies.
    * Rebuild your app after adding new native dependencies.
  </Accordion>

  <Accordion title="Crypto-related errors or undefined functions">
    If you're seeing errors related to crypto functions:

    * Ensure you've properly set up the `react-native-get-random-values` and `react-native-quick-crypto` polyfills.
    * Verify that your `metro.config.js` file is configured correctly to include the necessary Node.js core modules.
    * Check that you've imported the shim file at the top of your root `index.js` file.
  </Accordion>

  <Accordion title="&#x22;Cannot create URL for blob&#x22; errors">
    If you're encountering blob URL creation errors:

    * Ensure you're using `{ disableWorkers: true }` in the ParaMobile constructor
    * Verify the Para SDK shim is imported first in your `index.js` file
    * This error occurs when Web Workers are enabled in React Native environments
  </Accordion>

  <Accordion title="Authentication fails or API requests are rejected">
    If you're experiencing authentication issues:

    * Double-check that your API key is correct and properly set in your environment variables.
    * Verify you're using the correct environment (`BETA` or `PRODUCTION`) that matches your API key.
    * Ensure your account has the necessary permissions for the operations you're attempting.
    * Check your network requests for any failed API calls and examine the error messages.
  </Accordion>
</AccordionGroup>

For a more comprehensive list of solutions, visit our <Link label="troubleshooting guide" href="/v2/react-native/troubleshooting" />.

## Next Steps

<CardGroup cols={3}>
  <Card title="Email & Phone Login" imgUrl="/images/v2/custom-ui-social.png" href="/v2/react-native/guides/add-email-phone" description="Add email and phone authentication to your app." />

  <Card title="Add Social Login" imgUrl="/images/v2/custom-ui-social.png" href="/v2/react-native/guides/add-social-login" description="Authenticate users with Google, Apple, Discord, and more." />

  <Card title="EVM Integration" imgUrl="/images/v2/network-evm.png" href="/v2/react-native/guides/evm" description="Use Para with EVM-compatible libraries like ethers.js and viem." />
</CardGroup>