React Native Quickstart
Learn how to create a React Native app with Expo and initialize it with the Okto SDK, including setting up authentication and executing your first token transfer.
Quick Start Template Available!
Skip the manual setup and get started in minutes with our template repository. It includes pre-configured Okto SDK integration, authentication setup, and example components and operations.
Before you begin, set up your developer dashboard by making sure you have :
- Created your Okto Developer Dashboard account
- Get your Okto credits from the dashboard
- Obtained your API keys from the dashboard
- Enabled the specific Chains and Tokens you plan to use in your application
- Optional: Enabled Sponsorship for the desired chains
If you need help, reach out to us on our troubleshooting form and we will contact you.
Prerequisites
Before getting started, ensure you have the following:
- Node.js (v18+) and npm/pnpm/yarn: Download Node.js
- Okto API Keys: You need your
CLIENT_PRIVATE_KEY
andCLIENT_SWA
. Obtain these from the Okto Dashboard. - Google OAuth Credentials: Create OAuth 2.0 credentials in the Google Cloud Console
You'll need to set up OAuth 2.0 credentials in the Google Cloud Console:
- For Web & Expo Go: Web Client Setup
- For iOS: iOS Setup
- For Android: Android Setup
Initialize an Expo App
Create a new Expo project:
Resolving 'Buffer' doesn't exist error
To resolve the Buffer error in React Native, follow these steps:
- Install the buffer package:
- Add this line to your
app/_layout.tsx
file (or any other entry point of your app):
This makes the Buffer object available globally in your React Native application.
Install Dependencies
Install the required packages. Note that expo-auth-session
and expo-web-browser
handle the OAuth flow for Google authentication:
Set Up Okto Provider
Initialize the Okto SDK by wrapping your app with OktoProvider. This provides the SDK context throughout your app:
Implement Authentication
Create the authentication screen in app/(tabs)/index.tsx
:
You'll need to set up OAuth 2.0 credentials in the Google Cloud Console:
- For Web & Expo Go: Web Client Setup
- For iOS: iOS Setup
- For Android: Android Setup
Get User Details and Portfolio
Create a new file app/(tabs)/HomeScreen.tsx
to fetch and display user's accounts and portfolio. This demonstrates basic SDK data retrieval:
Run Your App
Start your Expo app:
This will open the Expo development server. You can run your app on:
- iOS Simulator
- Android Emulator
- Physical device using Expo Go app
- Web browser
Congratulations!
🎉 Your basic Okto integration is now complete! You're ready to explore more features and implement additional functionality.
Trying Out a User Operation
Let's implement a token transfer on Polygon Testnet Amoy to understand how user operations work in Okto.
2. Fund Your Wallet
Add funds to your wallet using the Polygon Amoy Faucet.
4. Verify The Transfer
After the transfer is complete, you can verify it through:
- The
getPortfolio
method to check your updated balance - The Polygon Amoy Explorer using the transaction hash which can be fetched using the
getOrdersHistory
method using thejobId
.
Now that you've completed your first user operation, you're ready to explore more advanced features! Check out our Usage Guide to learn about other operations like NFT transfers, contract interactions, and more.
For more examples and advanced usage, check out the Template Repo.
SDK Reference
Get Commands
Command | Description | Documentation |
---|---|---|
const account = await getAccount(oktoClient); | Get user's wallet details | Method Overview |
const chains = await getChains(oktoClient); | List supported blockchain networks | Method Overview |
const tokens = await getTokens(oktoClient); | List supported tokens | Method Overview |
const portfolio = await getPortfolio(oktoClient); | Get user's token holdings | Method Overview |
const nfts = await getPortfolioNFT(oktoClient); | Get user's NFT holdings | Method Overview |
const activity = await getPortfolioActivity(oktoClient); | Get transaction history | Method Overview |
const orders = await getOrdersHistory(oktoClient); | Get transaction order history | Method Overview |
const collections = await getNftCollections(oktoClient); | Get NFT collections | Method Overview |
User Operations (Intents)
Intents are pre-built action templates within the Okto SDK that simplify common Web3 tasks. They provide one-liner functions for complex blockchain interactions.
1. Token Transfer
Send tokens to another address. Learn more
2. NFT Transfer
Transfer NFTs between addresses. Learn more
3. Raw Transaction (EVM)
Execute custom EVM contract calls. Learn more
Quick Start Template Available!
Skip the manual setup and get started in minutes with our template repository. It includes pre-configured Okto SDK integration, authentication setup, and example components and operations.
Additional Resources
Need help? Join our Discord community or email us at [email protected]
.