Fintoc React Native

Use the Fintoc widget within your React Native application as a WebView.

Installation

Install using npm! (or your favourite package manager)

# Using npm
npm install @fintoc/fintoc-react-native

# Using yarn
yarn add @fintoc/fintoc-react-native

Usage

Fintoc React Native exports a single component called FintocWidgetWebView. This is a React Native component that creates the same WebView from the native WebView documentation. To use the WebView, use the following snippet:

import { FintocWebView } from 'fintoc-react-native';

After retrieving the FintocWebView component, you are ready to instantiate the widget:

const options = { ... };

const handlers = {
  onSuccess: () => {
    console.log('SUCCESS');
  },
  onExit: () => {
    console.log('EXIT');
  },
};

export default function FintocWidgetScreen() {
  return (
    <View>
      <FintocWebView options={options} handlers={handlers} />
    </View>
  );
}

Here, options corresponds to an object with the parameters received by the widget (you can read more about these parameters here), and handlers corresponds to an object with the WebView redirections detailed here.

Notice that on close the WebView must be unmounted. This is because the widget won’t re-open if the WebView isn’t re-rendered, so I would recommend unmounting the component on the onClose method of the WebView.

TypeScript support

This package includes TypeScript declarations for the Fintoc WebView.

Developing

To develop the package, you need to use npm. Install the dependencies:

npm install

To test locally, I recommend packaging the app:

npm pack

This will create a fintoc-react-native-0.3.1.tgz file (with the corresponding package version). Now, go to another directory and create a React Native app (using Expo, perhaps). After createing the new application, add the following dependency to its package.json file:

{
  "dependencies": {
    ...,
    "fintoc-react-native": "file:./path/to/fintoc-react-native-0.3.1.tgz",
    ...
  }
}

Where ./path/to/fintoc-react-native-0.3.1.tgz corresponds to the path to the .tgz file created on the npm pack step.

If you want to create a new release, you can run:

git switch master
npm run bump! <major|minor|patch>

This will create a new branch with the updated version from master.

Acknowledgements

This implementation was written based on the input and experience of @marialuisaclaro integrating the WebView to React Native, which served as a good starting point for the general idea of this library.

GitHub

View Github