React Native and Expo Troubleshooting

When incorporating Para into React Native or Expo applications, developers may face specific hurdles. This guide offers solutions to common problems and provides best practices for a smooth integration process.

Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:

Include the Para LLM-optimized context file to ensure you’re getting the most up-to-date help!
Check out the Example Hub Wiki for an interactive LLM that leverages the Para Examples Hub!

General Troubleshooting Steps

Before addressing specific issues, try these general troubleshooting steps for both React Native and Expo projects:

Clear Cache and Dependencies

Rebuild iOS and Android folders (Expo)

Rebuild the project

Common Issues and Solutions

Missing Polyfills

Error: Errors related to missing modules like crypto, buffer, or stream.

Solution: Update your metro.config.js to include necessary polyfills:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const nodeLibs = require("node-libs-react-native");

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

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

Incomplete Shims

Missing Crypto Subtle API

Error: Errors related to crypto.subtle API or missing cryptographic functions.

Solution: Add the PolyfillCrypto component to your root App component.

import PolyfillCrypto from "react-native-webview-crypto";

export default function App() {
return (
<>
  <PolyfillCrypto />
  {/* Your app components */}
</>
);
}

</Accordion>

<Accordion title="WebCredentials Configuration">
**Error**: Passkey functionality not working. Errors related to `ASAuthorizationController` or `ASWebAuthenticationSession` on iOS and `CredenitalManager` on Android.

**Solution**:
Passkeys requires configuring both the iOS and Android environments with the Para associated domains and web credentials.
Please check Step one of the Project Setup section for the <Link

label="React Native" href="getting-started/initial-setup/react-native#project-setup" /> and <Link
label="Expo"
href="getting-started/initial-setup/expo#project-setup"
/> setup guides for detailed instructions.

</Accordion>

<Accordion title="Apple App Site Association">
**Error**: Passkeys not functioning despite correct configuration.

**Solution**: Ensure your app's bundle identifier and team ID are registered with Para.

<Info>
Contact Para support to associate your app correctly. Provide your app's bundle identifier and team ID. You can find your team ID in the Apple Developer portal.
</Info>

</Accordion>

<Accordion title="Expo Go Limitations">
**Error**: Native modules not working in Expo Go.

**Solution**: Para is reliant on native modules and will not work with Expo Go. Use Expo's build service to create a standalone app. You can do this by running `expo build:ios` or `expo build:android`. This will create the corresponding iOS or Android folders in your project and link the native modules correctly. Alternative use expo prebuild to create the native folders for both platforms.

</Accordion>

<Accordion title="Pod Linking Issues">
**Error**: Native modules not linking correctly. Build errors related to missing pods. Build stalls at the linking stage.

**Solution**: iOS in React Native projects requires manual linking of pods. Ensure the pods are correctly linked by running `pod install` in the `ios` directory. Expo auto links the pods, but you can run `expo prebuild --clean` to ensure the pods are correctly linked.

```bash
cd ios
pod install
cd ..
npx react-native run-ios

Storage-Related Errors

Best Practices

Implement robust error handling for all Para operations.
Use secure storage methods for sensitive data.
Keep your project’s native code up to date with the latest Para SDK requirements.

For comprehensive setup instructions and the most up-to-date integration guide, please refer to our

React Native and Expo quick start guides.

Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:

1
A detailed description of the problem you’re encountering.
2
Any relevant error messages or logs.
3
Steps to reproduce the issue.
4
Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.

On this page

General Troubleshooting Steps
Common Issues and Solutions
Best Practices
Integration Support

Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:

Include the Para LLM-optimized context file to ensure you’re getting the most up-to-date help!
Check out the Example Hub Wiki for an interactive LLM that leverages the Para Examples Hub!

General Troubleshooting Steps

Before addressing specific issues, try these general troubleshooting steps for both React Native and Expo projects:

Clear Cache and Dependencies

Rebuild iOS and Android folders (Expo)

Rebuild the project

Common Issues and Solutions

Missing Polyfills

Error: Errors related to missing modules like crypto, buffer, or stream.

Solution: Update your metro.config.js to include necessary polyfills:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const nodeLibs = require("node-libs-react-native");

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

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

Incomplete Shims

Missing Crypto Subtle API

Error: Errors related to crypto.subtle API or missing cryptographic functions.

Solution: Add the PolyfillCrypto component to your root App component.

import PolyfillCrypto from "react-native-webview-crypto";

export default function App() {
return (
<>
  <PolyfillCrypto />
  {/* Your app components */}
</>
);
}

</Accordion>

<Accordion title="WebCredentials Configuration">
**Error**: Passkey functionality not working. Errors related to `ASAuthorizationController` or `ASWebAuthenticationSession` on iOS and `CredenitalManager` on Android.

**Solution**:
Passkeys requires configuring both the iOS and Android environments with the Para associated domains and web credentials.
Please check Step one of the Project Setup section for the <Link

label="React Native" href="getting-started/initial-setup/react-native#project-setup" /> and <Link
label="Expo"
href="getting-started/initial-setup/expo#project-setup"
/> setup guides for detailed instructions.

</Accordion>

<Accordion title="Apple App Site Association">
**Error**: Passkeys not functioning despite correct configuration.

**Solution**: Ensure your app's bundle identifier and team ID are registered with Para.

<Info>
Contact Para support to associate your app correctly. Provide your app's bundle identifier and team ID. You can find your team ID in the Apple Developer portal.
</Info>

</Accordion>

<Accordion title="Expo Go Limitations">
**Error**: Native modules not working in Expo Go.

**Solution**: Para is reliant on native modules and will not work with Expo Go. Use Expo's build service to create a standalone app. You can do this by running `expo build:ios` or `expo build:android`. This will create the corresponding iOS or Android folders in your project and link the native modules correctly. Alternative use expo prebuild to create the native folders for both platforms.

</Accordion>

<Accordion title="Pod Linking Issues">
**Error**: Native modules not linking correctly. Build errors related to missing pods. Build stalls at the linking stage.

**Solution**: iOS in React Native projects requires manual linking of pods. Ensure the pods are correctly linked by running `pod install` in the `ios` directory. Expo auto links the pods, but you can run `expo prebuild --clean` to ensure the pods are correctly linked.

```bash
cd ios
pod install
cd ..
npx react-native run-ios

Storage-Related Errors

Best Practices

Implement robust error handling for all Para operations.
Use secure storage methods for sensitive data.
Keep your project’s native code up to date with the latest Para SDK requirements.

For comprehensive setup instructions and the most up-to-date integration guide, please refer to our

React Native and Expo quick start guides.

Integration Support

1
A detailed description of the problem you’re encountering.
2
Any relevant error messages or logs.
3
Steps to reproduce the issue.
4
Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.

On this page

General Troubleshooting Steps
Common Issues and Solutions
Best Practices
Integration Support

React Native and Expo Troubleshooting

General Troubleshooting Steps

Common Issues and Solutions

Best Practices

Integration Support

Introduction

Setup

Guides

API & Troubleshooting

React Native and Expo Troubleshooting

General Troubleshooting Steps

Common Issues and Solutions

Best Practices

Integration Support

​General Troubleshooting Steps

​Common Issues and Solutions

​Best Practices

​Integration Support

Introduction

Setup

Guides

API & Troubleshooting

​General Troubleshooting Steps

​Common Issues and Solutions

​Best Practices

​Integration Support

General Troubleshooting Steps

Common Issues and Solutions

Best Practices

Integration Support

General Troubleshooting Steps

Common Issues and Solutions

Best Practices

Integration Support