feat(RNPSW): expose the root modal's props for customization (#174)

Author: el-naza

README.md

@@ -130,6 +130,7 @@ function Pay(){
 | `autoStart`                          |                                                                       Auto start payment once page is opened                                                                        |                                           default: `false` |
 | `refNumber`                          |                                                                 Reference number, if you have already generated one                                                                 | default: `''+Math.floor((Math.random() * 1000000000) + 1)` |
 | `handleWebViewMessage`               |                                                                  Will be called when a WebView receives a message                                                                   |                                            default: `true` |
+| `modalProps`                         |     Can be used to extend the root modal props for example to handle closing like so `modalProps={{ onRequestClose: () => paystackWebViewRef.current.endTransaction() }}`     |                                            default: `nill` |
 
 
 

development/paystack.tsx

@@ -27,6 +27,7 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
     autoStart = false,
     onSuccess,
     activityIndicatorColor = 'green',
+    modalProps,
   },
   ref,
 ) => {
@@ -160,7 +161,7 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
   };
 
   return (
-    <Modal style={{ flex: 1 }} visible={showModal} animationType="slide" transparent={false}>
+    <Modal style={{ flex: 1 }} visible={showModal} animationType="slide" transparent={false} {...modalProps}>
       <SafeAreaView style={{ flex: 1 }}>
         <WebView
           style={[{ flex: 1 }]}

development/types/index.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ModalProps } from 'react-native';
 export type Currency = 'NGN' | 'GHS' | 'USD' | 'ZAR';
 
 export type PaymentChannels = 'bank' | 'card' | 'qr' | 'ussd' | 'mobile_money' | 'bank_transfer' | 'eft';
@@ -47,6 +48,7 @@ export interface PayStackProps {
   autoStart?: boolean;
   activityIndicatorColor?: string;
   ref: React.ReactElement;
+  modalProps?: ModalProps;
 }
 
 export interface PayStackRef {