Feature: Frames ref for submitCard()

src/Frames.tsx

@@ -1,18 +1,19 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useImperativeHandle } from "react";
 import { View, StyleSheet } from "react-native";
 import { framesReducer } from "./utils/reducer";
 import {
   FramesContextType,
   FramesProps,
   FramesState,
   FramesDispatch,
+  FramesRef,
 } from "./types/types";
 import { log } from "./utils/logger";
 import { tokenize, formatDataForTokenization } from "./utils/http";
 
 export const FramesContext = React.createContext({} as FramesContextType);
 
-const Frames = (props: FramesProps) => {
+const Frames = React.forwardRef<FramesRef, FramesProps>((props, ref) => {
   // @ts-ignore
   const [state, dispatch]: [FramesState, FramesDispatch] = React.useReducer(
     framesReducer,
@@ -154,14 +155,16 @@ const Frames = (props: FramesProps) => {
     }
   }, [state.validation.card]);
 
+  useImperativeHandle(ref, () => ({ submitCard }));
+
   return (
     <View style={[styles.container, props.style]}>
       <FramesContext.Provider value={{ state, dispatch, submitCard }}>
         {props.children}
       </FramesContext.Provider>
     </View>
   );
-};
+});
 
 export default Frames;
 

src/index.tsx

@@ -4,3 +4,4 @@ export { default as ExpiryDate } from "./components/ExpiryDate";
 export { default as Cvv } from "./components/Cvv";
 export { default as SubmitButton } from "./components/SubmitButton";
 export { default as FramesConsumer } from "./Frames";
+export type { FramesRef } from "./types/types";

src/types/types.tsx

@@ -88,10 +88,15 @@ export interface FrameValidationChangedParams {
   isEmpty: boolean;
 }
 
+export interface FramesRef {
+  submitCard: () => void;
+}
+
 export interface FramesProps extends ViewStyle {
   style?: StyleProp<ViewStyle>;
   children: any;
   config: FramesConfig;
+  ref?: React.Ref<FramesRef>;
   frameValidationChanged?: (e: FrameValidationChangedParams) => void;
   paymentMethodChanged?: (e: PaymentMethodChangeParams) => void;
   cardValidationChanged?: (e: FrameCardValidationChangedEvent) => void;