Scaffold a React Native (Expo) app with Phantom React Native SDK for mobile wallet integration, including polyfills and deep linking
npxskills add phantom/phantom-connect-cursor-plugin--skill setup-react-native-appLoading…
npx expo install @phantom/react-native-sdk react-native-get-random-values @expo/browser expo-web-browser expo-crypto
In your app's entry file (e.g. App.tsx or index.ts), add this as the very first import:
import "react-native-get-random-values"; // MUST be the first import
import { PhantomProvider } from "@phantom/react-native-sdk";
// ... other imports
This is non-negotiable. The polyfill must execute before any other code that uses crypto.
app.jsonAdd the custom URL scheme and required plugins:
{
"expo": {
"scheme": "your-app-scheme",
"plugins": [
[
"expo-web-browser"
]
]
}
}
import "react-native-get-random-values";
import { PhantomProvider } from "@phantom/react-native-sdk";
export default function App() {
return (
<PhantomProvider
config={{
appId: "your-app-id-from-phantom-portal",
providers: ["google", "apple"],
addressTypes: ["solana"],
scheme: "your-app-scheme",
redirectUrl: "your-app-scheme://callback",
}}
>
<YourApp />
</PhantomProvider>
);
}
Mobile-specific config fields:
scheme — Your app's custom URL scheme, must match app.json.redirectUrl — Deep link URL using your custom scheme for OAuth callbacks.The hooks API is identical to @phantom/react-sdk:
import {
useConnect,
useAccounts,
useDisconnect,
useSolana,
} from "@phantom/react-native-sdk";
function WalletScreen() {
const { connect, isConnected } = useConnect();
const { accounts } = useAccounts();
const { disconnect } = useDisconnect();
const handleConnect = async () => {
try {
await connect();
} catch (error) {
console.error("Connection failed:", error);
}
};
if (!isConnected) {
return <Button title="Connect" onPress={handleConnect} />;
}
const solanaAccount = accounts.find((a) => a.chain === "solana");
return (
<View>
<Text>Address: {solanaAccount?.address}</Text>
<Button title="Disconnect" onPress={disconnect} />
</View>
);
}
react-native-get-random-values MUST be the very first import in your entry file.signAndSendTransaction — signTransaction is NOT supported for embedded wallets.scheme in PhantomProvider config must match the scheme in app.json.appId.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).