From 24c7f6212d5e25840bd6a7c61b6017f80c67694d Mon Sep 17 00:00:00 2001
From: Bryce McMath <bryce.j.mcmath@gmail.com>
Date: Mon, 18 Dec 2023 13:19:09 -0800
Subject: [PATCH] feat: add scrim to common remove modal

Signed-off-by: Bryce McMath <bryce.j.mcmath@gmail.com>
---
 .../components/modals/CommonRemoveModal.tsx   |  100 +-
 .../CommonRemoveModal.test.tsx.snap           | 6187 +++++++++--------
 .../CredentialOffer.test.tsx.snap             |  691 +-
 3 files changed, 3528 insertions(+), 3450 deletions(-)

diff --git a/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx b/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx
index 945a14f8d6..385efcf3f6 100644
--- a/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx
+++ b/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx
@@ -110,6 +110,10 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
       marginBottom: Platform.OS === 'ios' ? 108 : 80,
       position: 'relative',
     },
+    overlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
     headerView: {
       alignItems: 'flex-end',
       marginTop: 65,
@@ -286,55 +290,57 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
 
   return (
     <Modal transparent={true} visible={visible} animationType="slide">
-      <View style={[styles.headerView]}>
-        <TouchableOpacity
-          accessibilityLabel={t('Global.Close')}
-          accessibilityRole={'button'}
-          testID={testIdWithKey('Close')}
-          onPress={() => onCancel && onCancel()}
-          hitSlop={hitSlop}
+      <View style={styles.overlay}>
+        <View style={[styles.headerView]}>
+          <TouchableOpacity
+            accessibilityLabel={t('Global.Close')}
+            accessibilityRole={'button'}
+            testID={testIdWithKey('Close')}
+            onPress={() => onCancel && onCancel()}
+            hitSlop={hitSlop}
+          >
+            <Icon name={'close'} size={42} color={ColorPallet.brand.modalIcon} />
+          </TouchableOpacity>
+        </View>
+        <SafeAreaView
+          edges={['left', 'right', 'bottom']}
+          style={[
+            {
+              backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+            },
+          ]}
         >
-          <Icon name={'close'} size={42} color={ColorPallet.brand.modalIcon} />
-        </TouchableOpacity>
-      </View>
-      <SafeAreaView
-        edges={['left', 'right', 'bottom']}
-        style={[
-          {
-            backgroundColor: ColorPallet.brand.modalPrimaryBackground,
-          },
-        ]}
-      >
-        <ScrollView style={[styles.container]}>
-          <>
-            {headerImageForType()}
-            {contentForType()}
-          </>
-        </ScrollView>
-        <View style={[styles.controlsContainer]}>
-          <ContentGradient backgroundColor={ColorPallet.brand.modalPrimaryBackground} height={30} />
-          <View style={[{ paddingTop: 10 }]}>
-            <Button
-              title={titleForConfirmButton()}
-              accessibilityLabel={labelForConfirmButton()}
-              testID={testIdForConfirmButton()}
-              onPress={onSubmit}
-              buttonType={
-                usage === ModalUsage.ContactRemoveWithCredentials ? ButtonType.ModalPrimary : ButtonType.ModalCritical
-              }
-            />
-          </View>
-          <View style={[{ paddingTop: 10 }]}>
-            <Button
-              title={t('Global.Cancel')}
-              accessibilityLabel={t('Global.Cancel')}
-              testID={testIdForCancelButton()}
-              onPress={onCancel}
-              buttonType={ButtonType.ModalSecondary}
-            />
+          <ScrollView style={[styles.container]}>
+            <>
+              {headerImageForType()}
+              {contentForType()}
+            </>
+          </ScrollView>
+          <View style={[styles.controlsContainer]}>
+            <ContentGradient backgroundColor={ColorPallet.brand.modalPrimaryBackground} height={30} />
+            <View style={[{ paddingTop: 10 }]}>
+              <Button
+                title={titleForConfirmButton()}
+                accessibilityLabel={labelForConfirmButton()}
+                testID={testIdForConfirmButton()}
+                onPress={onSubmit}
+                buttonType={
+                  usage === ModalUsage.ContactRemoveWithCredentials ? ButtonType.ModalPrimary : ButtonType.ModalCritical
+                }
+              />
+            </View>
+            <View style={[{ paddingTop: 10 }]}>
+              <Button
+                title={t('Global.Cancel')}
+                accessibilityLabel={t('Global.Cancel')}
+                testID={testIdForCancelButton()}
+                onPress={onCancel}
+                buttonType={ButtonType.ModalSecondary}
+              />
+            </View>
           </View>
-        </View>
-      </SafeAreaView>
+        </SafeAreaView>
+      </View>
     </Modal>
   )
 }
diff --git a/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap
index 304ca29c87..468603285e 100644
--- a/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap
+++ b/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap
@@ -9,1334 +9,899 @@ exports[`CommonRemoveModal Component Credential offer decline renders correctly
 >
   <View
     style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
-        }
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
       }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
-            },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
     }
   >
-    <RCTScrollView
+    <View
       style={
         Array [
           Object {
+            "alignItems": "flex-end",
             "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
           },
         ]
       }
     >
-      <View>
-        <View
-          style={
-            Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
-            }
+      <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
           }
-        >
-          <
-            height={115}
-            width={115}
-          />
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "marginBottom": 25,
-              },
-            ]
+        }
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-        >
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                  "fontWeight": "bold",
-                },
-              ]
-            }
-          >
-            CredentialOffer.DeclineTitle
-          </Text>
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
-                },
-                Object {
-                  "marginTop": 30,
-                },
-              ]
-            }
-          >
-            CredentialOffer.DeclineParagraph1
-          </Text>
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
-                },
-              ]
-            }
-          >
-            CredentialOffer.DeclineParagraph2
-          </Text>
-        </View>
-      </View>
-    </RCTScrollView>
-    <View
-      style={
-        Array [
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
           Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
-          },
-        ]
-      }
-    >
-      <View
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
+            "opacity": 1,
           }
         }
+        testID="com.ariesbifold:id/Close"
       >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
+        <Text
+          allowFontScaling={false}
+          selectable={false}
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "color": "#FFFFFF",
+                "fontSize": 42,
               },
+              undefined,
               Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
               },
+              Object {},
             ]
           }
-          width="100%"
         >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
-                  Array [
-                    0,
-                    0,
-                    1,
-                    -16777216,
-                  ]
-                }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
+          
+        </Text>
       </View>
-      <View
+    </View>
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#000000",
+          },
+        ]
+      }
+    >
+      <RCTScrollView
         style={
           Array [
             Object {
-              "paddingTop": 10,
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
             },
           ]
         }
       >
-        <View
-          accessibilityLabel="Global.Decline"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
-          }
-          testID="com.ariesbifold:id/ConfirmDeclineButton"
-        >
+        <View>
           <View
             style={
               Object {
-                "alignItems": "center",
                 "flexDirection": "row",
                 "justifyContent": "center",
               }
             }
+          >
+            <
+              height={115}
+              width={115}
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginBottom": 25,
+                },
+              ]
+            }
           >
             <Text
               style={
                 Array [
                   Object {
                     "color": "#FFFFFF",
-                    "fontSize": 18,
+                    "fontSize": 24,
                     "fontWeight": "bold",
-                    "textAlign": "center",
                   },
-                  false,
-                  false,
-                  false,
                 ]
               }
             >
-              Global.Decline
+              CredentialOffer.DeclineTitle
             </Text>
-          </View>
-        </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
-        <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
-          }
-          testID="com.ariesbifold:id/CancelDeclineButton"
-        >
-          <View
-            style={
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#FFFFFF",
+                    "fontSize": 18,
+                    "fontWeight": "normal",
+                    "marginTop": 25,
+                  },
+                  Object {
+                    "marginTop": 30,
+                  },
+                ]
               }
-            }
-          >
+            >
+              CredentialOffer.DeclineParagraph1
+            </Text>
             <Text
               style={
                 Array [
                   Object {
-                    "color": "#42803E",
+                    "color": "#FFFFFF",
                     "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
+                    "fontWeight": "normal",
+                    "marginTop": 25,
                   },
-                  false,
-                  false,
-                  false,
                 ]
               }
             >
-              Global.Cancel
+              CredentialOffer.DeclineParagraph2
             </Text>
           </View>
         </View>
-      </View>
-    </View>
-  </RNCSafeAreaView>
-</Modal>
-`;
-
-exports[`CommonRemoveModal Component Custom notification decline renders correctly 1`] = `
-<Modal
-  animationType="slide"
-  hardwareAccelerated={false}
-  transparent={true}
-  visible={true}
->
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
-        }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      </RCTScrollView>
+      <View
         style={
           Array [
             Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
             },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
           ]
         }
       >
-        
-      </Text>
-    </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
-    }
-  >
-    <RCTScrollView
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
-          },
-        ]
-      }
-    >
-      <View>
         <View
           style={
             Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
             }
           }
         >
-          <
-            height={115}
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
             style={
-              Object {
-                "marginBottom": 15,
-              }
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
+                },
+              ]
             }
-            width={115}
-          />
+            width="100%"
+          >
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
+                    Array [
+                      0,
+                      0,
+                      1,
+                      -16777216,
+                    ]
+                  }
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
+                  Array [
+                    1,
+                    "gradient",
+                  ]
+                }
+                height="30"
+                propList={
+                  Array [
+                    "fill",
+                  ]
+                }
+                width="100%"
+                x={0}
+                y={0}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
         </View>
         <View
           style={
             Array [
               Object {
-                "marginBottom": 25,
+                "paddingTop": 10,
               },
             ]
           }
         >
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                  "fontWeight": "bold",
-                },
-              ]
+          <View
+            accessibilityLabel="Global.Decline"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
             }
-          >
-            CredentialOffer.CustomOfferTitle
-          </Text>
-          <Text
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
-                },
-                Object {
-                  "marginTop": 30,
-                },
-              ]
+              Object {
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
+              }
             }
+            testID="com.ariesbifold:id/ConfirmDeclineButton"
           >
-            CredentialOffer.CustomOfferParagraph1
-          </Text>
-          <Text
-            style={
-              Array [
+            <View
+              style={
                 Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
-                },
-              ]
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Decline
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
+              }
             }
+            testID="com.ariesbifold:id/CancelDeclineButton"
           >
-            CredentialOffer.CustomOfferParagraph2
-          </Text>
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#42803E",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Cancel
+              </Text>
+            </View>
+          </View>
         </View>
       </View>
-    </RCTScrollView>
+    </RNCSafeAreaView>
+  </View>
+</Modal>
+`;
+
+exports[`CommonRemoveModal Component Custom notification decline renders correctly 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  transparent={true}
+  visible={true}
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
+      }
+    }
+  >
     <View
       style={
         Array [
           Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
+            "alignItems": "flex-end",
+            "backgroundColor": "#000000",
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
           },
         ]
       }
     >
       <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
+            "opacity": 1,
           }
         }
+        testID="com.ariesbifold:id/Close"
       >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
+        <Text
+          allowFontScaling={false}
+          selectable={false}
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "color": "#FFFFFF",
+                "fontSize": 42,
               },
+              undefined,
               Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
               },
+              Object {},
             ]
           }
-          width="100%"
         >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
-                  Array [
-                    0,
-                    0,
-                    1,
-                    -16777216,
-                  ]
-                }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
+          
+        </Text>
       </View>
-      <View
+    </View>
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#000000",
+          },
+        ]
+      }
+    >
+      <RCTScrollView
         style={
           Array [
             Object {
-              "paddingTop": 10,
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
             },
           ]
         }
       >
-        <View
-          accessibilityLabel="Global.Decline"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
-          }
-          testID="com.ariesbifold:id/ConfirmButton"
-        >
+        <View>
           <View
             style={
               Object {
-                "alignItems": "center",
                 "flexDirection": "row",
                 "justifyContent": "center",
               }
             }
+          >
+            <
+              height={115}
+              style={
+                Object {
+                  "marginBottom": 15,
+                }
+              }
+              width={115}
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginBottom": 25,
+                },
+              ]
+            }
           >
             <Text
               style={
                 Array [
                   Object {
                     "color": "#FFFFFF",
-                    "fontSize": 18,
+                    "fontSize": 24,
                     "fontWeight": "bold",
-                    "textAlign": "center",
                   },
-                  false,
-                  false,
-                  false,
                 ]
               }
             >
-              Global.Decline
+              CredentialOffer.CustomOfferTitle
             </Text>
-          </View>
-        </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
-        <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
-          }
-          testID="com.ariesbifold:id/CancelButton"
-        >
-          <View
-            style={
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#FFFFFF",
+                    "fontSize": 18,
+                    "fontWeight": "normal",
+                    "marginTop": 25,
+                  },
+                  Object {
+                    "marginTop": 30,
+                  },
+                ]
               }
-            }
-          >
+            >
+              CredentialOffer.CustomOfferParagraph1
+            </Text>
             <Text
               style={
                 Array [
                   Object {
-                    "color": "#42803E",
+                    "color": "#FFFFFF",
                     "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
+                    "fontWeight": "normal",
+                    "marginTop": 25,
                   },
-                  false,
-                  false,
-                  false,
                 ]
               }
             >
-              Global.Cancel
+              CredentialOffer.CustomOfferParagraph2
             </Text>
           </View>
         </View>
-      </View>
-    </View>
-  </RNCSafeAreaView>
-</Modal>
-`;
-
-exports[`CommonRemoveModal Component Proof request decline renders correctly 1`] = `
-<Modal
-  animationType="slide"
-  hardwareAccelerated={false}
-  transparent={true}
-  visible={true}
->
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
-        }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      </RCTScrollView>
+      <View
         style={
           Array [
             Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
             },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
           ]
         }
       >
-        
-      </Text>
-    </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
-    }
-  >
-    <RCTScrollView
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
-          },
-        ]
-      }
-    >
-      <View>
         <View
           style={
             Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
             }
           }
         >
-          <
-            height={115}
-            width={115}
-          />
-        </View>
-        <View
-          style={
-            Array [
-              Object {
-                "marginBottom": 25,
-              },
-            ]
-          }
-        >
-          <Text
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
             style={
               Array [
                 Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                  "fontWeight": "bold",
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
                 },
-              ]
-            }
-          >
-            ProofRequest.DeclineTitle
-          </Text>
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
-                },
-                Object {
-                  "marginTop": 30,
-                },
-              ]
-            }
-          >
-            ProofRequest.DeclineBulletPoint1
-          </Text>
-          <Text
-            style={
-              Array [
                 Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-              ]
-            }
-          >
-            ProofRequest.DeclineBulletPoint2
-          </Text>
-          <Text
-            style={
-              Array [
                 Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                  "marginTop": 25,
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
                 },
               ]
             }
+            width="100%"
           >
-            ProofRequest.DeclineBulletPoint3
-          </Text>
-        </View>
-      </View>
-    </RCTScrollView>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
-          }
-        }
-      >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
-              },
-            ]
-          }
-          width="100%"
-        >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
+                    Array [
+                      0,
+                      0,
+                      1,
+                      -16777216,
+                    ]
+                  }
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
                   Array [
-                    0,
-                    0,
                     1,
-                    -16777216,
+                    "gradient",
+                  ]
+                }
+                height="30"
+                propList={
+                  Array [
+                    "fill",
                   ]
                 }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
+                width="100%"
+                x={0}
+                y={0}
               />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
         <View
-          accessibilityLabel="Global.Decline"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/ConfirmDeclineButton"
         >
           <View
+            accessibilityLabel="Global.Decline"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/ConfirmButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              Global.Decline
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Decline
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
         <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/CancelDeclineButton"
         >
           <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/CancelButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#42803E",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              Global.Cancel
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#42803E",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Cancel
+              </Text>
+            </View>
           </View>
         </View>
       </View>
-    </View>
-  </RNCSafeAreaView>
+    </RNCSafeAreaView>
+  </View>
 </Modal>
 `;
 
-exports[`CommonRemoveModal Component Remove contact renders correctly 1`] = `
+exports[`CommonRemoveModal Component Proof request decline renders correctly 1`] = `
 <Modal
   animationType="slide"
   hardwareAccelerated={false}
@@ -1345,133 +910,137 @@ exports[`CommonRemoveModal Component Remove contact renders correctly 1`] = `
 >
   <View
     style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
+      }
     }
   >
     <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "backgroundColor": "#000000",
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
+          },
+        ]
       }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+    >
+      <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
         }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
         }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
-            },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
+          Object {
+            "opacity": 1,
+          }
         }
+        testID="com.ariesbifold:id/Close"
       >
-        
-      </Text>
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "color": "#FFFFFF",
+                "fontSize": 42,
+              },
+              undefined,
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
     </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
-    }
-  >
-    <RCTScrollView
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
       style={
         Array [
           Object {
             "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
           },
         ]
       }
     >
-      <View>
-        <View
-          style={
+      <RCTScrollView
+        style={
+          Array [
             Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
-            }
-          }
-        />
-        <View
-          style={
-            Array [
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            style={
               Object {
-                "marginBottom": 25,
-              },
-            ]
-          }
-        >
+                "flexDirection": "row",
+                "justifyContent": "center",
+              }
+            }
+          >
+            <
+              height={115}
+              width={115}
+            />
+          </View>
           <View
             style={
               Array [
@@ -1492,10 +1061,8 @@ exports[`CommonRemoveModal Component Remove contact renders correctly 1`] = `
                 ]
               }
             >
-              ContactDetails.RemoveTitle
+              ProofRequest.DeclineTitle
             </Text>
-          </View>
-          <View>
             <Text
               style={
                 Array [
@@ -1503,643 +1070,434 @@ exports[`CommonRemoveModal Component Remove contact renders correctly 1`] = `
                     "color": "#FFFFFF",
                     "fontSize": 18,
                     "fontWeight": "normal",
+                    "marginTop": 25,
+                  },
+                  Object {
+                    "marginTop": 30,
                   },
                 ]
               }
             >
-              ContactDetails.RemoveContactMessageTop
+              ProofRequest.DeclineBulletPoint1
             </Text>
-            <View
+            <Text
               style={
-                Object {
-                  "alignItems": "flex-start",
-                  "flexDirection": "row",
-                  "marginVertical": 10,
-                }
-              }
-            >
-              <View
-                style={
+                Array [
                   Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#FFFFFF",
-                        "fontSize": 9,
-                      },
-                      undefined,
-                      Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#FFFFFF",
-                      "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
-                      "flexShrink": 1,
-                    },
-                  ]
-                }
-              >
-                ContactDetails.RemoveContactsBulletPoint1
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "flex-start",
-                  "flexDirection": "row",
-                  "marginVertical": 10,
-                }
+                    "color": "#FFFFFF",
+                    "fontSize": 18,
+                    "fontWeight": "normal",
+                    "marginTop": 25,
+                  },
+                ]
               }
             >
-              <View
-                style={
+              ProofRequest.DeclineBulletPoint2
+            </Text>
+            <Text
+              style={
+                Array [
                   Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
+                    "color": "#FFFFFF",
+                    "fontSize": 18,
+                    "fontWeight": "normal",
+                    "marginTop": 25,
+                  },
+                ]
+              }
+            >
+              ProofRequest.DeclineBulletPoint3
+            </Text>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
+            }
+          }
+        >
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
+                },
+              ]
+            }
+            width="100%"
+          >
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
                     Array [
-                      Object {
-                        "color": "#FFFFFF",
-                        "fontSize": 9,
-                      },
-                      undefined,
-                      Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
+                      0,
+                      0,
+                      1,
+                      -16777216,
                     ]
                   }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                style={
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
                   Array [
-                    Object {
-                      "color": "#FFFFFF",
-                      "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
-                      "flexShrink": 1,
-                    },
+                    1,
+                    "gradient",
                   ]
                 }
-              >
-                ContactDetails.RemoveContactsBulletPoint2
-              </Text>
-            </View>
+                height="30"
+                propList={
+                  Array [
+                    "fill",
+                  ]
+                }
+                width="100%"
+                x={0}
+                y={0}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityLabel="Global.Decline"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+            testID="com.ariesbifold:id/ConfirmDeclineButton"
+          >
             <View
               style={
                 Object {
-                  "alignItems": "flex-start",
+                  "alignItems": "center",
                   "flexDirection": "row",
-                  "marginVertical": 10,
+                  "justifyContent": "center",
                 }
               }
             >
-              <View
-                style={
-                  Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#FFFFFF",
-                        "fontSize": 9,
-                      },
-                      undefined,
-                      Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
               <Text
                 style={
                   Array [
                     Object {
                       "color": "#FFFFFF",
                       "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
-                      "flexShrink": 1,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
                     },
+                    false,
+                    false,
+                    false,
                   ]
                 }
               >
-                ContactDetails.RemoveContactsBulletPoint3
+                Global.Decline
               </Text>
             </View>
+          </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+            testID="com.ariesbifold:id/CancelDeclineButton"
+          >
             <View
               style={
                 Object {
-                  "alignItems": "flex-start",
+                  "alignItems": "center",
                   "flexDirection": "row",
-                  "marginVertical": 10,
+                  "justifyContent": "center",
                 }
               }
             >
-              <View
-                style={
-                  Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#FFFFFF",
-                        "fontSize": 9,
-                      },
-                      undefined,
-                      Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
               <Text
                 style={
                   Array [
                     Object {
-                      "color": "#FFFFFF",
+                      "color": "#42803E",
                       "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
-                      "flexShrink": 1,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
                     },
+                    false,
+                    false,
+                    false,
                   ]
                 }
               >
-                ContactDetails.RemoveContactsBulletPoint4
+                Global.Cancel
               </Text>
             </View>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
-                  },
-                  Object {
-                    "marginTop": 10,
-                  },
-                ]
-              }
-            >
-              ContactDetails.RemoveContactMessageBottom
-            </Text>
           </View>
         </View>
       </View>
-    </RCTScrollView>
+    </RNCSafeAreaView>
+  </View>
+</Modal>
+`;
+
+exports[`CommonRemoveModal Component Remove contact renders correctly 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  transparent={true}
+  visible={true}
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
+      }
+    }
+  >
     <View
       style={
         Array [
           Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
+            "alignItems": "flex-end",
+            "backgroundColor": "#000000",
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
           },
         ]
       }
     >
       <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
+            "opacity": 1,
           }
         }
+        testID="com.ariesbifold:id/Close"
       >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
+        <Text
+          allowFontScaling={false}
+          selectable={false}
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
+                "color": "#FFFFFF",
+                "fontSize": 42,
               },
+              undefined,
               Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
               },
+              Object {},
             ]
           }
-          width="100%"
-        >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
-                  Array [
-                    0,
-                    0,
-                    1,
-                    -16777216,
-                  ]
-                }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
-        <View
-          accessibilityLabel="ContactDetails.RemoveContact"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
-          }
-          testID="com.ariesbifold:id/ConfirmRemoveButton"
         >
-          <View
-            style={
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
-              }
-            >
-              ContactDetails.RemoveContact
-            </Text>
-          </View>
-        </View>
+          
+        </Text>
       </View>
-      <View
+    </View>
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#000000",
+          },
+        ]
+      }
+    >
+      <RCTScrollView
         style={
           Array [
             Object {
-              "paddingTop": 10,
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
             },
           ]
         }
       >
-        <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
-          }
-          testID="com.ariesbifold:id/CancelRemoveButton"
-        >
+        <View>
           <View
             style={
               Object {
-                "alignItems": "center",
                 "flexDirection": "row",
                 "justifyContent": "center",
               }
             }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#42803E",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
-              }
-            >
-              Global.Cancel
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaView>
-</Modal>
-`;
-
-exports[`CommonRemoveModal Component Remove contact renders correctly 2`] = `
-<Modal
-  animationType="slide"
-  hardwareAccelerated={false}
-  transparent={true}
-  visible={true}
->
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
-        }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
-            },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
-    }
-  >
-    <RCTScrollView
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
-          },
-        ]
-      }
-    >
-      <View>
-        <View
-          style={
-            Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
-            }
-          }
-        />
-        <View
-          style={
-            Array [
-              Object {
-                "marginBottom": 25,
-              },
-            ]
-          }
-        >
+          />
           <View
             style={
               Array [
@@ -2149,290 +1507,540 @@ exports[`CommonRemoveModal Component Remove contact renders correctly 2`] = `
               ]
             }
           >
-            <Text
+            <View
               style={
                 Array [
                   Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                    "fontWeight": "bold",
+                    "marginBottom": 25,
                   },
                 ]
               }
             >
-              ContactDetails.UnableToRemoveTitle
-            </Text>
-          </View>
-          <View>
-            <Text
-              style={
-                Array [
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 24,
+                      "fontWeight": "bold",
+                    },
+                  ]
+                }
+              >
+                ContactDetails.RemoveTitle
+              </Text>
+            </View>
+            <View>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "normal",
+                    },
+                  ]
+                }
+              >
+                ContactDetails.RemoveContactMessageTop
+              </Text>
+              <View
+                style={
                   Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
-                  },
-                ]
-              }
-            >
-              ContactDetails.UnableToRemoveCaption
-            </Text>
-          </View>
-        </View>
-      </View>
-    </RCTScrollView>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
-          }
-        }
-      >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
-              },
-            ]
-          }
-          width="100%"
-        >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "flexShrink": 1,
+                      },
+                    ]
+                  }
+                >
+                  ContactDetails.RemoveContactsBulletPoint1
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "flexShrink": 1,
+                      },
+                    ]
+                  }
+                >
+                  ContactDetails.RemoveContactsBulletPoint2
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "flexShrink": 1,
+                      },
+                    ]
+                  }
+                >
+                  ContactDetails.RemoveContactsBulletPoint3
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "flexShrink": 1,
+                      },
+                    ]
+                  }
+                >
+                  ContactDetails.RemoveContactsBulletPoint4
+                </Text>
+              </View>
+              <Text
+                style={
                   Array [
-                    0,
-                    0,
-                    1,
-                    -16777216,
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "normal",
+                    },
+                    Object {
+                      "marginTop": 10,
+                    },
                   ]
                 }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+              >
+                ContactDetails.RemoveContactMessageBottom
+              </Text>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
       <View
         style={
           Array [
             Object {
-              "paddingTop": 10,
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
             },
           ]
         }
       >
         <View
-          accessibilityLabel="ContactDetails.GoToCredentials"
-          accessibilityRole="button"
-          accessibilityState={
+          style={
             Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
             }
           }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+        >
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
+                },
+              ]
             }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+            width="100%"
+          >
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
+                    Array [
+                      0,
+                      0,
+                      1,
+                      -16777216,
+                    ]
+                  }
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
+                  Array [
+                    1,
+                    "gradient",
+                  ]
+                }
+                height="30"
+                propList={
+                  Array [
+                    "fill",
+                  ]
+                }
+                width="100%"
+                x={0}
+                y={0}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+        <View
           style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/GoToCredentialsButton"
         >
           <View
+            accessibilityLabel="ContactDetails.RemoveContact"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/ConfirmRemoveButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              ContactDetails.GoToCredentials
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                ContactDetails.RemoveContact
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
         <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/AbortGoToCredentialsButton"
         >
           <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/CancelRemoveButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#42803E",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              Global.Cancel
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#42803E",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Cancel
+              </Text>
+            </View>
           </View>
         </View>
       </View>
-    </View>
-  </RNCSafeAreaView>
+    </RNCSafeAreaView>
+  </View>
 </Modal>
 `;
 
-exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
+exports[`CommonRemoveModal Component Remove contact renders correctly 2`] = `
 <Modal
   animationType="slide"
   hardwareAccelerated={false}
@@ -2441,218 +2049,328 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
 >
   <View
     style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
+      }
     }
   >
     <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "backgroundColor": "#000000",
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
+          },
+        ]
       }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+    >
+      <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
         }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
         }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
-            },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
+          Object {
+            "opacity": 1,
+          }
         }
+        testID="com.ariesbifold:id/Close"
       >
-        
-      </Text>
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "color": "#FFFFFF",
+                "fontSize": 42,
+              },
+              undefined,
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
     </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
-    }
-  >
-    <RCTScrollView
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
       style={
         Array [
           Object {
             "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
           },
         ]
       }
     >
-      <View>
+      <RCTScrollView
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "center",
+              }
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "marginBottom": 25,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "marginBottom": 25,
+                  },
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 24,
+                      "fontWeight": "bold",
+                    },
+                  ]
+                }
+              >
+                ContactDetails.UnableToRemoveTitle
+              </Text>
+            </View>
+            <View>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "normal",
+                    },
+                  ]
+                }
+              >
+                ContactDetails.UnableToRemoveCaption
+              </Text>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
+            },
+          ]
+        }
+      >
         <View
           style={
             Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
             }
           }
-        />
+        >
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
+                },
+              ]
+            }
+            width="100%"
+          >
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
+                    Array [
+                      0,
+                      0,
+                      1,
+                      -16777216,
+                    ]
+                  }
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
+                  Array [
+                    1,
+                    "gradient",
+                  ]
+                }
+                height="30"
+                propList={
+                  Array [
+                    "fill",
+                  ]
+                }
+                width="100%"
+                x={0}
+                y={0}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
         <View
           style={
             Array [
               Object {
-                "marginBottom": 25,
+                "paddingTop": 10,
               },
             ]
           }
         >
           <View
-            style={
-              Array [
-                Object {
-                  "marginBottom": 25,
-                },
-              ]
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                    "fontWeight": "bold",
-                  },
-                ]
-              }
-            >
-              CredentialDetails.RemoveTitle
-            </Text>
-          </View>
-          <View>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
-                  },
-                ]
+            accessibilityLabel="ContactDetails.GoToCredentials"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-            >
-              CredentialDetails.RemoveCaption
-            </Text>
-          </View>
-          <View
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "marginTop": 25,
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/GoToCredentialsButton"
           >
             <View
-              accessibilityLabel="CredentialDetails.YouWillNotLose"
-              accessibilityState={
-                Object {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                Object {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "backgroundColor": "#313132",
-                  "borderRadius": 5,
+                  "alignItems": "center",
                   "flexDirection": "row",
-                  "justifyContent": "space-between",
-                  "opacity": 1,
-                  "padding": 15,
+                  "justifyContent": "center",
                 }
               }
-              testID="com.ariesbifold:id/CredentialDetails.YouWillNotLose"
             >
               <Text
                 style={
@@ -2660,576 +2378,912 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
                     Object {
                       "color": "#FFFFFF",
                       "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
                       "fontWeight": "bold",
+                      "textAlign": "center",
                     },
+                    false,
+                    false,
+                    false,
                   ]
                 }
               >
-                CredentialDetails.YouWillNotLose
+                ContactDetails.GoToCredentials
               </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+            testID="com.ariesbifold:id/AbortGoToCredentialsButton"
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
+              }
+            >
               <Text
-                allowFontScaling={false}
-                selectable={false}
                 style={
                   Array [
                     Object {
-                      "color": "#FFFFFF",
-                      "fontSize": 24,
-                    },
-                    undefined,
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "color": "#42803E",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
                     },
-                    Object {},
+                    false,
+                    false,
+                    false,
                   ]
                 }
               >
-                
+                Global.Cancel
               </Text>
             </View>
-            <View
-              collapsable={false}
-              pointerEvents="auto"
-              style={
-                Object {
-                  "height": 0,
-                  "overflow": "hidden",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                onLayout={[Function]}
-                style={Object {}}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "borderLeftColor": "#313132",
-                        "borderLeftWidth": 2,
-                        "marginTop": 10,
-                      },
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "marginBottom": 5,
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FFFFFF",
-                            "fontSize": 18,
-                            "fontWeight": "normal",
-                          },
-                          Object {
-                            "color": "#FFFFFF",
-                            "paddingLeft": 5,
-                          },
-                        ]
-                      }
-                    >
-                      •
-                    </Text>
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FFFFFF",
-                            "fontSize": 18,
-                            "fontWeight": "normal",
-                          },
-                          Object {
-                            "color": "#FFFFFF",
-                            "flex": 1,
-                            "paddingLeft": 5,
-                          },
-                        ]
-                      }
-                    >
-                      CredentialDetails.YouWillNotLoseListItem1
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "marginBottom": 5,
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FFFFFF",
-                            "fontSize": 18,
-                            "fontWeight": "normal",
-                          },
-                          Object {
-                            "color": "#FFFFFF",
-                            "paddingLeft": 5,
-                          },
-                        ]
-                      }
-                    >
-                      •
-                    </Text>
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FFFFFF",
-                            "fontSize": 18,
-                            "fontWeight": "normal",
-                          },
-                          Object {
-                            "color": "#FFFFFF",
-                            "flex": 1,
-                            "paddingLeft": 5,
-                          },
-                        ]
-                      }
-                    >
-                      CredentialDetails.YouWillNotLoseListItem2
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
           </View>
+        </View>
+      </View>
+    </RNCSafeAreaView>
+  </View>
+</Modal>
+`;
+
+exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  transparent={true}
+  visible={true}
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "backgroundColor": "#000000",
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+        testID="com.ariesbifold:id/Close"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "color": "#FFFFFF",
+                "fontSize": 42,
+              },
+              undefined,
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#000000",
+          },
+        ]
+      }
+    >
+      <RCTScrollView
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
+            },
+          ]
+        }
+      >
+        <View>
           <View
             style={
               Object {
-                "marginTop": 25,
+                "flexDirection": "row",
+                "justifyContent": "center",
               }
             }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "marginBottom": 25,
+                },
+              ]
+            }
           >
             <View
-              accessibilityLabel="CredentialDetails.HowToGetThisCredentialBack"
-              accessibilityState={
-                Object {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                Object {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
               style={
-                Object {
-                  "backgroundColor": "#313132",
-                  "borderRadius": 5,
-                  "flexDirection": "row",
-                  "justifyContent": "space-between",
-                  "opacity": 1,
-                  "padding": 15,
-                }
+                Array [
+                  Object {
+                    "marginBottom": 25,
+                  },
+                ]
               }
-              testID="com.ariesbifold:id/CredentialDetails.HowToGetThisCredentialBack"
             >
               <Text
                 style={
                   Array [
                     Object {
                       "color": "#FFFFFF",
-                      "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
+                      "fontSize": 24,
                       "fontWeight": "bold",
                     },
                   ]
                 }
               >
-                CredentialDetails.HowToGetThisCredentialBack
+                CredentialDetails.RemoveTitle
               </Text>
+            </View>
+            <View>
               <Text
-                allowFontScaling={false}
-                selectable={false}
                 style={
                   Array [
                     Object {
                       "color": "#FFFFFF",
-                      "fontSize": 24,
-                    },
-                    undefined,
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
+                      "fontSize": 18,
                       "fontWeight": "normal",
                     },
-                    Object {},
                   ]
                 }
               >
-                
+                CredentialDetails.RemoveCaption
               </Text>
             </View>
             <View
-              collapsable={false}
-              pointerEvents="auto"
               style={
                 Object {
-                  "height": 0,
-                  "overflow": "hidden",
+                  "marginTop": 25,
                 }
               }
             >
               <View
+                accessibilityLabel="CredentialDetails.YouWillNotLose"
+                accessibilityState={
+                  Object {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  Object {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
                 collapsable={false}
-                onLayout={[Function]}
-                style={Object {}}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#313132",
+                    "borderRadius": 5,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                    "opacity": 1,
+                    "padding": 15,
+                  }
+                }
+                testID="com.ariesbifold:id/CredentialDetails.YouWillNotLose"
               >
-                <View
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "fontWeight": "bold",
+                      },
+                    ]
+                  }
+                >
+                  CredentialDetails.YouWillNotLose
+                </Text>
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
                   style={
                     Array [
                       Object {
-                        "borderLeftColor": "#313132",
-                        "borderLeftWidth": 2,
-                        "marginTop": 10,
+                        "color": "#FFFFFF",
+                        "fontSize": 24,
+                      },
+                      undefined,
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
                       },
+                      Object {},
                     ]
                   }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="auto"
+                style={
+                  Object {
+                    "height": 0,
+                    "overflow": "hidden",
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  onLayout={[Function]}
+                  style={Object {}}
                 >
                   <View
                     style={
                       Array [
                         Object {
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "marginBottom": 5,
+                          "borderLeftColor": "#313132",
+                          "borderLeftWidth": 2,
+                          "marginTop": 10,
                         },
                       ]
                     }
                   >
-                    <Text
+                    <View
                       style={
                         Array [
                           Object {
-                            "color": "#FFFFFF",
-                            "fontSize": 18,
-                            "fontWeight": "normal",
-                          },
-                          Object {
-                            "color": "#FFFFFF",
-                            "paddingLeft": 5,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "marginBottom": 5,
                           },
                         ]
                       }
                     >
-                      •
-                    </Text>
-                    <Text
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#FFFFFF",
+                              "fontSize": 18,
+                              "fontWeight": "normal",
+                            },
+                            Object {
+                              "color": "#FFFFFF",
+                              "paddingLeft": 5,
+                            },
+                          ]
+                        }
+                      >
+                        •
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#FFFFFF",
+                              "fontSize": 18,
+                              "fontWeight": "normal",
+                            },
+                            Object {
+                              "color": "#FFFFFF",
+                              "flex": 1,
+                              "paddingLeft": 5,
+                            },
+                          ]
+                        }
+                      >
+                        CredentialDetails.YouWillNotLoseListItem1
+                      </Text>
+                    </View>
+                    <View
                       style={
                         Array [
                           Object {
-                            "color": "#FFFFFF",
-                            "fontSize": 18,
-                            "fontWeight": "normal",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "marginBottom": 5,
                           },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#FFFFFF",
+                              "fontSize": 18,
+                              "fontWeight": "normal",
+                            },
+                            Object {
+                              "color": "#FFFFFF",
+                              "paddingLeft": 5,
+                            },
+                          ]
+                        }
+                      >
+                        •
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#FFFFFF",
+                              "fontSize": 18,
+                              "fontWeight": "normal",
+                            },
+                            Object {
+                              "color": "#FFFFFF",
+                              "flex": 1,
+                              "paddingLeft": 5,
+                            },
+                          ]
+                        }
+                      >
+                        CredentialDetails.YouWillNotLoseListItem2
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "marginTop": 25,
+                }
+              }
+            >
+              <View
+                accessibilityLabel="CredentialDetails.HowToGetThisCredentialBack"
+                accessibilityState={
+                  Object {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  Object {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#313132",
+                    "borderRadius": 5,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                    "opacity": 1,
+                    "padding": 15,
+                  }
+                }
+                testID="com.ariesbifold:id/CredentialDetails.HowToGetThisCredentialBack"
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "fontWeight": "bold",
+                      },
+                    ]
+                  }
+                >
+                  CredentialDetails.HowToGetThisCredentialBack
+                </Text>
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 24,
+                      },
+                      undefined,
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="auto"
+                style={
+                  Object {
+                    "height": 0,
+                    "overflow": "hidden",
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  onLayout={[Function]}
+                  style={Object {}}
+                >
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "borderLeftColor": "#313132",
+                          "borderLeftWidth": 2,
+                          "marginTop": 10,
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
                           Object {
-                            "color": "#FFFFFF",
-                            "flex": 1,
-                            "paddingLeft": 5,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "marginBottom": 5,
                           },
                         ]
                       }
                     >
-                      CredentialDetails.HowToGetThisCredentialBackListItem1
-                    </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#FFFFFF",
+                              "fontSize": 18,
+                              "fontWeight": "normal",
+                            },
+                            Object {
+                              "color": "#FFFFFF",
+                              "paddingLeft": 5,
+                            },
+                          ]
+                        }
+                      >
+                        •
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#FFFFFF",
+                              "fontSize": 18,
+                              "fontWeight": "normal",
+                            },
+                            Object {
+                              "color": "#FFFFFF",
+                              "flex": 1,
+                              "paddingLeft": 5,
+                            },
+                          ]
+                        }
+                      >
+                        CredentialDetails.HowToGetThisCredentialBackListItem1
+                      </Text>
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTScrollView>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
-          }
-        }
-      >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
-              },
-            ]
-          }
-          width="100%"
-        >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
-                  Array [
-                    0,
-                    0,
-                    1,
-                    -16777216,
-                  ]
-                }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+      </RCTScrollView>
       <View
         style={
           Array [
             Object {
-              "paddingTop": 10,
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
             },
           ]
         }
       >
         <View
-          accessibilityLabel="CredentialDetails.RemoveCredential"
-          accessibilityRole="button"
-          accessibilityState={
+          style={
             Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
             }
           }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+        >
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
+                },
+              ]
             }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+            width="100%"
+          >
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
+                    Array [
+                      0,
+                      0,
+                      1,
+                      -16777216,
+                    ]
+                  }
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
+                  Array [
+                    1,
+                    "gradient",
+                  ]
+                }
+                height="30"
+                propList={
+                  Array [
+                    "fill",
+                  ]
+                }
+                width="100%"
+                x={0}
+                y={0}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+        <View
           style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/ConfirmRemoveButton"
         >
           <View
+            accessibilityLabel="CredentialDetails.RemoveCredential"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/ConfirmRemoveButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              CredentialDetails.RemoveFromWallet
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                CredentialDetails.RemoveFromWallet
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
         <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/CancelRemoveButton"
         >
           <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/CancelRemoveButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#42803E",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              Global.Cancel
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#42803E",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Cancel
+              </Text>
+            </View>
           </View>
         </View>
       </View>
-    </View>
-  </RNCSafeAreaView>
+    </RNCSafeAreaView>
+  </View>
 </Modal>
 `;
 
@@ -3242,133 +3296,132 @@ exports[`CommonRemoveModal Component Rerenders correctly when not visible 1`] =
 >
   <View
     style={
-      Array [
-        Object {
-          "alignItems": "flex-end",
-          "backgroundColor": "#000000",
-          "borderTopLeftRadius": 10,
-          "borderTopRightRadius": 10,
-          "height": 55,
-          "marginTop": 65,
-          "paddingRight": 20,
-          "paddingTop": 10,
-        },
-      ]
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.5)",
+        "flex": 1,
+      }
     }
   >
     <View
-      accessibilityLabel="Global.Close"
-      accessibilityRole="button"
-      accessibilityState={
-        Object {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "backgroundColor": "#000000",
+            "borderTopLeftRadius": 10,
+            "borderTopRightRadius": 10,
+            "height": 55,
+            "marginTop": 65,
+            "paddingRight": 20,
+            "paddingTop": 10,
+          },
+        ]
       }
-      accessibilityValue={
-        Object {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+    >
+      <View
+        accessibilityLabel="Global.Close"
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 44,
-          "left": 44,
-          "right": 44,
-          "top": 44,
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
         }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 44,
+            "left": 44,
+            "right": 44,
+            "top": 44,
+          }
         }
-      }
-      testID="com.ariesbifold:id/Close"
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 42,
-            },
-            undefined,
-            Object {
-              "fontFamily": "Material Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
+          Object {
+            "opacity": 1,
+          }
         }
+        testID="com.ariesbifold:id/Close"
       >
-        
-      </Text>
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "color": "#FFFFFF",
+                "fontSize": 42,
+              },
+              undefined,
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
     </View>
-  </View>
-  <RNCSafeAreaView
-    edges={
-      Array [
-        "left",
-        "right",
-        "bottom",
-      ]
-    }
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#000000",
-        },
-      ]
-    }
-  >
-    <RCTScrollView
+    <RNCSafeAreaView
+      edges={
+        Array [
+          "left",
+          "right",
+          "bottom",
+        ]
+      }
       style={
         Array [
           Object {
             "backgroundColor": "#000000",
-            "height": "100%",
-            "padding": 20,
           },
         ]
       }
     >
-      <View>
-        <View
-          style={
+      <RCTScrollView
+        style={
+          Array [
             Object {
-              "flexDirection": "row",
-              "justifyContent": "center",
-            }
-          }
-        />
-        <View
-          style={
-            Array [
+              "backgroundColor": "#000000",
+              "height": "100%",
+              "padding": 20,
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            style={
               Object {
-                "marginBottom": 25,
-              },
-            ]
-          }
-        >
+                "flexDirection": "row",
+                "justifyContent": "center",
+              }
+            }
+          />
           <View
             style={
               Array [
@@ -3378,73 +3431,30 @@ exports[`CommonRemoveModal Component Rerenders correctly when not visible 1`] =
               ]
             }
           >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                    "fontWeight": "bold",
-                  },
-                ]
-              }
-            >
-              ContactDetails.RemoveTitle
-            </Text>
-          </View>
-          <View>
-            <Text
+            <View
               style={
                 Array [
                   Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
+                    "marginBottom": 25,
                   },
                 ]
               }
             >
-              ContactDetails.RemoveContactMessageTop
-            </Text>
-            <View
-              style={
-                Object {
-                  "alignItems": "flex-start",
-                  "flexDirection": "row",
-                  "marginVertical": 10,
-                }
-              }
-            >
-              <View
+              <Text
                 style={
-                  Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
-                  }
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 24,
+                      "fontWeight": "bold",
+                    },
+                  ]
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#FFFFFF",
-                        "fontSize": 9,
-                      },
-                      undefined,
-                      Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
+                ContactDetails.RemoveTitle
+              </Text>
+            </View>
+            <View>
               <Text
                 style={
                   Array [
@@ -3453,164 +3463,233 @@ exports[`CommonRemoveModal Component Rerenders correctly when not visible 1`] =
                       "fontSize": 18,
                       "fontWeight": "normal",
                     },
-                    Object {
-                      "flexShrink": 1,
-                    },
                   ]
                 }
               >
-                ContactDetails.RemoveContactsBulletPoint1
+                ContactDetails.RemoveContactMessageTop
               </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "flex-start",
-                  "flexDirection": "row",
-                  "marginVertical": 10,
-                }
-              }
-            >
               <View
                 style={
                   Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
                   }
                 }
               >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     Array [
                       Object {
                         "color": "#FFFFFF",
-                        "fontSize": 9,
+                        "fontSize": 18,
+                        "fontWeight": "normal",
                       },
-                      undefined,
                       Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "flexShrink": 1,
                       },
-                      Object {},
                     ]
                   }
                 >
-                  
+                  ContactDetails.RemoveContactsBulletPoint1
                 </Text>
               </View>
-              <Text
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#FFFFFF",
-                      "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
-                      "flexShrink": 1,
-                    },
-                  ]
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
+                  }
                 }
               >
-                ContactDetails.RemoveContactsBulletPoint2
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "flex-start",
-                  "flexDirection": "row",
-                  "marginVertical": 10,
-                }
-              }
-            >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "normal",
+                      },
+                      Object {
+                        "flexShrink": 1,
+                      },
+                    ]
+                  }
+                >
+                  ContactDetails.RemoveContactsBulletPoint2
+                </Text>
+              </View>
               <View
                 style={
                   Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
                   }
                 }
               >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     Array [
                       Object {
                         "color": "#FFFFFF",
-                        "fontSize": 9,
+                        "fontSize": 18,
+                        "fontWeight": "normal",
                       },
-                      undefined,
                       Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "flexShrink": 1,
                       },
-                      Object {},
                     ]
                   }
                 >
-                  
+                  ContactDetails.RemoveContactsBulletPoint3
                 </Text>
               </View>
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#FFFFFF",
-                      "fontSize": 18,
-                      "fontWeight": "normal",
-                    },
-                    Object {
-                      "flexShrink": 1,
-                    },
-                  ]
-                }
-              >
-                ContactDetails.RemoveContactsBulletPoint3
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "flex-start",
-                  "flexDirection": "row",
-                  "marginVertical": 10,
-                }
-              }
-            >
               <View
                 style={
                   Object {
-                    "marginRight": 10,
-                    "marginVertical": 6,
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "marginVertical": 10,
                   }
                 }
               >
+                <View
+                  style={
+                    Object {
+                      "marginRight": 10,
+                      "marginVertical": 6,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FFFFFF",
+                          "fontSize": 9,
+                        },
+                        undefined,
+                        Object {
+                          "fontFamily": "Material Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     Array [
                       Object {
                         "color": "#FFFFFF",
-                        "fontSize": 9,
+                        "fontSize": 18,
+                        "fontWeight": "normal",
                       },
-                      undefined,
                       Object {
-                        "fontFamily": "Material Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "flexShrink": 1,
                       },
-                      Object {},
                     ]
                   }
                 >
-                  
+                  ContactDetails.RemoveContactsBulletPoint4
                 </Text>
               </View>
               <Text
@@ -3622,281 +3701,265 @@ exports[`CommonRemoveModal Component Rerenders correctly when not visible 1`] =
                       "fontWeight": "normal",
                     },
                     Object {
-                      "flexShrink": 1,
+                      "marginTop": 10,
                     },
                   ]
                 }
               >
-                ContactDetails.RemoveContactsBulletPoint4
+                ContactDetails.RemoveContactMessageBottom
               </Text>
             </View>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
-                  },
-                  Object {
-                    "marginTop": 10,
-                  },
-                ]
-              }
-            >
-              ContactDetails.RemoveContactMessageBottom
-            </Text>
           </View>
         </View>
-      </View>
-    </RCTScrollView>
-    <View
-      style={
-        Array [
-          Object {
-            "marginBottom": 108,
-            "marginHorizontal": 20,
-            "marginTop": "auto",
-            "position": "relative",
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 30,
-            "position": "absolute",
-            "top": -30,
-            "width": "100%",
-          }
-        }
-      >
-        <RNSVGSvgView
-          bbHeight="30"
-          bbWidth="100%"
-          focusable={false}
-          height="30"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "flex": 0,
-                "height": 30,
-                "width": "100%",
-              },
-            ]
-          }
-          width="100%"
-        >
-          <RNSVGGroup>
-            <RNSVGDefs>
-              <RNSVGLinearGradient
-                gradient={
-                  Array [
-                    0,
-                    0,
-                    1,
-                    -16777216,
-                  ]
-                }
-                gradientTransform={null}
-                gradientUnits={0}
-                name="gradient"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              />
-            </RNSVGDefs>
-            <RNSVGRect
-              fill={
-                Array [
-                  1,
-                  "gradient",
-                ]
-              }
-              height="30"
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              width="100%"
-              x={0}
-              y={0}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+      </RCTScrollView>
       <View
         style={
           Array [
             Object {
-              "paddingTop": 10,
+              "marginBottom": 108,
+              "marginHorizontal": 20,
+              "marginTop": "auto",
+              "position": "relative",
             },
           ]
         }
       >
         <View
-          accessibilityLabel="ContactDetails.RemoveContact"
-          accessibilityRole="button"
-          accessibilityState={
+          style={
             Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
+              "height": 30,
+              "position": "absolute",
+              "top": -30,
+              "width": "100%",
             }
           }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+        >
+          <RNSVGSvgView
+            bbHeight="30"
+            bbWidth="100%"
+            focusable={false}
+            height="30"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 30,
+                  "width": "100%",
+                },
+              ]
             }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+            width="100%"
+          >
+            <RNSVGGroup>
+              <RNSVGDefs>
+                <RNSVGLinearGradient
+                  gradient={
+                    Array [
+                      0,
+                      0,
+                      1,
+                      -16777216,
+                    ]
+                  }
+                  gradientTransform={null}
+                  gradientUnits={0}
+                  name="gradient"
+                  x1="0%"
+                  x2="0%"
+                  y1="0%"
+                  y2="100%"
+                />
+              </RNSVGDefs>
+              <RNSVGRect
+                fill={
+                  Array [
+                    1,
+                    "gradient",
+                  ]
+                }
+                height="30"
+                propList={
+                  Array [
+                    "fill",
+                  ]
+                }
+                width="100%"
+                x={0}
+                y={0}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+        <View
           style={
-            Object {
-              "backgroundColor": "#42803E",
-              "borderRadius": 4,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/ConfirmRemoveButton"
         >
           <View
+            accessibilityLabel="ContactDetails.RemoveContact"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "backgroundColor": "#42803E",
+                "borderRadius": 4,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/ConfirmRemoveButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              ContactDetails.RemoveContact
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                ContactDetails.RemoveContact
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "paddingTop": 10,
-            },
-          ]
-        }
-      >
         <View
-          accessibilityLabel="Global.Cancel"
-          accessibilityRole="button"
-          accessibilityState={
-            Object {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            Object {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderColor": "#42803E",
-              "borderRadius": 4,
-              "borderWidth": 2,
-              "opacity": 1,
-              "padding": 16,
-            }
+            Array [
+              Object {
+                "paddingTop": 10,
+              },
+            ]
           }
-          testID="com.ariesbifold:id/CancelRemoveButton"
         >
           <View
+            accessibilityLabel="Global.Cancel"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              Object {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "borderColor": "#42803E",
+                "borderRadius": 4,
+                "borderWidth": 2,
+                "opacity": 1,
+                "padding": 16,
               }
             }
+            testID="com.ariesbifold:id/CancelRemoveButton"
           >
-            <Text
+            <View
               style={
-                Array [
-                  Object {
-                    "color": "#42803E",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
-                    "textAlign": "center",
-                  },
-                  false,
-                  false,
-                  false,
-                ]
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                }
               }
             >
-              Global.Cancel
-            </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#42803E",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                      "textAlign": "center",
+                    },
+                    false,
+                    false,
+                    false,
+                  ]
+                }
+              >
+                Global.Cancel
+              </Text>
+            </View>
           </View>
         </View>
       </View>
-    </View>
-  </RNCSafeAreaView>
+    </RNCSafeAreaView>
+  </View>
 </Modal>
 `;
diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/CredentialOffer.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/CredentialOffer.test.tsx.snap
index 3a358ba0ec..652e8c6e0c 100644
--- a/packages/legacy/core/__tests__/screens/__snapshots__/CredentialOffer.test.tsx.snap
+++ b/packages/legacy/core/__tests__/screens/__snapshots__/CredentialOffer.test.tsx.snap
@@ -2641,433 +2641,442 @@ exports[`displays a credential offer screen declining a credential 1`] = `
   >
     <View
       style={
-        Array [
-          Object {
-            "alignItems": "flex-end",
-            "backgroundColor": "#000000",
-            "borderTopLeftRadius": 10,
-            "borderTopRightRadius": 10,
-            "height": 55,
-            "marginTop": 65,
-            "paddingRight": 20,
-            "paddingTop": 10,
-          },
-        ]
-      }
-    >
-      <View
-        accessibilityLabel="Global.Close"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          Object {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        hitSlop={
-          Object {
-            "bottom": 44,
-            "left": 44,
-            "right": 44,
-            "top": 44,
-          }
-        }
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "opacity": 1,
-          }
+        Object {
+          "backgroundColor": "rgba(0,0,0,0.5)",
+          "flex": 1,
         }
-        testID="com.ariesbifold:id/Close"
-      >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "#FFFFFF",
-                "fontSize": 42,
-              },
-              undefined,
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
-    <RNCSafeAreaView
-      edges={
-        Array [
-          "left",
-          "right",
-          "bottom",
-        ]
-      }
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-          },
-        ]
       }
     >
-      <RCTScrollView
+      <View
         style={
           Array [
             Object {
+              "alignItems": "flex-end",
               "backgroundColor": "#000000",
-              "height": "100%",
-              "padding": 20,
+              "borderTopLeftRadius": 10,
+              "borderTopRightRadius": 10,
+              "height": 55,
+              "marginTop": 65,
+              "paddingRight": 20,
+              "paddingTop": 10,
             },
           ]
         }
       >
-        <View>
-          <View
-            style={
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
+        <View
+          accessibilityLabel="Global.Close"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
             }
-          >
-            <
-              height={115}
-              width={115}
-            />
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "marginBottom": 25,
-                },
-              ]
+          }
+          accessibilityValue={
+            Object {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                    "fontWeight": "bold",
-                  },
-                ]
-              }
-            >
-              CredentialOffer.DeclineTitle
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
-                    "marginTop": 25,
-                  },
-                  Object {
-                    "marginTop": 30,
-                  },
-                ]
-              }
-            >
-              CredentialOffer.DeclineParagraph1
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "normal",
-                    "marginTop": 25,
-                  },
-                ]
-              }
-            >
-              CredentialOffer.DeclineParagraph2
-            </Text>
-          </View>
-        </View>
-      </RCTScrollView>
-      <View
-        style={
-          Array [
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
             Object {
-              "marginBottom": 108,
-              "marginHorizontal": 20,
-              "marginTop": "auto",
-              "position": "relative",
-            },
-          ]
-        }
-      >
-        <View
+              "bottom": 44,
+              "left": 44,
+              "right": 44,
+              "top": 44,
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "height": 30,
-              "position": "absolute",
-              "top": -30,
-              "width": "100%",
+              "opacity": 1,
             }
           }
+          testID="com.ariesbifold:id/Close"
         >
-          <RNSVGSvgView
-            bbHeight="30"
-            bbWidth="100%"
-            focusable={false}
-            height="30"
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
               Array [
                 Object {
-                  "backgroundColor": "transparent",
-                  "borderWidth": 0,
-                },
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "color": "#FFFFFF",
+                  "fontSize": 42,
                 },
+                undefined,
                 Object {
-                  "flex": 0,
-                  "height": 30,
-                  "width": "100%",
+                  "fontFamily": "Material Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
                 },
+                Object {},
               ]
             }
-            width="100%"
           >
-            <RNSVGGroup>
-              <RNSVGDefs>
-                <RNSVGLinearGradient
-                  gradient={
-                    Array [
-                      0,
-                      0,
-                      1,
-                      -16777216,
-                    ]
-                  }
-                  gradientTransform={null}
-                  gradientUnits={0}
-                  name="gradient"
-                  x1="0%"
-                  x2="0%"
-                  y1="0%"
-                  y2="100%"
-                />
-              </RNSVGDefs>
-              <RNSVGRect
-                fill={
-                  Array [
-                    1,
-                    "gradient",
-                  ]
-                }
-                height="30"
-                propList={
-                  Array [
-                    "fill",
-                  ]
-                }
-                width="100%"
-                x={0}
-                y={0}
-              />
-            </RNSVGGroup>
-          </RNSVGSvgView>
+            
+          </Text>
         </View>
-        <View
+      </View>
+      <RNCSafeAreaView
+        edges={
+          Array [
+            "left",
+            "right",
+            "bottom",
+          ]
+        }
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#000000",
+            },
+          ]
+        }
+      >
+        <RCTScrollView
           style={
             Array [
               Object {
-                "paddingTop": 10,
+                "backgroundColor": "#000000",
+                "height": "100%",
+                "padding": 20,
               },
             ]
           }
         >
-          <View
-            accessibilityLabel="Global.Decline"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              Object {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              Object {
-                "backgroundColor": "#42803E",
-                "borderRadius": 4,
-                "opacity": 1,
-                "padding": 16,
-              }
-            }
-            testID="com.ariesbifold:id/ConfirmDeclineButton"
-          >
+          <View>
             <View
               style={
                 Object {
-                  "alignItems": "center",
                   "flexDirection": "row",
                   "justifyContent": "center",
                 }
               }
+            >
+              <
+                height={115}
+                width={115}
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "marginBottom": 25,
+                  },
+                ]
+              }
             >
               <Text
                 style={
                   Array [
                     Object {
                       "color": "#FFFFFF",
-                      "fontSize": 18,
+                      "fontSize": 24,
                       "fontWeight": "bold",
-                      "textAlign": "center",
                     },
-                    false,
-                    false,
-                    false,
                   ]
                 }
               >
-                Global.Decline
+                CredentialOffer.DeclineTitle
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "normal",
+                      "marginTop": 25,
+                    },
+                    Object {
+                      "marginTop": 30,
+                    },
+                  ]
+                }
+              >
+                CredentialOffer.DeclineParagraph1
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "normal",
+                      "marginTop": 25,
+                    },
+                  ]
+                }
+              >
+                CredentialOffer.DeclineParagraph2
               </Text>
             </View>
           </View>
-        </View>
+        </RCTScrollView>
         <View
           style={
             Array [
               Object {
-                "paddingTop": 10,
+                "marginBottom": 108,
+                "marginHorizontal": 20,
+                "marginTop": "auto",
+                "position": "relative",
               },
             ]
           }
         >
           <View
-            accessibilityLabel="Global.Cancel"
-            accessibilityRole="button"
-            accessibilityState={
+            style={
               Object {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
+                "height": 30,
+                "position": "absolute",
+                "top": -30,
+                "width": "100%",
               }
             }
-            accessibilityValue={
-              Object {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+          >
+            <RNSVGSvgView
+              bbHeight="30"
+              bbWidth="100%"
+              focusable={false}
+              height="30"
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  Object {
+                    "flex": 0,
+                    "height": 30,
+                    "width": "100%",
+                  },
+                ]
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+              width="100%"
+            >
+              <RNSVGGroup>
+                <RNSVGDefs>
+                  <RNSVGLinearGradient
+                    gradient={
+                      Array [
+                        0,
+                        0,
+                        1,
+                        -16777216,
+                      ]
+                    }
+                    gradientTransform={null}
+                    gradientUnits={0}
+                    name="gradient"
+                    x1="0%"
+                    x2="0%"
+                    y1="0%"
+                    y2="100%"
+                  />
+                </RNSVGDefs>
+                <RNSVGRect
+                  fill={
+                    Array [
+                      1,
+                      "gradient",
+                    ]
+                  }
+                  height="30"
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  width="100%"
+                  x={0}
+                  y={0}
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+          <View
             style={
-              Object {
-                "borderColor": "#42803E",
-                "borderRadius": 4,
-                "borderWidth": 2,
-                "opacity": 1,
-                "padding": 16,
+              Array [
+                Object {
+                  "paddingTop": 10,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Global.Decline"
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                Object {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#42803E",
+                  "borderRadius": 4,
+                  "opacity": 1,
+                  "padding": 16,
+                }
               }
+              testID="com.ariesbifold:id/ConfirmDeclineButton"
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FFFFFF",
+                        "fontSize": 18,
+                        "fontWeight": "bold",
+                        "textAlign": "center",
+                      },
+                      false,
+                      false,
+                      false,
+                    ]
+                  }
+                >
+                  Global.Decline
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "paddingTop": 10,
+                },
+              ]
             }
-            testID="com.ariesbifold:id/CancelDeclineButton"
           >
             <View
+              accessibilityLabel="Global.Cancel"
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                Object {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
+                  "borderColor": "#42803E",
+                  "borderRadius": 4,
+                  "borderWidth": 2,
+                  "opacity": 1,
+                  "padding": 16,
                 }
               }
+              testID="com.ariesbifold:id/CancelDeclineButton"
             >
-              <Text
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#42803E",
-                      "fontSize": 18,
-                      "fontWeight": "bold",
-                      "textAlign": "center",
-                    },
-                    false,
-                    false,
-                    false,
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  }
                 }
               >
-                Global.Cancel
-              </Text>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#42803E",
+                        "fontSize": 18,
+                        "fontWeight": "bold",
+                        "textAlign": "center",
+                      },
+                      false,
+                      false,
+                      false,
+                    ]
+                  }
+                >
+                  Global.Cancel
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RNCSafeAreaView>
+      </RNCSafeAreaView>
+    </View>
   </Modal>
 </RNCSafeAreaView>
 `;