added keyboard auto dimiss to on dismiss method

example/PaymentScreen.tsx

@@ -84,15 +84,19 @@ const PaymentScreen = () => {
         onChangeText={setAmount}
       />
       <View style={styles.buttonContainer}>
-        <Button
-          title="Secure Token Payment"
-          onPress={handleSecureTokenPayment}
-        />
-        <Button
-          title="Session Pay"
-          onPress={handleSessionPay}
-          disabled={!amount}
-        />
+        <View style={{height: 40}}>
+          <Button
+            title="Secure Token Payment"
+            onPress={handleSecureTokenPayment}
+          />
+        </View>
+        <View style={{height: 40}}>
+          <Button
+            title="Session Pay"
+            onPress={handleSessionPay}
+            disabled={!amount}
+          />
+        </View>
       </View>
     </View>
   );

payment_sdk/src/components/Sheet.tsx

@@ -8,25 +8,25 @@ import React, {
 } from "react";
 import {
   Alert,
-  Dimensions,
   Image,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
   Animated as RNAnimated,
   PanResponder,
+  Keyboard,
 } from "react-native";
+
 import ResponseScreen from "./ResponseScreen";
 import { Actions, DispatchContext, StateContext } from "../state";
 import SheetContent from "./SheetContent";
 import { paymentFailedCtaText, paymentSuccessCtaText } from "../util/constants";
 import { ResponseScreenStatuses } from "../util/types";
+import { SCREEN_HEIGHT } from "../util/helpers";
 
 const closeIcon = require("../assets/images/close.png");
 
-const { height: SCREEN_HEIGHT } = Dimensions.get("window");
-
 const MAX_TRANSLATE_Y = -SCREEN_HEIGHT + 50;
 
 type SheetProps = {
@@ -88,6 +88,8 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
   }, []);
 
   const closeSheet = (showAlert = true) => {
+    Keyboard.dismiss();
+
     if (showAlert) {
       // showing an alert when user try to close the SDK modal
       Alert.alert("Cancel Payment?", "", [

payment_sdk/src/components/SheetContent.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Keyboard, ScrollView } from "react-native";
+import { Keyboard, ScrollView, StyleSheet, View } from "react-native";
 
 import PillContainer from "./PillContainer";
 import WebView from "./WebView";
@@ -10,6 +10,10 @@ import Loader from "./Loader";
 import SheetFooter from "./sections/SheetFooter";
 import { PaymentType } from "../util/types";
 import KonbiniSection from "./sections/KonbiniSection";
+import { isAndroid } from "../util/helpers";
+import { SCREEN_HEIGHT } from "./Sheet";
+
+const KEYBOARD_OFFSET = isAndroid() ? 100 : 80;
 
 const SheetContent = () => {
   const { paymentType, webViewData, loading } = useContext(StateContext);
@@ -18,12 +22,12 @@ const SheetContent = () => {
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      (e) => setKeyboardHeight(e.endCoordinates.height)
+      "keyboardDidShow",
+      (e) => setKeyboardHeight(e.endCoordinates.height + KEYBOARD_OFFSET)
     );
 
     const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
+      "keyboardDidHide",
       () => setKeyboardHeight(0)
     );
 
@@ -48,17 +52,31 @@ const SheetContent = () => {
     );
 
   return (
-    <>
-      <ScrollView contentContainerStyle={{paddingBottom: keyboardHeight}}>
+    <View style={styles.mainContent}>
+      <ScrollView contentContainerStyle={{ paddingBottom: keyboardHeight }}>
         <PillContainer onSelect={handlePillSelect} selectedItem={paymentType} />
         {paymentType === PaymentType.CREDIT && <CardSection />}
         {paymentType === PaymentType.PAY_PAY && <PayPaySection />}
         {paymentType === PaymentType.KONBINI && <KonbiniSection />}
         {renderLoading}
       </ScrollView>
-      <SheetFooter />
-    </>
+      <View style={styles.bottomContent}>
+        <SheetFooter />
+      </View>
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  mainContent: {
+    height: "100%",
+  },
+  bottomContent: {
+    position: "absolute",
+    right: 0,
+    left: 0,
+    bottom: SCREEN_HEIGHT - (SCREEN_HEIGHT - 85 - 40),
+  },
+});
+
 export default SheetContent;

payment_sdk/src/components/sections/SheetFooter.tsx

@@ -1,33 +1,24 @@
-import { Image, StyleSheet, Platform, View } from 'react-native'
-import React from 'react'
+import { Image, StyleSheet, Platform, View } from "react-native";
+import React from "react";
 
-type Props = {}
+type Props = {};
 
 const SheetFooter = (props: Props) => {
   return (
     <View style={styles.container}>
-      <Image source={require('../../assets/images/footer_image1.png')} />
-      <Image source={require('../../assets/images/footer_image2.png')} />
+      <Image source={require("../../assets/images/footer_image1.png")} />
+      <Image source={require("../../assets/images/footer_image2.png")} />
     </View>
-  )
-}
+  );
+};
 
-export default SheetFooter
+export default SheetFooter;
 
 const styles = StyleSheet.create({
-    container:{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-       ...Platform.select({
-            ios: {
-                bottom: 48,
-            },
-            android: {
-                bottom: 32,
-            }
-       }),
-        marginHorizontal: 16,
-    }
-})
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginHorizontal: 16,
+  },
+});

payment_sdk/src/util/helpers.ts

@@ -1,3 +1,4 @@
+import { Dimensions, Platform } from "react-native";
 import { brandsType, CurrencySign, CurrencyTypes } from "./types";
 
 export const isDevApp = __DEV__;
@@ -132,3 +133,7 @@ export const determineCardType = (cardNumber: string): string | null => {
   // Return null if the card type is not on both visa and master
   return null;
 };
+
+export const isAndroid = () => Platform.OS === "android";
+export const isIOS = () => Platform.OS === "ios";
+export const { height: SCREEN_HEIGHT } = Dimensions.get("window");