Solana Mobile Starter Kit

Welcome to the Solana Mobile Starter Kit. This template is designed to be friendly to web-first teams and have the scaffolding and examples necessary to quickly jump into building dApps for the Solana Mobile ecosystem.

This React Native dApp is only fully functional on Android. This template is based on the work used to build Solend Mobile.

For help getting started with this template, checkout the the #dev-support channel in the Solend Discord.

Features

• Basic routing and navigation via React Navigation with a Wallet drawer
• Tailwind support out of the box (via Native Wind)
• Quick configs to incorporate branding
• A familiar useWallet interface wrapping the Mobile Wallet Adapter for connecting to wallets and signing transactions/messages
• web3.js for constructing transactions and an RPC connection client.
• Anchor TS SDK preinstalled
• Examples for:
  • Airdropping Devnet SOL
  • Signing a messaage
  • Transfering SOL via manual creation of instructions
  • Interacting with a sample Counter program via Anchor

Prerequisites

If you haven't setup a React Native development environment for Android, you'll need to do that first. Follow the Prerequisite Setup Guide.

Follow the guide to make sure you:

• setup your Android and React Native development environment.
• have an Android device or emulator.
• install an MWA compliant wallet app on your device/emulator.

Usage

1. Initialize project template

npx react-native init MySolanaDapp --template https://github.com/solendprotocol/solana-mobile-starter-kit.git

note: An --npm flag is needed if you're using Yarn 3 as a package manager. Once the template is initialized, you can delete the package-lock.json and run yarn install to continue using Yarn 3.

2. Install dependencies

• yarn install or npm install

3. Launch the app on your Android device/emulator

• npx react-native run-android

Configuring

• Logo and Splash screen
  • Generate image sets and replace android/app/src/main/res/drawable-*/splash.png files
• Colors and Typography
  • Configure components/shared/Typography.tsx and colors.js
• configure relative metadata in shared/configs.tsx

Troubleshooting

• flex-gap is behaving weirdly in child components
  • This is a known issue in Nativewind. Attempt the workarounds here.

• TypeError: cli.init is not a function
  • This during template initialization means you have an old version of React Native CLI. This template only works with the new CLI. You can uninstall and reinstall it as directed here.

• error Failed to load configuration of your project.
  • Same as above, but for yarn. Uninstall and reinstall the CLI through yarn.

• Looks like your iOS environment is not properly set:
  • You can ignore this during template initialization and build the Android app as normal. This template is only compatible with Android.

• error Couldn't find the ".../@solana-mobile/solana-mobile-dapp-scaffold/template.config.js file inside "..." template.
  • This is a known error that occurs with certain versions of yarn (>= 3.5.0). It is fixed by running the cli command with the --npm flag or downgrading your version of yarn.