How To Add bitcoinjs-lib To A React Native v0.60+ Project

bitcoinjs-lib_Setup.md

How To Add bitcoinjs-lib To A React Native v0.60+ Project

Add/Link the following dependencies:

• yarn add bitcoinjs-lib ecpair @bitcoinerlab/secp256k1 react-native-randombytes buffer readable-stream
• yarn add --dev rn-nodeify
• cd ios && pod install && cd ..
• Add the following postinstall to your script in package.json: "postinstall": "rn-nodeify --install buffer,stream,assert,events,crypto,vm,process --hack"

Install any remaining dependencies and run postinstall.

NOTE: (If you receive an error about "shim.js" not existing just run yarn install again):

• yarn install

• Uncomment require('crypto') at the bottom of "shim.js". Or add require('crypto') to the bottom of "shim.js" if it doesn't exist.

• And finally, yarn install && cd ios && pod install && cd .. one more time.

To test if everything is working as expected place the following in render:

import './shim';
import ECPairFactory from 'ecpair';
import ecc from '@bitcoinerlab/secp256k1';
const bitcoin = require('bitcoinjs-lib');
const ECPair = ECPairFactory(ecc);
const keyPair = ECPair.makeRandom();
const {address} = bitcoin.payments.p2pkh({pubkey: keyPair.publicKey});
console.log(address);

An unedited video walkthrough of this guide can be found here:

• https://youtu.be/pKRM5eAZl8c (outdated)

@coreyphillips trying to figure out from commit history... inject buffer/crypto/stream & change noblesecpk1 lib

Requires adding these deps

• @bitcoinerlab/secp256k1
• @craftzdog/react-native-buffer
• react-native-quick-base64
• react-native-quick-crypto
• stream-browserify
• babel-plugin-module-resolver (dev dep)

Looks like I added the following to babel.config.js:

[
      'module-resolver',
      {
        alias: {
          crypto: 'react-native-quick-crypto',
          stream: 'stream-browserify',
          buffer: '@craftzdog/react-native-buffer',
        },
      },
    ],

Replace all import {Buffer} from 'buffer'; to import {Buffer} from '@craftzdog/react-native-buffer';
Replace all import bjs from 'bitcoinjs-lib'; to import ecc from '@bitcoinerlab/secp256k1'; and import {...} from 'bitcoinjs-lib';

Add to top of index.js

import {Buffer} from '@craftzdog/react-native-buffer';
window.Buffer = Buffer;

That's it! Pain in the butt. Took me 2 days to figure out.

Nice, thanks @losh11! I'll attempt to give it a go when some time becomes available and update or create a new gist with some working code and examples.

@coreyphillips, here is a working boilerplate:
https://github.com/evzpav/bitcoinjs-lib-react-native

happy to see this @evzpav!

Did anybody had any success making bitcoinjs-lib working with Expo on React Native?

@evzpav Nice! Awesome to see we have a viable boilerplate.

As another option, I'm trying to go the JSI route by wrapping libsecp256k1 into a usable RN library that we can import. Not having much luck linking it though.

I am trying the steps with react native on expo but getting the error "cannot resolve invariant". Any fixes? Has anyone managed to get it working with expo?

@zireal23 do you have a repo we could try?

@losh11 thanks for the reply, but I got it to work by polyfilling buffer and patching the library to always populate the global.buffer.

https://www.npmjs.com/package/@bitcoin-js/tiny-secp256k1-asmjs

Released asmjs version of tiny-secp256k1.

Also, @bitcoinerlab/secp256k1 also implements the same interface and is slightly faster (but it uses native JS BigInt, so if your build environment can't handle that, you can't use it)

---

Also, I find it strange that so many people still have trouble with RN? BlueWallet has been using bitcoinjs-lib with RN for years and they've never complained once...

Granted, I am not well versed in RN and all of its strange ways.

Thanks again @junderw!

I've updated the guide to use @bitcoin-js/tiny-secp256k1-asmjs.

Regarding RN/bitcoinjs-lib trouble, the first-time setup for a project can be tricky and some devs tend to default to Expo which can bring some additional complications. Once a project is setup successfully on a particular version it's not an issue to maintain. However, as seen with tiny-secp256k1, any change/upgrade to a crypto library can be difficult in RN.

Hi,
I followed all this steps but I am getting following error, any idea ?

``Error: While trying to resolve module @bitcoin-js/tiny-secp256k1-asmjs from file `C:\Users\Parth\Documents\Development\crypto-wallet-app\LCRN14-crypto-wallet-app-master\utils\SimBSC.js`, the package `C:\Users\Parth\Documents\Development\crypto-wallet-app\LCRN14-crypto-wallet-app-master\node_modules@bitcoin-js\tiny-secp256k1-asmjs\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\Parth\Documents\Development\crypto-wallet-app\LCRN14-crypto-wallet-app-master\node_modules@bitcoin-js\tiny-secp256k1-asmjs\lib\cjs\index.cjs`. Indeed, none of these files exist:`
`

@parthindia47, do you have any luck swapping out @bitcoin-js/tiny-secp256k1-asmjs for @bitcoinerlab/secp256k1?

Hi everyone! I'd like to let you know that there is a process for including these shims through using metro.config.js instead of rn-nodeify. I find it easier, plus you don't need to eject from expo.

PTAL if you wish - https://gist.github.com/techiejd/a14442315b5bfe0cba4ede7d2971a52f.