|
1 | | -# React Native Adapter |
| 1 | +# Vault SDK |
2 | 2 |
|
3 | | -This package is required to run the thirdweb connect SDK in React Native. |
4 | | - |
5 | | -## Instructions |
6 | | - |
7 | | -### 1. Install the packages |
8 | | - |
9 | | -Using your favorite pacakge manager, install all the require dependencies |
10 | | - |
11 | | -```shell |
12 | | -npx expo install thirdweb @thirdweb-dev/react-native-adapter |
13 | | -``` |
14 | | - |
15 | | -Since react native requires installing native dependencies directly, you also have to install these required peer dependencies: |
16 | | - |
17 | | -```shell |
18 | | -npx expo install react-native-get-random-values @react-native-community/netinfo expo-application @react-native-async-storage/async-storage expo-web-browser expo-linking react-native-aes-gcm-crypto [email protected] amazon-cognito-identity-js @coinbase/wallet-mobile-sdk react-native-mmkv react-native-svg @react-native-clipboard/clipboard |
19 | | -``` |
20 | | - |
21 | | -Here's an explanation of each peer dependency and why its needed: |
22 | | - |
23 | | -``` |
24 | | -// needed for wallet connect |
25 | | -react-native-get-random-values |
26 | | -@react-native-community/netinfo |
27 | | -expo-application |
28 | | -
|
29 | | -// needed wallet connect + in-app wallet |
30 | | -@react-native-async-storage/async-storage |
31 | | -
|
32 | | -// needed for inapp wallet |
33 | | -expo-web-browser // for oauth flows |
34 | | -amazon-cognito-identity-js // for authentication |
35 | | -react-native-aes-gcm-crypto // for encryption |
36 | | -[email protected] //for fast hashing |
37 | | -
|
38 | | -// needed for the prebuilt UIs |
39 | | -react-native-svg |
40 | | -@react-native-clipboard/clipboard |
41 | | -``` |
42 | | - |
43 | | -### 2. Edit your `metro.config.js` |
44 | | - |
45 | | -If you don't already have a `metro.config.file.js` in your project, you can create one by running: |
46 | | - |
47 | | -```shell |
48 | | -npx expo customize metro.config.js |
49 | | -``` |
50 | | - |
51 | | -Then, you need to add 2 properties to the metro resolver: `unstable_enablePackageExports` and `unstable_conditionNames`. This is to tell metro to resolve named `exports` properly. |
52 | | - |
53 | | -```js |
54 | | -// file: metro.config.js |
55 | | - |
56 | | -// Learn more https://docs.expo.io/guides/customizing-metro |
57 | | -const { getDefaultConfig } = require("expo/metro-config"); |
58 | | - |
59 | | -/** @type {import('expo/metro-config').MetroConfig} */ |
60 | | -const config = getDefaultConfig(__dirname); |
61 | | - |
62 | | -// ADD THESE 2 PROPERTIES |
63 | | -config.resolver.unstable_enablePackageExports = true; |
64 | | -config.resolver.unstable_conditionNames = [ |
65 | | - "react-native", |
66 | | - "browser", |
67 | | - "require", |
68 | | -]; |
69 | | - |
70 | | -module.exports = config; |
71 | | -``` |
72 | | - |
73 | | -### 3. Import `@thirdweb-dev/react-native-adapter` at the top of your `App.tsx` |
74 | | - |
75 | | -This will polyfill all the required functionality needed. |
76 | | - |
77 | | -```js |
78 | | -// this needs to be imported before anything else |
79 | | -import "@thirdweb-dev/react-native-adapter"; |
80 | | -// the rest of your app |
81 | | -``` |
82 | | - |
83 | | -If you're using `expo-router`, you need to polyfill before the router entry: |
84 | | - |
85 | | -1. create a `app/index.ts` |
86 | | - |
87 | | -This will be the new entrypoint to your app, ensuring the polyfills happen before any routing. |
88 | | - |
89 | | -```ts |
90 | | -// file: app/index.ts |
91 | | - |
92 | | -// this needs to be imported before expo-router |
93 | | -import "@thirdweb-dev/react-native-adapter"; |
94 | | -import "expo-router/entry"; |
95 | | -``` |
96 | | - |
97 | | -2. Change your main entrypoint in `package.json` |
98 | | - |
99 | | -Now you can replace `expo-router/entry` with `./app/index` as your main entrypoint. |
100 | | - |
101 | | -``` |
102 | | -// file: package.json |
103 | | -
|
104 | | -"main": "./app/index", |
105 | | -``` |
106 | | - |
107 | | -### Additional notes |
108 | | - |
109 | | -1. `react-native-aes-gcm-crypto` requires `minSDK 26` for android, you can edit this in your `build.gradle` file |
110 | | -2. You will get some warnings about unresolved exports, this is normal and will get better as the libraries get updated. |
111 | | - |
112 | | - |
113 | | -### Use the `thirdweb` package in React Native |
114 | | - |
115 | | -Once all the setup above is all done, you can use the most of functionality in the `thirdweb` package out of the box, without having to do any react native specific code. |
116 | | - |
117 | | -This means that you can follow all the React documentation and expect it all to be exactly the same. |
118 | | - |
119 | | -Examples: |
120 | | - |
121 | | -```tsx |
122 | | -import { ThirdwebProvider } form "thirdweb/react"; |
123 | | -``` |
124 | | -
|
125 | | -### Resources |
126 | | -
|
127 | | -- [Full working demo](https://github.com/thirdweb-dev/expo-starter) |
128 | | -- [React docs](https://portal.thirdweb.com/typescript/v5/react) |
129 | | -- [TypeScript docs](https://portal.thirdweb.com/typescript/v5) |
| 3 | +This package contains utilities to interact with Vault, thirdweb's key management servive. |
0 commit comments