This section covers adding blinks directly to your React Native dApp through our React Native SDK for Blinks. The SDK is completely open-source and can be found on our GitHub.
The following imports are needed to simplify the Blink integration:
useAction hook and ActionAdapter type from @dialectlabs/blinks
Blink component from @dialectlabs/blinks-react-native
Basic Usage
A getWalletAdapter function has to be defined to generate an ActionAdapter for interactions with user wallets, like wallet connect and signing transactions through the React Native dApp.
After that, the <Blink /> component can be used in the React Native dApp to render the Blink. It takes the following props:
theme - has the styling for the blink to be rendered;
action - object returned from useAction function (which requires the adapter from getWalletAdapter and Action URL);
websiteUrl - the complete URL of the Action;
websiteText - the domain name of the Action URL;
import { useAction, type ActionAdapter } from '@dialectlabs/blinks';
import { Blink } from '@dialectlabs/blinks-react-native';
import { PublicKey } from '@solana/web3.js';
import type React from 'react';
function getWalletAdapter(): ActionAdapter {
return {
connect: async (_context) => {
console.log('connect');
return PublicKey.default.toString();
},
signTransaction: async (_tx, _context) => {
console.log('signTransaction');
return {
signature: 'signature',
};
},
confirmTransaction: async (_signature, _context) => {
console.log('confirmTransaction');
},
};
}
export const BlinkInTheWalletIntegrationExample: React.FC<{
url: string; // could be action api or website url
}> = ({ url }) => {
const adapter = getWalletAdapter();
const { action } = useAction({ url });
if (!action) {
// return placeholder component
}
const actionUrl = new URL(url);
return (
<Blink
theme={{
'--blink-button': '#1D9BF0',
'--blink-border-radius-rounded-button': 9999,
// and any other custom styles
}}
action={action}
adapter={adapter}
websiteUrl={actionUrl.href}
websiteText={actionUrl.hostname}
/>
);
};
Customize Blink Styles
The blink styles can be customized by passing a theme prop to the Blink component. The theme object can contain any of the following properties:
