setup-react-native.md

Setup React Native

Prerequisites

To start using Aries Framework JavaScript in React Native some platform specific dependencies are required.

1. Follow the React Native Setup guide to set up your environment.
2. Add @aries-framework/core, @aries-framework/react-native, react-native-fs, and react-native-get-random-values to your project.

yarn add @aries-framework/core @aries-framework/react-native react-native-fs react-native-get-random-values

3. Install Libindy for iOS and Android:

   • iOS
   • Android

4. If you're using React Native > 0.61.5, make sure you have Hermes enabled, as the app will crash on Android when opening a ledger pool. See the React Native docs on Hermes on how to enable Hermes.

   • Indy SDK issue

Using decorators

If you intend to extend the core framework capabilities good change you will need to use decorators. In this case you need to enable support for decorators in both TypeScript and Babel.

1. Install babel-plugin-transform-typescript-metadata and @babel/plugin-proposal-decorators

yarn add babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators

2. Add them to your babel config

// babel.config.js
module.exports = {
  // ... other config ... //
  plugins: ['babel-plugin-transform-typescript-metadata', ['@babel/plugin-proposal-decorators', { legacy: true }]],
}

3. Enable decorators in your tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    // ... other options ... //
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Agent Setup

Initializing the Agent also requires some React Native specific setup, mainly for the Indy SDK and File System. Below is a sample config, see the README for an overview of getting started guides. If you want to jump right in, check the Getting Started: Agent guide.

import { Agent } from 'aries-framework/core'
import { agentDependencies } from '@aries-framework/react-native'

// This creates an agent with all the specified configuration data
const agent = new Agent(
  {
    label: 'my-agent',
    walletConfig: {
      id: 'walletId',
      key: 'testkey0000000000000000000000000',
    },
  },
  agentDependencies
)

// Make sure to initialize the agent before using it.
try {
  await agent.initialize()
  console.log('Initialized agent!')
} catch (error) {
  console.log(error)
}