aerosync-react-native-sdk
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

aerosync-react-native-sdk

This React Native SDK provides an interface to load Aerosync-UI in React Native application. Securely link your bank account through your bank’s website. Log in with a fast, secure, and tokenized connection. Your information is never shared or sold.

1. Install and Link Aerosync React Native SDK

Install the aerosync-react-native-sdk library along with its required peer dependency, react-native-webview:

npm install aerosync-react-native-sdk react-native-webview

Note: react-native-webview is a required peer dependency for aerosync-react-native-sdk.

iOS Setup

  1. Navigate to the ios directory and install CocoaPods dependencies: cd ios pod install

  2. Ensure your iOS deployment target is 11.0 or higher.

Android Setup

  1. Make sure the following permission is added to your AndroidManifest.xml, if required: <uses-permission android:name="android.permission.INTERNET" />

  2. Autolinking should handle the native module setup automatically—no manual changes needed.

2. Minimal example to implement Aerosync React Native Sdk

import {
  AeroSyncWidget,
  SuccessEventType,
  WidgetEventType,
} from "aerosync-react-native-sdk";

import { SafeAreaView, ScrollView, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import Toast from "react-native-toast-message";
import Modal from 'react-native-modal';
import { useStore } from "../context/StoreContext";
import { useThemeContext } from "../context/ThemeContext";
import { Button } from "react-native-paper";

export default function PaymentScreen() {
  const { widgetConfig } = useStore();
  const { isDarkTheme } = useThemeContext();

  // State to control whether the widge is shown
  const [isWidgetEnabled, setIsWidgetEnabled] = useState(false);

  // Determine widget theme based on app theme
  const currentTheme = isDarkTheme ? 'dark' : 'light';

  // Deeplink scheme used for routing back from external services
  const DEEP_LINK = 'syncroVibeReactCli://';

  // --- Callback: Widget loaded successfully
  const onWidgetLoad = () => {
    console.log('Widget loaded');
  };

  // --- Callback: Widget was closed (either manually or automatically)
  const onWidgetClose = () => {
    console.log('Widget closed');
    setIsWidgetEnabled(false);  // Hide widget modal
  };

  // --- Callback: User successfully linked their bank and widget closed
  const onWidgetSuccess = (event: SuccessEventType) => {
    console.log('Bank linking successful', event);
    setIsWidgetEnabled(false);  // Hide widget modal

    // Show a toast to inform the user of success(optional)
    Toast.show({
      type: 'success',
      text1: 'Bank linked successfully!',
    });
  };

  // --- Callback: Fired on every widget event
  const onWidgetEvent = (event: WidgetEventType) => {
    console.log('Widget event:', event);
  };

  // --- Callback: Widget encountered an error
  const onWidgetError = (event: string) => {
    console.log('Widget error:', event);
  };

  const showWidget = () =>  {
    setIsWidgetEnabled(true)
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>

      {/*
  			Full-screen modal to display the AeroSync widget to link a bank.
  			This modal is optional — you can customize or replace it with your own
        layout/styling as needed.
			*/}
      <Modal
        style={styles.modal}
        isVisible={isWidgetEnabled}
        propagateSwipe
        animationIn="slideInUp"
        animationOut="slideOutDown"
        animationInTiming={600}
        animationOutTiming={600}
      >
        {/* AeroSync Widget: bank linking process */}
        <AeroSyncWidget
          onLoad={onWidgetLoad}
          onError={onWidgetError}
          onClose={onWidgetClose}
          onEvent={onWidgetEvent}
          onSuccess={onWidgetSuccess}
          token={widgetConfig?.token!}
          deeplink={DEEP_LINK}
          theme={currentTheme}
          consumerId={widgetConfig?.configurationId}
          environment={widgetConfig?.environment!}
          customWebViewProps={{
            style: { marginTop: 30, backgroundColor: isDarkTheme ? '#000000' : '#FFFFFF' }
          }}
        />
      </Modal>

      {/* Main content area */}
      <ScrollView>
        <View style={styles.container}>
          <Text style={styles.title}>Select a payment method</Text>
          <Button mode="contained"  style={styles.linkButton} onPress={showWidget}>
                Link new bank
          </Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'flex-start',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  linkButton: {
    marginBottom: 20,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: 60,
    backgroundColor: '#80bfff'
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
});

Readme.io document

For more information check the comlete guide here: https://api-aeropay.readme.io/docs/react-native-sdk

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


This project is licensed under the MIT License.

Package Sidebar

Install

npm i aerosync-react-native-sdk

Weekly Downloads

952

Version

3.0.2

License

MIT

Unpacked Size

59.3 kB

Total Files

58

Last publish

Collaborators

  • aerosync-bank-link
  • cory-from-aeropay