Polyfill Guide: Anchor

This guide will teach you how to set up the Anchor Javascript SDK with the necessary polyfills in a React Native or Expo app.

Installation

Add the Anchor library to your project:

yarn

yarn add @coral-xyz/anchor

npm

npm install @coral-xyz/anchor

Polyfills

The following polyfills are needed:

Install buffer

:::

yarn

yarn add buffer

npm

npm install buffer

Then, import the library in your app's entrypoint file (e.g index.js), before the Anchor library is imported.

import { Buffer } from "buffer";
global.Buffer = Buffer;

Buffer.prototype.subarray = function subarray(
  begin: number | undefined,
  end: number | undefined
) {
  const result = Uint8Array.prototype.subarray.apply(this, [begin, end]);
  Object.setPrototypeOf(result, Buffer.prototype); // Explicitly add the `Buffer` prototype (adds `readUIntLE`!)
  return result;
};

Install getRandomValues

Add the react-native-get-random-values library to your project.

yarn

yarn add react-native-get-random-values

npm

npm install react-native-get-random-values

Then, import the library in your app's entrypoint file (e.g index.js), before the Anchor library is imported.

import "react-native-get-random-values";
// ...other imports below

Install assert

Add the assert library to your project.

yarn

yarn add assert

npm

npm install assert

Install text-encoding

Add the text-encoding library to your project.

yarn

yarn add text-encoding

npm

npm install text-encoding

Then, populate the global.TextEcoder value in your app's entrypoint file (e.g index.js).

// ...imports
global.TextEncoder = require("text-encoding").TextEncoder;

Example