Contact Us

React Native

This guide will help you integrate the ReadyRemitSDK into your React Native projects.

Suggest Edits

The ReadyRemitSDK is compatible with React Native versions 0.65 to 0.71.

Step 1 - Providing an Auth Token to ReadyRemit SDK

To ensure a successful launch, ReadyRemit SDK requires an auth token. Your server must retrieve this token and provide it to your application (for more information on backend integration, refer to the SDK Getting Started Guide).

You can include the following event handler code in your React Native application:

import { useEffect } from 'react';
import { NativeModules, NativeEventEmitter } from 'react-native';
const { ReadyRemitModule } = NativeModules;

const eventEmitter = new NativeEventEmitter(ReadyRemitModule);

useEffect(() => {
  eventEmitter.addListener("READYREMIT_AUTH_TOKEN_REQUESTED", () => {
    // TODO: Fetch an auth token from your server
    ReadyRemitModule.setAuthToken("", null);
  });

  return function cleanup() {
    eventEmitter.removeAllListeners("READYREMIT_AUTH_TOKEN_REQUESTED");
  }
}, []);

Step 2 - Submitting the Final Transfer

For security purposes, your server will handle the final submission of the transfer. The ReadyRemit SDK will provide your application with a transfer payload, which should then be sent to your server. The server will return a transfer ID.

🚧

Warning: potential transfer duplication

This listener should only be added to the emitter one time for the life of the application. Be aware of component refreshes that might re-add the listener. An alternative is to remove the listener using. If multiple listeners exist at the same time, a transfer could potentially be submitted multiple times.

Add the following event handler code to your React Native application:

import { useEffect } from 'react';
import { NativeModules, NativeEventEmitter } from 'react-native';
const { ReadyRemitModule } = NativeModules;

useEffect(() => {
  eventEmitter.addListener("READYREMIT_TRANSFER_SUBMITTED", (request) => {
    // TODO: Fetch a transferId from your server
    ReadyRemitModule.setTransferId("", "", "");
  });

  return function cleanup() {
    eventEmitter.removeAllListeners("READYREMIT_TRANSFER_SUBMITTED");
  }
}, []);

Step 3 - Launching the ReadyRemit SDK

You can launch the ReadyRemit SDK in response to a user event such as pressing a "Send Money" button in your application.

Use the following code to launch the ReadyRemit SDK:

import { NativeModules } from 'react-native';
const { ReadyRemitModule } = NativeModules;

const readyRemitEnvironment = 'SANDBOX'; // Options are 'SANDBOX' or 'PRODUCTION'
const readyRemitLanguage = 'en-US'; // Options are 'en-US' or 'es-MX'

const styles = {
  fonts: {
    default: { family: 'luminari' }
  }
}

ReadyRemitModule.launch(readyRemitEnvironment, readyRemitLanguage, styles);

(Optional) Subscribing to the SDK Closed Event

The ReadyRemit SDK will fire an event when the SDK flow completes, indicating that the flow is complete and the SDK has closed. If desired, you can consume this event and respond accordingly by adding the following code to your React Native application:

useEffect(() => {
    eventEmitter.addListener("SDK_CLOSED", () => {
      // TODO: perform some action on SDK closed
    });
  
  	eventEmitter.addListener("SDK_LAUNCHED", () => {
      //TODO: perfom some action on SDK Opened
    });
  
    return function cleanup() {
      eventEmitter.removeAllListeners("SDK_CLOSED");
      eventEmitter.removeAllListeners("SDK_LAUNCHED");
    }
}, []);

After following these steps, you should now have the ReadyRemit SDK integrated into your React Native application. However, please remember that this is only part of the process. You will still need to carry out specific platform-based configurations for iOS and Android. For more details on these, please refer to the respective sections of the ReadyRemit SDK documentation. If you encounter any issues, don't hesitate to seek additional assistance from the documentation or the ReadyRemit support team.

(Optional) Style the ReadyRemit SDK - iOS

You can style the SDK following this example

const readyRemitStyles = {
    colors: {
      background: { lightHex: "#F3F4F6", darkHex: "#111111" },
      foreground: { lightHex: "#FFFFFF", darkHex: "#1F1F1F" },
      buttonText: { lightHex: "#FFFFFF", darkHex: "#FFFFFF" },
      buttonColor: { lightHex: "#2563EB", darkHex: "#558CF4" },
      danger: { lightHex: "#AA220F", darkHex: "#AA220F" },
      dangerLight: { lightHex: "#ECDFDF", darkHex: "#201311" },
      success: { lightHex: "#008761", darkHex: "#008761" },
      divider: { lightHex: "#E2E2E2", darkHex: "#313131" },
      inputLine: { lightHex: "#858585", darkHex: "#505050" },
      icon: { lightHex: "#444444", darkHex: "#7E7E7E" },
      primary: { lightHex: "#2563EB", darkHex: "#558CF4" },
      primaryLight: { lightHex: "#6B8DD6", darkHex: "#83ACF7" },
      text: { lightHex: "#0E0F0C", darkHex: "#E3E3E3" },
      textSecondary: { lightHex: "#454545", darkHex: "#B0B0B0" },
    },
    fonts: {
      default: { family: 'SF Pro Text' }
    }
  }

Updated 3 months ago

What’s Next