React Native Mobile Dapp on XION in 5 Minutes
Last updated
Was this helpful?
Last updated
Was this helpful?
Building a Mobile Dapp on XION typically involves three main components:
Smart contract – Contains the core business logic of your Dapp.
Treasury contract – Enables gasless transactions using Fee Grants, making onboarding smoother for users. It also handles Authorization Grants, which allow your frontend to execute transactions on behalf of the user, enabling a more Web2-like experience through our OAuth2-style Abstraxion solution.
Mobile Frontend – This is your Dapp’s interface, used to display data and trigger transactions via the smart contract.
As a beginner to XION development, getting a fully functional Dapp up and running should be simple and shouldn’t require any complex setup. With this in mind, we’ve created a that handles the creation of both the User Map and Treasury contracts with the Treasury contract being fully configured. We've also created a fully functional for interacting with the User Map contract.
The User Map contract is a lightweight and beginner friendly smart contract designed to help developers, especially those coming from traditional web or application development, understand how to manage per-user data in a decentralized environment.
Think of it like a basic key-value store:
Key: User's wallet address
Value: A JSON object (e.g., user profile, preferences, settings)
Before you begin, ensure you have the following installed:
Android Emulator, iOS Simulator or a physical device for testing
Click the Launch User Map & Fund Treasury button
Behind the scenes, this:
Instantiates your User Map contract
Deploys a Treasury contract with a configured Fee Grant to enable gasless transactions and also Authorization Grants for users to give the Mobile dapp approval to interact with the User Map contract on their behalf
Funds the Treasury contract to pay transaction fees for users via the Fee Grant
These 4 environment variables will be generated which will you will need to add to the Mobile Dapp config constants:
The Mobile Dapp will allow users to log in using their Meta Account via multiple authenticators (Email, Social Login, Wallets, Passkeys). Once logged in, users can query contract data and execute transactions to update their User Map record, which is linked to their Meta Account address.
To run the mobile dapp in either the iOS Simulator or Android Emulator, execute the following commands in your terminal:
Open constants/Config.ts and replace the placeholder values with the corresponding environment variables from your launcher. Use the comments as a guide to match each variable correctly:
Make sure each field is updated with the correct value to ensure proper contract interaction.
Install the dependencies by executing the following:
To build and run the dapp, ensure your emulator, simulator, or physical device is running. Then, use one of the following commands based on your target platform to launch the Dapp:
You should see something like the following:
Once logged in you should see something like the following:
You can find the source code here: .
Compiling and instantiating smart contracts can feel like huge tasks, especially for new developers. You typically need to set up your development environment with tools like Docker and xiond, and go through the full process of compiling, deploying, and instantiating your contracts manually. On top of that, creating and configuring a Treasury contract via the can be overwhelming if you're just getting started.
To make this much easier, we’ve created a for this User Map Dapp that takes care of all the heavy lifting, so you can skip the setup pain and focus on experimenting with a real, working Mobile dapp.
Go to and log in using your Meta Account
