To get started with the Meso, you will need a Meso Partner ID which you can request here.

Meso does not yet offer an official library for React Native. However, an example implementation can be found on Github. This example demonstrates rendering Meso’s transfer experience inside of a react-native-webview.

If you have questions contact mailto:support@meso.network.

​
Requirements

To use Meso, you must have a partnerId which you can request here.

​
Usage

You can initialize the transfer experience by rendering the MesoTransfer component:

Setup a transfer
import { MesoTransfer } from "./@meso-network/meso-react-native";

const App = () => {
  return (
    <MesoTransfer
      configuration={{
        partnerId: "YOUR_PARTNER_ID", // Your unique Meso partner ID.
        environment: Environment.SANDBOX, // SANDBOX | PRODUCTION
        sourceAmount: "100", // The amount (in USD) the user will spend
        destinationAsset: Asset.ETH, // The token the user will receive ("ETH" | "SOL" | "USDC")
        network: Network.ETHEREUM_MAINNET, // The network to use for the transfer
        walletAddress: "<WALLET_ADDRESS>", // The user's wallet address obtained at runtime by your application

        onEvent(event) {
          switch (event.kind) {
            case EventKind.TRANSFER_APPROVED:
            case EventKind.TRANSFER_COMPLETE:
              setTransferDetails(event.payload.transfer);
              setShowMeso(false);
            case EventKind.CLOSE:
              setShowMeso(false);
            case EventKind.CONFIGURATION_ERROR:
            case EventKind.UNSUPPORTED_ASSET_ERROR:
            case EventKind.UNSUPPORTED_NETWORK_ERROR:
            case EventKind.ERROR:
              // Handle configuration error
              console.error(event.payload);
              setShowMeso(false);
          }
        },
        async onSignMessageRequest(messageToSign) {
          // Implement your message signing logic here
          // Returning `undefined` signals the user canceled or rejected the request.
          return undefined;
        },
      }}
    />
  );
};

This will render the Meso experience into a WebView into your application. To exit/remove the Meso experience, simply remove it from your component hierarchy.

Initiate a transfer
const App = () => {
  const [showMeso, setShowMeso] = useState(false);

  return (
    <View>
      <Button onPress={() => setShowMeso(true)} />

      {showMeso && <MesoTransfer {...props} />}
    </View>
  );
};

​
Reference

The full reference for the configuration options can be found in the meso-js docs.

​
Testing

See details on environments and testing here.