Skip to content

Commit

Permalink
move RN before Expo
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexandratran
alexandratran committed Dec 11, 2023
1 parent 64be69f commit 4bba95c
Showing 1 changed file with 52 additions and 50 deletions.
102 changes: 52 additions & 50 deletions wallet/how-to/connect/set-up-sdk/javascript/react-native.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
sidebar_label: Expo and React Native
sidebar_label: React Native and Expo
sidebar_position: 4
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Use MetaMask SDK with Expo and React Native
# Use MetaMask SDK with React Native and Expo

Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your Expo or React Native dapp to
Import [MetaMask SDK](../../../../concepts/sdk/index.md) into your React Native or Expo dapp to
enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile.

## Prerequisites
Expand All @@ -20,20 +20,20 @@ enable your users to easily connect to the MetaMask browser extension and MetaMa

### 1. Create a new project

Create a new Expo or React Native project using the following commands:
Create a new React Native or Expo project using the following commands:

<Tabs>
<TabItem value="Expo">
<TabItem value="React Native">

```bash
npx create-expo-app devexpo --template
npx react-native@latest init MyProject
```

</TabItem>
<TabItem value="React Native">
<TabItem value="Expo">

```bash
npx react-native@latest init MyProject
npx create-expo-app devexpo --template
```

</TabItem>
Expand All @@ -44,17 +44,17 @@ Create a new Expo or React Native project using the following commands:
Install the SDK and its dependencies using the following commands:

<Tabs>
<TabItem value="Expo">
<TabItem value="React Native">

```bash
npx expo install expo-crypto @metamask/sdk-react ethers@5.7.2 @react-native-async-storage/async-storage node-libs-expo react-native-background-timer react-native-randombytes react-native-url-polyfill react-native-get-random-values@1.8.0
npm install eciesjs @metamask/sdk-react ethers@5.7.2 @react-native-async-storage/async-storage node-libs-react-native react-native-background-timer react-native-randombytes react-native-url-polyfill react-native-get-random-values
```

</TabItem>
<TabItem value="React Native">
<TabItem value="Expo">

```bash
npm install eciesjs @metamask/sdk-react ethers@5.7.2 @react-native-async-storage/async-storage node-libs-react-native react-native-background-timer react-native-randombytes react-native-url-polyfill react-native-get-random-values
npx expo install expo-crypto @metamask/sdk-react ethers@5.7.2 @react-native-async-storage/async-storage node-libs-expo react-native-background-timer react-native-randombytes react-native-url-polyfill react-native-get-random-values@1.8.0
```

</TabItem>
Expand All @@ -68,29 +68,9 @@ If you're using Expo, run the following command to create a default Metro config
npx expo customize metro.config.js
```

In Expo or React Native, update the default Metro configuration file to the following:
In React Native or Expo, update the default Metro configuration file to the following:

<Tabs>
<TabItem value="Expo">

```javascript title="metro.config.js"
const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
...require("node-libs-expo"),
};

config.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
});

module.exports = config;
```

</TabItem>
<TabItem value="React Native">

```javascript title="metro.config.js"
Expand Down Expand Up @@ -120,27 +100,47 @@ In Expo or React Native, update the default Metro configuration file to the foll
module.exports = mergeConfig(defaultConfig, config);
```

</TabItem>
<TabItem value="Expo">

```javascript title="metro.config.js"
const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
...require("node-libs-expo"),
};

config.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
});

module.exports = config;
```

</TabItem>
</Tabs>

### 4. Add import statements

Add the following import statements to the Expo or React Native entry file:
Add the following import statements to the React Native or Expo entry file:

<Tabs>
<TabItem value="Expo">
<TabItem value="React Native">

```javascript title="App.tsx"
import "node-libs-expo/globals";
```javascript title="index.js or App.tsx"
import "node-libs-react-native/globals";
import "react-native-url-polyfill/auto";
import "react-native-get-random-values";
```

</TabItem>
<TabItem value="React Native">
<TabItem value="Expo">

```javascript title="index.js or App.tsx"
import "node-libs-react-native/globals";
```javascript title="App.tsx"
import "node-libs-expo/globals";
import "react-native-url-polyfill/auto";
import "react-native-get-random-values";
```
Expand All @@ -156,32 +156,34 @@ If you're using Expo, prebuild the project using the following command:
npx expo prebuild
```

React Native doesn't require prebuilding.

### 6. Run the project

Run the Expo or React Native project on Android or iOS using the following commands:
Run the React Native or Expo project on Android or iOS using the following commands:

<Tabs>
<TabItem value="Expo">
<TabItem value="React Native">

```bash
npx expo run:android
npx expo run:ios
npx react-native run-android
npx react-native run-ios
```

</TabItem>
<TabItem value="React Native">
<TabItem value="Expo">

```bash
npx react-native run-android
npx react-native run-ios
npx expo run:android
npx expo run:ios
```

</TabItem>
</Tabs>

### 7. Use the SDK

Initialize and use the SDK in your Expo or React Native project using the `useSDK` hook.
Initialize and use the SDK in your React Native or Expo project using the `useSDK` hook.
The following code snippets demonstrate how to use the hook.

Import the hook:
Expand Down Expand Up @@ -229,6 +231,6 @@ const disconnectWallet = async () => {

## Examples

See the [example Expo dapp](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples/expo-demo)
and the [example React Native dapp](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples/reactNativeDemo)
See the [example React Native dapp](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples/reactNativeDemo)
and the [example Expo dapp](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples/expo-demo)
in the JavaScript SDK GitHub repository for more detailed implementations.

0 comments on commit 4bba95c

Please sign in to comment.