What you will learn
How to import an Anchor Program into a React Native project
How to create an Anchor Wallet and Provider with Mobile Wallet Adapter
How to sign and submit transactions with an Anchor Program IDL
How to generate instructions with an Anchor Program IDL
Prerequisites
Installation
Add the Anchor library to your React Native Project:
CAUTION React Native apps should use Anchor v0.28.0 because later versions of the library have a polyfill issue on React Native.
yarn add @coral-xyz/anchor@0.28.0
Create an Anchor Wallet with Mobile Wallet Adapter
TIP The Anchor Counter Program example app shows how to create an Anchor wallet that is integrated
with a more complex state management framework.
To create an AnchorWallet, use Mobile Wallet Adapter transact to implement the required signing functions.
A simple implementation:
import * as anchor from "@coral-xyz/anchor" ;
import {
transact ,
Web3MobileWallet ,
} from "@solana-mobile/mobile-wallet-adapter-protocol-web3js" ;
const anchorWallet = useMemo (() => {
return {
signTransaction : async ( transaction : Transaction ) => {
return transact ( async ( wallet : Web3MobileWallet ) => {
const authorizationResult = await wallet . authorize ({
cluster: RPC_ENDPOINT ,
identity: APP_IDENTITY ,
}));
const signedTransactions = await wallet . signTransactions ({
transactions: [ transaction ],
});
return signedTransactions [ 0 ];
});
},
signAllTransactions : async ( transactions : Transaction []) => {
return transact ( async ( wallet : Web3MobileWallet ) => {
const authorizationResult = await wallet . authorize ({
cluster: RPC_ENDPOINT ,
identity: APP_IDENTITY ,
}));
const signedTransactions = await wallet . signTransactions ({
transactions: transactions ,
});
return signedTransactions ;
});
},
get publicKey () {
return userPubKey ;
},
} as anchor . Wallet ;
}, []);
See all 39 lines
Importing an Anchor Program in Typescript
Generating an Anchor Program IDL
If you have an Anchor project in your local workspace, build the program and generate the Typescript IDL with:
If the Anchor program is already deployed and you know its address, you can use the Anchor CLI to fetch it:
anchor idl fetch GrAkKfEpTKQuVHG2Y97Y2FF4i7y7Q5AHLK94JBy7Y5yv
Instantiate your Anchor Program
Once your IDL has been generated, you can import it and create an instance of your Program in Typescript.
Import your generated IDL file, in this case from /target/types/basic_counter.ts
Use the anchorWallet from the previous step to create an AnchorProvider.
import { BasicCounter as BasicCounterProgram } from "../../basic-counter/target/types/basic_counter" ;
import { AnchorProvider , Program } from "@coral-xyz/anchor" ;
const COUNTER_PROGRAM_ID = "ADraQ2ENAbVoVZhvH5SPxWPsF2hH5YmFcgx61TafHuwu" ;
// Address of the devnet-deployed Counter Program
const counterProgramId = useMemo (() => {
return new PublicKey ( COUNTER_PROGRAM_ID );
}, []);
// Create an AnchorProvider with the anchorWallet.
const provider = useMemo (() => {
if ( ! anchorWallet ) {
return null ;
}
return new AnchorProvider ( connection , anchorWallet , {
preflightCommitment: "confirmed" ,
commitment: "processed" ,
});
}, [ anchorWallet , connection ]);
// Create an instance of your Program.
const counterProgram = useMemo (() => {
if ( ! provider ) {
return null ;
}
return new Program < BasicCounterProgram >(
idl as BasicCounterProgram ,
counterProgramId ,
provider
);
}, [ counterProgramId , provider ]);
See all 33 lines
Sign transactions manually with Mobile Wallet Adapter
With an instantiated Program, you can:
Generate serialized program instructions.
Construct a Transaction with the generated instructions.
Manually sign the Transaction with Mobile Wallet Adapter.
In the following example, we generate an incrementInstruction from the program then sign it within a Mobile Wallet Adapter
session.
const { counterProgram , counterPDA } = useCounterProgram ();
const signIncrementTransaction = async () => {
return await transact ( async ( wallet : Web3MobileWallet ) => {
const authorizationResult = wallet . authorize ({
cluster: RPC_ENDPOINT ,
identity: APP_IDENTITY ,
}));
const latestBlockhash = await connection . getLatestBlockhash ();
// Generate the increment ix from the Anchor program
const incrementInstruction = await counterProgram . methods
. increment ( new anchor . BN ( amount ))
. accounts ({
counter: counterPDA ,
})
. instruction ();
// Build a transaction containing the instruction
const incrementTransaction = new Transaction ({
... latestBlockhash ,
feePayer: authorizationResult . publicKey ,
}). add ( incrementInstruction );
// Sign a transaction and receive
const signedTransactions = await wallet . signTransactions ({
transactions: [ incrementTransaction ],
});
return signedTransactions [ 0 ];
});
}
See all 33 lines
This approach is flexible and allows you to fully utilize the Mobile Wallet Adapter session.
Sign transactions using a Mobile Wallet Adapter signer
With an instantiated Program, you can also use the Anchor provided rpc() function to sign and submit an Anchor transaction to an RPC.
const { counterProgram , counterPDA } = useCounterProgram ();
const incrementCounter = async () => {
// Submit an increment transaction to the RPC endpoint
const signature = await counterProgram . methods
. increment ( new anchor . BN ( amount ))
. accounts ({
counter: counterPDA ,
})
. rpc ();
return signature ;
};
See all 13 lines
Calling the rpc() will generate and sign the transaction using the interface methods (signTransaction, signAllTransactions) of the Anchor Wallet that the program was instantiated with.
Generating Clients with Codama
Use Codama to generate TypeScript client code from your Anchor IDL.
1. Ensure your Anchor IDL exists
This should produce an IDL under target/idl/....
Place the file where your codama.json points (example below uses program/idl.json).
2. Install dependencies
npm install -D codama @codama/renderers-js
3. Add codama.json (project root)
{
"idl" : "program/idl.json" ,
"before" : [],
"scripts" : {
"js" : {
"from" : "@codama/renderers-js" ,
"args" : [ "src/generated/your-program" ]
}
}
}
Why these fields exist:
idl: Tells Codama which Anchor IDL file to read.
scripts.js.from: Tells Codama which renderer to run (TypeScript/JS client renderer).
scripts.js.args: Renderer arguments. For @codama/renderers-js, the first value is the output directory for generated files.
before: Optional transform pipeline before rendering (empty here).
4. Generate code
5. Output structure
Generated files are written to the output directory set in scripts.js.args.
With the config above:
src/generated/your-program/
accounts/
instructions/
programs/
types/
errors/