mirror of
https://github.com/Xahau/xahau.js.git
synced 2025-11-04 13:05:49 +00:00
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:
@@ -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
|
|
||||||
// If using the crypto shim, uncomment the following line to ensure
|
|
||||||
// crypto is loaded first, so it can populate global.crypto
|
|
||||||
require("crypto");
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Import `shim` in your project (it must be the first line):
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import './shim'
|
if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer
|
||||||
|
// Required for TextEncoder/TextDecoder
|
||||||
|
import 'fast-text-encoding'
|
||||||
|
// Required for `crypto.getRandomValues`
|
||||||
|
import 'react-native-get-random-values'
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Import `polyfills` in index file your project (it must be the first line):
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import './polyfills'
|
||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user