Sometimes while creating advanced apps in react-native you may want to encrypt the data you are sending to the web for secured web communication. You may also want to encrypt the payment-related data that is sent to the payment gateway. Let’s say you want to use the module to create some encrypted data. It might seem natural to do something like this: crypto There are many alternate modules out there namely expo-crypto , react-native-crypto and many others but none of these have all the methods of crypto module ,especially if you want to use createCipheriv method you wont find it in any of those modules out there. crypto = ( ); mykey = crypto.createCipher( , ); mystr = mykey.update( , , ) mystr += mykey.final( ); .log(mystr); var require 'crypto' var 'aes-128-cbc' 'mypassword' var 'abc' 'utf8' 'hex' 'hex' console //34feb914c099df25794bf9ccb85bea72 Just import a module and create an encrypted string, right? Right? Nope! But because crypto is a core Node JS module, which means it’s probably C++ code bundled with the Node JS binary, not Javascript. The React Native packager can’t package it[1] along with your app’s Javascript bundle, so you get a runtime error: this doesn’t work, Unable to resolve module 'crypto' This makes core modules like the crypto, stream, etc, and the thousands of npm modules that depend on them unusable from React Native. Fortunately, there’s a solution to this problem, but it takes some work. Solution If you’re familiar with the module bundler , you might know that it allows you to use core Node JS modules like crypto in the browser using polyfills[2]. So let’s try to create a standalone Javascript file that contains a polyfill for the cryptomodule, and use it within our app: Browserify : Here we are installing browserify globally. If you have installed it before globally then the below command need not be executed. 1. First, install browserify npm install -g browserify in your root directory ; 2. Create a file crypto-in.js In the file import the module crypto and export it in the same file. Make sure that you do not create in directory. If you create it in directory this file will be lost every time is executed. crypto-in.js crypto-in.js node_modules node_modules npm install crypto = ( ); .exports=crypto var require "crypto" module using browserify. 3. Create a standalone Javascript bundle crypto-custom.js browserify crypto- .js -o crypto-custom.js in This creates a file , which contains some 26,660 lines of code (containing the polyfills). The last few lines contain our code from . crypto-custom.js crypto-in.js },{ : }], :[ { crypto = ( ); .exports = crypto; },{ : }]},{},[ ]); //26,656 lines above.. "indexof" 100 153 ( ) function require,module,exports // Our code from crypto-in.js var require "crypto" module "crypto" 56 153 At this point, it might seem like we’re done, but we’re not! If you replace the line: crypto = ( ); const require 'crypto' in the app code with: crypto = ( ); const require './crypto-custom' //here iam in root directory and crypto-custom.js file is also in //rootdirectory and try to run the app, you get the following error: Unable to resolve bn.js module Turns out the word require is given special treatment by the React Native packager, and you can’t redefine it to mean something else, which is what Browserify tries to do within the bundle. If you look carefully inside , you will notice that it always passes in a custom require to function as a parameter and never actually uses the global require. There is a hacky but simple way to fix this problem, explained below. crypto-custom.js in a text editor, and replace all instances of the word require with something else e.g. . Make sure it’s unique, so it doesn’t conflict with any existing code and mess things up. 4. Open the file crypto-custom.js req If you save and reload the app now, the previous error will go away, but a new error will appear: crypto-custom.js The packager isn’t able to find the method , because crypto isn’t exported properly from . If you look at the last few lines of the bundle, you’ll find that this is because we’re setting not on the global modules object, but on something else that’s passed in as a function argument: createCipher crypto-custom.js module.exports },{}], :[ { crypto = req( ); .exports = crypto; },{ : }]},{},[ ]); //26,656 lines above.. 187 ( ) function req,module,exports var "crypto" module "crypto" 71 187 5. To export properly from , we need to make a few more changes to the file: crypto crypto-custom.js Add the statement at the top of the file Replace the statement ; with to set the outer variable, instead of creating a local variable inside the function body. Move the line outside the function body to the bottom of the file, so that it references the global module object. var crypto crypto-custom.js var crypto = require('crypto') crypto = require('crypto'); module.exports = crypto; After the changes, crypto-custom.js should look something like this: crypto; },{ : }], :[ { crypto = req( ); },{ : }]},{},[ ]); .exports = crypto; var //at top of the file at line 1 // Some 26,656 lines of polyfills.. "indexof" 100 153 ( ) function req,module,exports "crypto" "crypto" 56 153 module If you run the app now, it should work perfectly: That’s it! References — [2] https://github.com/facebook/react-native/issues/1871 — [3] https://github.com/substack/browserify-handbook#builtins — https://github.com/facebook/react-native/issues/6253
