Merge pull request #15 from fintoc-com/main

Release 1.0.0

README.md

@@ -2,7 +2,7 @@
 
 <p align="center">
     <em>
-        Use the <a href="https://docs.fintoc.com/docs/widget" target="_blank">Fintoc widget</a> within your React Native application as a WebView.
+        Use the <a href="https://docs.fintoc.com/docs/widget" target="_blank">Fintoc widget</a> within your React Native application as a View.
     </em>
 </p>
 
@@ -30,42 +30,43 @@ 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](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works). To use the WebView, use the following _snippet_:
+`Fintoc React Native` exports a single component called `FintocWidgetView`. This is a React Native component that creates the same WebView from [the native WebView documentation](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works). To use the Fintoc View, use the following _snippet_:
 
 ```js
-import { FintocWidgetWebView } from 'fintoc-react-native';
+import { FintocWidgetView } from '@fintoc/fintoc-react-native';
 ```
 
-After retrieving the `FintocWidgetWebView` component, you are ready to instantiate the widget:
+After retrieving the `FintocWidgetView` component, you are ready to instantiate the widget:
 
-```js
+```jsx
 const options = { ... };
 
-const handlers = {
-  onSuccess: () => {
-    console.log('SUCCESS');
-  },
-  onExit: () => {
-    console.log('EXIT');
-  },
+const onSuccess = () => {
+  console.log('SUCCESS');
+};
+
+const onExit = () => {
+  console.log('EXIT');
 };
 
 export default function FintocWidgetScreen() {
   return (
-    <View>
-      <FintocWidgetWebView options={options} handlers={handlers} />
-    </View>
+    <FintocWidgetView
+      options={options}
+      onSuccess={onSuccess}
+      onExit={onExit}
+    />
   );
 }
 ```
 
-Here, `options` corresponds to an object with the parameters received by the widget (you can read more about these parameters [here](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works)), and `handlers` corresponds to an object with the WebView redirections detailed [here](https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections).
+Here, `options` corresponds to an object with the parameters received by the widget (you can read more about these parameters [here](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works)), and `onSuccess` and `onExit` correspond to the WebView redirections detailed [here](https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections).
 
-**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.
+**Notice that** on close the Fintoc View **must be unmounted**. This is because the widget won't re-open if the Fintoc View isn't re-rendered, so I would recommend unmounting the component on the `onClose` method of the Fintoc View.
 
 ## TypeScript support
 
-This package includes TypeScript declarations for the Fintoc WebView.
+This package includes TypeScript declarations for the Fintoc View.
 
 ## Developing
 
@@ -75,25 +76,26 @@ To develop the package, you need to use `npm`. Install the dependencies:
 npm install
 ```
 
-To test locally, I recommend packaging the app:
+To test locally, I recommend packaging the app. Remember to build the library first:
 
 ```sh
+npm run build
 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:
+This will create a `fintoc-fintoc-react-native-1.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:
 
 ```json
 {
   "dependencies": {
     ...,
-    "fintoc-react-native": "file:./path/to/fintoc-react-native-0.3.1.tgz",
+    "@fintoc/fintoc-react-native": "file:./path/to/fintoc-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.
+Where `./path/to/fintoc-fintoc-react-native-0.3.1.tgz` corresponds to the path to the `.tgz` file created on the `npm pack` step. After running `npm install` on the new React Native app, you should be able to use Fintoc React Native to import the Fintoc View.
 
 If you want to create a new _release_, you can run:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fintoc/fintoc-react-native",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "repository": "https://github.com/fintoc-com/fintoc-react-native",
   "license": "MIT",
   "author": {

src/lib/core.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { WebView } from 'react-native-webview';
 import { View, StyleSheet } from 'react-native';
-import type { FintocWidgetWebViewPropsType } from '../types';
+import type { FintocWidgetViewPropsType } from '../types';
 import { FINTOC_WEBVIEW_URL, FINTOC_BASE_URLS } from './constants';
 import { buildQueryString, buildMessageHandler } from './utils';
 
-export const FintocWidgetWebView = ({ options, handlers }: FintocWidgetWebViewPropsType) => (
+export const FintocWidgetView = ({ options, ...handlers }: FintocWidgetViewPropsType) => (
   // eslint-disable-next-line no-use-before-define
   <View style={styles.wrapper}>
     <WebView

src/lib/utils.ts

@@ -2,11 +2,13 @@ import { WebViewMessageEvent } from 'react-native-webview';
 import type { FintocWidgetEventHandlers, WebViewEventName } from '../types';
 import { EVENT_MAP } from './constants';
 
+const defaultHanlder = () => null;
+
 export const buildQueryString = (config: Record<string, string>): string => Object.keys(config).map((key) => `${key}=${config[key]}`).join('&');
 
 export const buildMessageHandler = (handlers: FintocWidgetEventHandlers) => (
   (event: WebViewMessageEvent) => {
     const eventName = event.nativeEvent.data as WebViewEventName;
-    return handlers[EVENT_MAP[eventName]]();
+    return (handlers[EVENT_MAP[eventName]] || defaultHanlder)();
   }
 );

src/main.ts

@@ -1,7 +1,7 @@
-export { FintocWidgetWebView } from './lib/core';
+export { FintocWidgetView } from './lib/core';
 
 export type {
   FintocWidgetOptions,
   FintocWidgetEventHandlers,
-  FintocWidgetWebViewPropsType,
+  FintocWidgetViewPropsType,
 } from './types';

src/types.ts

@@ -7,20 +7,19 @@ export type FintocWidgetOptions = Record<string, any>;
 export type WebViewEventName = 'fintocwidget://succeeded' | 'fintocwidget://exit';
 
 /**
- * The event handlers used to handle the WebView redirections.
+ * The event handlers used to handle the View redirections.
  * You can read more here: {@link https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections}.
  */
 export interface FintocWidgetEventHandlers {
-  onSuccess: () => void
-  onExit: () => void
+  onSuccess?: () => void
+  onExit?: () => void
 }
 
 export type WebViewEventMap = Record<WebViewEventName, keyof FintocWidgetEventHandlers>
 
 /**
- * The props for the Fintoc Widget WebView.
+ * The props for the Fintoc Widget View.
  */
-export interface FintocWidgetWebViewPropsType {
+export type FintocWidgetViewPropsType = FintocWidgetEventHandlers & {
   options: FintocWidgetOptions
-  handlers: FintocWidgetEventHandlers
 }