React Native에서 ethers.js 라이브러리 설정하기

  • ethers를 비롯하여 필요한 라이브러리를 설치한다.
 npm i ethers @ethersproject/shims react-native-get-random-values
  • 타입스크립트를 사용할 때
 npm i ethers @ethersproject/shims react-native-get-random-values @types/react-native-get-random-values
import React, {useState} from 'react';
import {Button, SafeAreaView, Text, View} from 'react-native';

import 'react-native-get-random-values';
import '@ethersproject/shims';
import {ethers} from 'ethers';

const App = () => {
  const [wallet, setWallet] = useState<any>();
  const onCreateRandomWallet = () => {
    const randomWallet = ethers.Wallet.createRandom();
    setWallet(randomWallet);
  };
  return (
    <SafeAreaView>
      <View>
        <Text>Test ethers</Text>
        <Button title="get random wallet" onPress={onCreateRandomWallet} />
        <Text>address - {wallet?.address}</Text>
        <Text>mnemonic - {wallet?.mnemonic?.phrase}</Text>
        <Text>privateKey - {wallet?.privateKey}</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

 

  • React Native 환경은 기존의 node.js 환경과는 다르다.
  • 때문에, node에서 기본적으로 제공되는 기능을 사용하기 위해서 추가적으로 설정이 필요한 듯 하다.
  • 이더리움 블록체인을 사용할 수 있게 돕는 ethers.js 라이브러리는 이 기능들을 내부적으로 사용하기에 추가적인 설정이 필요하다.
  • 다행히, 공식문에서에서 알리고 있듯이 미리 준비된 라이브러리를 설치하고 불러와 간단하게 이 설정을 끝마칠 수 있다.

 

https://docs.ethers.org/v5/cookbook/react-native/

 

React Native (and ilk)

Documentation for ethers, a complete, tiny and simple Ethereum library.

docs.ethers.org

 

  • web3를 사용할 때도 @ethersproject/shims react-native-get-random-values 두 라이브러리를 사용하여 설정할 수 있다.
  • ethers를 설정하는 법과 마찬가지로 web3또한 사용이 가능하다.