ethers.js/docs/v5/cookbook/react-native/index.html

69 lines
11 KiB
HTML
Raw Normal View History

2020-09-08 08:12:15 +03:00
<!DOCTYPE html>
<html class="paged">
<head>
<title>React Native (and ilk)</title>
<link rel="stylesheet" type="text/css" href="/v5/static/style.css">
2021-02-08 23:26:10 +03:00
<meta property="og:title" content="React Native (and ilk)"/>
<meta property="og:description" content="Documentation for ethers, a complete, tiny and simple Ethereum library."/>
<meta property="og:image" content="/v5/static/social.jpg"/>
2020-09-08 08:12:15 +03:00
</head>
<body>
<div class="sidebar">
<div class="header">
<div class="logo"><a href="/v5/"><div class="image"></div><div class="name">ethers</div><div class="version">v5.0</div></a></div>
2020-11-23 07:07:13 +03:00
<div class="search"><form action="/v5/search/" method="GET"><input name="search" id="search" /></form><span class="search-icon">&#9906;</span></div>
2020-09-08 08:12:15 +03:00
</div>
<div class="toc"><div>
2021-02-08 23:26:10 +03:00
<div class="link title"><a href="/v5/">Documentation</a></div><div class="base show link depth-1"><a href="/v5/getting-started/">Getting Started</a></div><div class="base show link depth-1"><a href="/v5/concepts/">Ethereum Basics</a></div><div class="hide link depth-2"><a href="/v5/concepts/events/">Events</a></div><div class="hide link depth-2"><a href="/v5/concepts/gas/">Gas</a></div><div class="hide link depth-2"><a href="/v5/concepts/security/">Security</a></div><div class="hide link depth-2"><a href="/v5/concepts/best-practices/">Best Practices</a></div><div class="base show link depth-1"><a href="/v5/api-keys/">Provider API Keys</a></div><div class="base show link depth-1"><a href="/v5/api/">Application Programming Interface</a></div><div class="hide link depth-2"><a href="/v5/api/providers/">Providers</a></div><div class="hide link depth-3"><a href="/v5/api/providers/provider/">Provider</a></div><div class="hide link depth-3"><a href="/v5/api/providers/jsonrpc-provider/">JsonRpcProvider</a></div><div class="hide link depth-3"><a href="/v5/api/providers/api-providers/">API Providers</a></div><div class="hide link depth-3"><a href="/v5/api/providers/other/">Other Providers</a></div><div class="hide link depth-3"><a href="/v5/api/providers/types/">Types</a></div><div class="hide link depth-2"><a href="/v5/api/signer/">Signers</a></div><div class="hide link depth-2"><a href="/v5/api/contract/">Contract Interaction</a></div><div class="hide link depth-3"><a href="/v5/api/contract/contract/">Contract</a></div><div class="hide link depth-3"><a href="/v5/api/contract/contract-factory/">ContractFactory</a></div><div class="hide link depth-3"><a href="/v5/api/contract/example/">Example: ERC-20 Contract</a></div><div class="hide link depth-2"><a href="/v5/api/utils/">Utilities</a></div><div class="hide link depth-3"><a href="/v5/api/utils/abi/">Application Binary Interface</a></div><div class="hide link depth-4"><a href="/v5/api/utils/abi/coder/">AbiCoder</a></div><div class="hide link depth-4"><a href="/v5/api/utils/abi/formats/">ABI Formats</a></div><div class="hide link depth-4"><a href="/v5/api/utils/abi/fragments/">Fragments</a></div><div class="hide link depth-4"><a href="/v5/api/utils/abi/interface/">Interface</a></div><div class="hide link depth-3"><a href="/v5/api/utils/address/">Addresses</a></div><div class="hide link depth-3"><a href="/v5/api/utils/bignumber/">BigNumber</a></div><div class="hide link depth-3"><a href="/v5/api/utils/bytes/">Byte Manipulation</a></div><div class="hide link depth-3"><a href="/v5/api/utils/constants/">Constants</a></div><div class="hide link depth-3"><a href="/v5/api/utils/display-logic/">Display Logic and Input</a></div><div class="hide link depth-3"><a href="/v5/api/utils/encoding/">Encoding Utilities</a></div><div class="hide link depth-3"><a href="/v5/api/utils/fixednumber/">FixedNumber</a></div><div class="hide link depth-3"><a href="/v5/api/utils/hashing/">Hashing Algorithms</a></div><div class="hide link depth-3"><a href="/v5/api/utils/hdnode/">HD Wallet</a></div><div class="hide link depth-3"><a href="/v5/api/utils/logger/">Logging</a></div><div class="hide link depth-3"><a href="/v5/api/utils/properties/">Property Utilities</a></div><div class="hide link depth-3"><a href="/v5/api/utils/signing-key/">Signing Key</a></div><div class="hide link depth-3"><a href="/v5/api/utils/strings/">Strings</a></div><div class="hide link depth-3"><a href="/v5/api/utils/transactions/">Transactions</a></div><div class="hide link depth-3"><a href="/v5/api/utils/web/">Web Utilities</a></div><div class="hide link depth-3"><a href="/v5/api/utils/wordlists/">Wordlists</a></div><div class="hide link depth-2"><a href="/v5/api/other/">Other Libraries</a></div><div class="hide link depth-3"><a href="/v5/api/other/assembly/">Assembly</a></div><div class="hide link depth-4"><a href="/v5/api/other/assembly/dialect/">Ethers ASM Dialect</a></div><div class="hide link depth-4"><a href="/v5/api/other/assembly/api/">Utilities</a></div><div class="hide link depth-4"><a href="/v5/api/other/assembly/ast/
2020-09-08 08:12:15 +03:00
</div></div>
2020-11-23 07:07:13 +03:00
<div class="footer">
<a href="/v5/single-page/">Single Page</a>
</div>
2020-09-08 08:12:15 +03:00
</div>
<div class="content">
<div class="breadcrumbs"><a href="/v5/">Documentation</a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<a href="/v5/cookbook/">Cookbook</a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<span class="current">React Native (and ilk)</span></div>
<a name="cookbook-reactnative"></a><a name="cookbook-reactnative"></a><h1 class="show-anchors"><div>React Native (and ilk)<div class="anchors"><a class="self" href="/v5/cookbook/react-native/#cookbook-reactnative"></a></div></div></h1><p>The <a href="https://reactnative.dev">React Native</a> framework has become quite popular and has many popular forks, such as <a href="https://expo.io">Expo</a>.</p>
<p>React Native is based on <a href="https://developer.apple.com/documentation/javascriptcore?language=objc">JavaScriptCore</a> (part of WebKit) and does not use Node.js or the common Web and DOM APIs. As such, there are many operations missing that a normal web environment or Node.js instance would provide.</p>
<p>For this reason, there is a <a href="https://www.npmjs.com/package/@ethersproject/shims">Shims</a> module provided to fill in the holes.</p>
<a name="cookbook-reactnative-shims"></a><a name="cookbook-reactnative--cookbook-reactnative-shims"></a><h2 class="show-anchors"><div>Installing<div class="anchors"><a class="self" href="/v5/cookbook/react-native/#cookbook-reactnative-shims"></a></div></div></h2><p>To use ethers in React Native, you must either provide shims for the needed missing functionality, or use the ethers.js shim.</p>
2021-02-08 23:26:10 +03:00
<p>It is <b>HIGHLY RECOMMENDED</b> you check out the <a href="/v5/cookbook/react-native/#cookbook-reactnative-security">security section</a> below for instructions on installing packages which can affect the security of your application.</p>
2020-09-08 08:12:15 +03:00
<p>After installing packages, you may need to restart your packager and company.</p>
<div class="code-title"><div>Installing</div></div><div class="code">/home/ricmoo/my-react-project&gt; npm install @ethersproject/shims --save</div><div class="code-title"><div>Importing</div></div><div class="code"><span class="comment">// Pull in the shims (BEFORE importing ethers)
</span>import "@ethersproject/shims"
<span class="comment">// Import the ethers library
</span>import { ethers } from "ethers";
2020-11-23 07:07:13 +03:00
</div><a name="cookbook-reactnative-security"></a><a name="cookbook-reactnative--cookbook-reactnative-security"></a><h2 class="show-anchors"><div>Security<div class="anchors"><a class="self" href="/v5/cookbook/react-native/#cookbook-reactnative-security"></a></div></div></h2><p>The React Native environment does not contain a secure random source, which is used when computing random private keys. This could result in private keys that others could possibly guess, allowing funds to be stolen and assets manipulated.</p>
<p>For this reason, it is <b>HIGHLY RECOMMENDED</b> to also install the <a href="https://www.npmjs.com/package/react-native-get-random-values">React Native get-random-values</a>, which <b>must</b> be included before the shims. If it worked correctly you should not receive any warning in the console regarding missing secure random sources.</p>
2020-09-08 08:12:15 +03:00
2020-11-23 07:07:13 +03:00
<div class="code-title"><div>Importing with Secure Random Sources</div></div><div class="code"><span class="comment">// Import the crypto getRandomValues shim (**BEFORE** the shims)
</span>import "react-native-get-random-values"
2020-09-08 08:12:15 +03:00
2020-11-23 07:07:13 +03:00
<span class="comment">// Import the the ethers shims (**BEFORE** ethers)
</span>import "@ethersproject/shims"
2020-09-08 08:12:15 +03:00
2020-11-23 07:07:13 +03:00
<span class="comment">// Import the ethers library
</span>import { ethers } from "ethers";
</div>
2020-09-08 08:12:15 +03:00
<div class="footer">
<div class="nav previous"><a href="/v5/cookbook/"><span class="arrow">&larr;</span>Cookbook</a></div>
<div class="nav next"><a href="/v5/migration/">Migration Guide<span class="arrow">&rarr;</span></a></div>
</div>
2021-02-08 23:26:10 +03:00
<div class="copyright">The content of this site is licensed under the <a href="https://choosealicense.com/licenses/cc-by-4.0/">Creative Commons License</a>. Generated on February 8, 2021, 3:25pm.</div>
2020-09-08 08:12:15 +03:00
</div>
<script src="/v5/static/script.js" type="text/javascript"></script>
2020-11-23 07:07:13 +03:00
<!--EXTRASCRIPT-->
2020-09-08 08:12:15 +03:00
</body>
</html>