docs: update react-native setup guide (#2575)

docs: update react-native setup guide

With 3.0 less polyfill work is required and after Buffer is removed as a
dependency there will be even less.

In the future we may add `react-native` entries to `@xrpl/isomorphic`
`package.json` files which might remove the need for these extra steps.
This commit is contained in:
Caleb Kniffen
2023-11-17 12:53:56 -06:00
parent e2433101cb
commit 9cdb60e26a

View File

@@ -61,42 +61,37 @@ https://codesandbox.io/s/xrpl-intro-pxgdjr?file=/src/App.js
### Using xrpl.js with React Native ### Using xrpl.js with React Native
If you want to use `xrpl.js` with React Native you will need to install shims for core NodeJS modules. To help with this you can use a module like [rn-nodeify](https://github.com/tradle/rn-nodeify). If you want to use `xrpl.js` with React Native you will need to install polyfills for core NodeJS modules.
1. Install dependencies (you can use `yarn` as well): 1. Install dependencies (you can use `yarn` as well):
```shell ```shell
npm install react-native-crypto npm install xrpl \
npm install xrpl fast-text-encoding \
# install peer deps react-native-get-random-values
npm install react-native-randombytes
# install latest rn-nodeify
npm install rn-nodeify@latest --dev
``` ```
2. After that, run the following command: 2. After that, run the following commands:
```shell ```shell
# install node core shims and recursively hack package.json files # compile `react-native-get-random-values` pods see https://www.npmjs.com/package/react-native-get-random-values#installation
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings npx pod-install
./node_modules/.bin/rn-nodeify --hack --install
``` ```
3. Enable `crypto`: 3. Create `polyfills.js` and add
`rn-nodeify` will create a `shim.js` file in the project root directory.
Open it and uncomment the line that requires the crypto module:
```javascript ```javascript
// If using the crypto shim, uncomment the following line to ensure if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer
// crypto is loaded first, so it can populate global.crypto // Required for TextEncoder/TextDecoder
require("crypto"); import 'fast-text-encoding'
// Required for `crypto.getRandomValues`
import 'react-native-get-random-values'
``` ```
4. Import `shim` in your project (it must be the first line): 4. Import `polyfills` in index file your project (it must be the first line):
```javascript ```javascript
import './shim' import './polyfills'
... ...
``` ```