React Native Quickstart

The quickest way to start building Solana React Native dApps is to build off a starter template.

There are two starter templates for React Native:

• Expo dApp Template
• React Native dApp Scaffold

tip

Expo is a development platform that simplifies the development, building, and deployment process for React Native.

The SDKs, references, and libraries for React Native are all compatible with Expo!

Quickstart Scaffolds

Expo dApp Template

The Solana Expo dApp Template is a ready-to-go Expo dApp that offers:

• Pre-installed core SDKs like Mobile Wallet Adapter and @solana/web3.js
• Required polyfills like react-native-get-random-values and Buffer installed.
• Simple React UI Components like ConnectWalletButton, RequestAirdropButton, SignMessageButton.

View on GitHub

Prerequisites

• An Expo account.
• React Native and Android Envrionment setup
  • An Android device/emulator.
  • Install an MWA compliant wallet app on your device/emulator.

Usage

Initialization

Initialize the template using Expo's CLI tool:

yarn create expo-app --template @solana-mobile/solana-mobile-expo-template

info

The Expo CLI has issues when using other package managers like npm, npx or pnpm. Until fixed, use yarn to initialize the template app.

Choose your project name then navigate into the directory.

Build and run the app

Follow the "Running the app" section in the Expo Setup guide to launch the template as a custom development build.

Troubleshooting

The package 'solana-mobile-wallet-adapter-protocol' doesn't seem to be linked.

• Make sure you are building and installing an Expo development build NOT Expo Go. Follow the instructions here to build a custom development build.

TS2307: Cannot find module @solana-mobile/mobile-wallet-adapter-protocol or its corresponding type declarations.

• This is a bug/issue when using npm. Until it is fixed, to mitigate, please install the project using yarn install, not npm install.

React Native dApp Scaffold

The React Native dApp Scaffold is a ready-to-go React Native dApp that offers:

• Pre-installed standard SDKs like Mobile Wallet Adapter and @solana/web3.js
• Required polyfills like react-native-get-random-values and Buffer installed.
• Simple React UI Components like ConnectWalletButton, RequestAirdropButton, SignMessageButton.

View on GitHub

Prerequisites

• React Native and Android Envrionment setup
  • An Android device/emulator.
  • Install an MWA compliant wallet app on your device/emulator.

Usage

1. Initialize project template.

npx react-native init MySolanaDapp --template @solana-mobile/solana-mobile-dapp-scaffold --npm

note

The --npm flag is only needed if you're using Yarn 2 or 3 as the default package manager. Once the template is initialized, you can delete the package-lock.json and run yarn install to continue using Yarn.

2. Install dependencies;

• yarn install

3. Launch the app on your Android device/emulator.

• npx react-native run-android

Further learning

To learn how to better use the core Solana React Native SDKs, check out these developer guides.

🌐

JSON RPC Requests

Learn to connect to an RPC endpoint and send JSON RPC Requests to the network.

🔧

Transaction building

Use the Solana `web3.js` Javascript library to construct Solana transactions and instructions.

📱

Mobile Wallet Adapter

Learn how to connect to mobile wallets and request signing services.