diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
index 18daafbbdfa..0c3bd733091 100644
--- a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
+++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessageAttachment Should match the snapshot when there is an error 1`] = `
+exports[`MessageAttachment Should match the snapshot when everything went fine 1`] = `
 <View
   style={
     Object {
@@ -20,713 +20,864 @@ exports[`MessageAttachment Should match the snapshot when there is an error 1`]
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            >
-              PDF Preview
-            </Text>
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
         <View
+          activityState={2}
           collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          forwardedRef={[Function]}
           pointerEvents="box-none"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTSafeAreaView
-                      emulateUnlessSupported={true}
+                    <View
                       style={
                         Object {
-                          "flexGrow": 1,
-                          "marginHorizontal": 24,
+                          "flex": 1,
                         }
                       }
                     >
-                      <RCTScrollView
-                        centerContent={true}
-                        collapsable={false}
-                        contentContainerStyle={
-                          Array [
-                            Object {
-                              "alignContent": "center",
-                              "alignItems": "stretch",
-                              "flex": 1,
-                              "justifyContent": "center",
-                            },
-                            false,
-                          ]
-                        }
-                        handlerTag={2}
-                        handlerType="NativeViewGestureHandler"
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        waitFor={
-                          Array [
-                            Object {
-                              "current": null,
-                            },
-                          ]
+                      <View
+                        style={
+                          Object {
+                            "flex": 1,
+                          }
                         }
+                        testID="overlayComponent"
                       >
-                        <View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "bottom": 0,
+                                "inset": 0,
+                                "justifyContent": "center",
+                                "left": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                                "zIndex": 1,
+                              },
+                              Object {
+                                "backgroundColor": "rgba(255,255,255,0.7)",
+                                "opacity": 1,
+                              },
+                            ]
+                          }
+                        >
                           <View
                             style={
-                              Object {
-                                "alignItems": "center",
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "height": 100,
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
                             }
                           >
-                            <RNSVGSvgView
-                              align="xMidYMid"
-                              bbHeight={120}
-                              bbWidth={120}
-                              color={4278240714}
-                              focusable={false}
-                              height={120}
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
+                            <View
+                              accessibilityRole="progressbar"
+                              accessible={true}
+                              importantForAccessibility="no-hide-descendants"
                               style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 120,
-                                    "width": 120,
-                                  },
-                                ]
+                                Object {
+                                  "height": 24,
+                                  "width": 24,
+                                }
                               }
-                              tintColor={4278240714}
-                              vbHeight={240}
-                              vbWidth={240}
-                              width={120}
+                              testID="LoadingSpinnerTestID"
                             >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                              <View
+                                collapsable={false}
+                                style={
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "rotateZ": "0deg",
+                                      },
+                                    ],
                                   }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
+                                }
+                                testID="LoadingSpinnerAnimatedTestID"
+                              >
+                                <RNSVGSvgView
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  fill="none"
+                                  focusable={false}
+                                  height={24}
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
                                     Array [
-                                      "fill",
-                                      "fillRule",
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                     ]
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={null}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGDefs>
+                                      <RNSVGLinearGradient
+                                        gradient={
+                                          Array [
+                                            0,
+                                            736995,
+                                            1,
+                                            -16040221,
+                                          ]
+                                        }
+                                        gradientTransform={null}
+                                        gradientUnits={0}
+                                        name="spinner-secondHalf"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      />
+                                      <RNSVGLinearGradient
+                                        gradient={
+                                          Array [
+                                            0,
+                                            -16040221,
+                                            1,
+                                            -16040221,
+                                          ]
+                                        }
+                                        gradientTransform={null}
+                                        gradientUnits={0}
+                                        name="spinner-firstHalf"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      />
+                                    </RNSVGDefs>
+                                    <RNSVGGroup
+                                      propList={
+                                        Array [
+                                          "strokeWidth",
+                                        ]
+                                      }
+                                      strokeWidth={3}
+                                    >
+                                      <RNSVGPath
+                                        d="M 1.5 12 A 10.5 10.5 0 0 1 22.5 12"
+                                        propList={
+                                          Array [
+                                            "stroke",
+                                          ]
+                                        }
+                                        stroke={
+                                          Array [
+                                            1,
+                                            "spinner-secondHalf",
+                                          ]
+                                        }
+                                      />
+                                      <RNSVGPath
+                                        d="M 22.5 12 A 10.5 10.5 0 0 1 1.5 12"
+                                        propList={
+                                          Array [
+                                            "stroke",
+                                          ]
+                                        }
+                                        stroke={
+                                          Array [
+                                            1,
+                                            "spinner-firstHalf",
+                                          ]
+                                        }
+                                      />
+                                      <RNSVGPath
+                                        d="M 1.5 12 A 10.5 10.5 0 0 1 1.5 11.25"
+                                        propList={
+                                          Array [
+                                            "stroke",
+                                            "strokeLinecap",
+                                          ]
+                                        }
+                                        stroke={4278927075}
+                                        strokeLinecap={1}
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "padding": 24,
+                                }
+                              }
+                            >
+                              <Text
+                                accessible={true}
+                                color="bluegrey"
+                                defaultColor="bluegrey"
+                                defaultWeight="Regular"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 16,
+                                      "lineHeight": 24,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Loading document...
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "flex": 1,
+                              },
+                              Object {
+                                "zIndex": 0,
+                              },
+                            ]
+                          }
+                        />
+                      </View>
+                      <View
+                        pointerEvents="box-none"
+                        style={
+                          Object {
+                            "marginTop": -50,
+                            "overflow": "hidden",
+                            "paddingTop": 50,
+                            "width": "100%",
+                          }
+                        }
+                        testID="FooterWithButtons"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "alignContent": "center",
+                                  "flex": 1,
+                                  "justifyContent": "center",
+                                }
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Save or share"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "busy": false,
+                                    "disabled": false,
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
-                                  fill={4278927075}
-                                  propList={
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={Object {}}
+                              >
+                                <View
+                                  style={
                                     Array [
-                                      "fill",
+                                      Object {
+                                        "alignItems": "center",
+                                        "borderRadius": 4,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "justifyContent": "center",
+                                        "paddingHorizontal": 16,
+                                        "textAlignVertical": "center",
+                                      },
+                                      Object {
+                                        "overflow": "hidden",
+                                      },
+                                      false,
+                                      Object {
+                                        "height": 40,
+                                      },
+                                      Object {
+                                        "backgroundColor": "#0073E6",
+                                      },
+                                      Object {
+                                        "backgroundColor": undefined,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
                                     ]
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                >
+                                  <View
+                                    entering={[Function]}
+                                    exiting={[Function]}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                        },
+                                        false,
+                                      ]
+                                    }
+                                  >
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="white"
+                                      defaultColor="white"
+                                      defaultWeight="Bold"
+                                      ellipsizeMode="tail"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 16,
+                                        }
+                                      }
+                                      maxFontSizeMultiplier={1.3}
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "alignSelf": "center",
+                                          },
+                                          Object {
+                                            "fontSize": 16,
+                                          },
+                                          Object {
+                                            "color": "#FFFFFF",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "700",
+                                          },
+                                        ]
+                                      }
+                                      weight="Bold"
+                                    >
+                                      Save or share
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
+                        <View
+                          accessibilityRole="header"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "marginTop": 0,
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={8}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
-                                  fill={4278927075}
-                                  propList={
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  color={4279111443}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
                                     Array [
-                                      "fill",
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                     ]
                                   }
-                                />
-                                <RNSVGPath
-                                  d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                  tintColor={4279111443}
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup>
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Array [
+                                          2,
+                                        ]
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "flexGrow": 1,
+                                    "flexShrink": 1,
+                                    "fontSize": 14,
+                                    "marginHorizontal": 16,
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                  Object {
+                                    "opacity": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              PDF Preview
+                            </Text>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
                                   }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  style={
                                     Array [
-                                      "fill",
-                                      "fillRule",
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
                                     ]
                                   }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
-                            <View
-                              style={
-                                Object {
-                                  "height": 24,
-                                }
-                              }
-                            />
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
+                                      Object {
+                                        "color": undefined,
+                                      }
+                                    }
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    color={4279111443}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4279111443}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
                           </View>
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            weight="SemiBold"
-                          >
-                            There is a temporary problem, please try again.
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            color="grey-650"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                },
-                                Object {
-                                  "color": "#636B82",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            If the problem is not resolved, report it with the '?' icon at the top right, thank you!
-                          </Text>
                         </View>
-                      </RCTScrollView>
-                    </RCTSafeAreaView>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -734,12 +885,26 @@ exports[`MessageAttachment Should match the snapshot when there is an error 1`]
           </View>
         </View>
       </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
 `;
 
-exports[`MessageAttachment Should match the snapshot when everything went fine 1`] = `
+exports[`MessageAttachment Should match the snapshot when there is an error 1`] = `
 <View
   style={
     Object {
@@ -759,466 +924,154 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            >
-              PDF Preview
-            </Text>
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
         <View
+          activityState={2}
           collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          forwardedRef={[Function]}
           pointerEvents="box-none"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
@@ -1228,74 +1081,57 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                           "flex": 1,
                         }
                       }
-                      testID="overlayComponent"
                     >
-                      <View
+                      <RCTSafeAreaView
+                        emulateUnlessSupported={true}
                         style={
-                          Array [
-                            Object {
-                              "backgroundColor": "#FFFFFF",
-                              "bottom": 0,
-                              "inset": 0,
-                              "justifyContent": "center",
-                              "left": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                              "zIndex": 1,
-                            },
-                            Object {
-                              "backgroundColor": "rgba(255,255,255,0.7)",
-                              "opacity": 1,
-                            },
-                          ]
+                          Object {
+                            "flexGrow": 1,
+                            "marginHorizontal": 24,
+                          }
                         }
                       >
-                        <View
-                          style={
+                        <RCTScrollView
+                          centerContent={true}
+                          collapsable={false}
+                          contentContainerStyle={
                             Array [
                               Object {
-                                "alignItems": "center",
+                                "alignContent": "center",
+                                "alignItems": "stretch",
                                 "flex": 1,
-                                "height": 100,
                                 "justifyContent": "center",
                               },
-                              undefined,
+                              false,
                             ]
                           }
-                        >
-                          <View
-                            accessibilityRole="progressbar"
-                            accessible={true}
-                            importantForAccessibility="no-hide-descendants"
-                            style={
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          waitFor={
+                            Array [
                               Object {
-                                "height": 24,
-                                "width": 24,
-                              }
-                            }
-                            testID="LoadingSpinnerTestID"
-                          >
+                                "current": null,
+                              },
+                            ]
+                          }
+                        >
+                          <View>
                             <View
-                              collapsable={false}
                               style={
                                 Object {
-                                  "transform": Array [
-                                    Object {
-                                      "rotateZ": "0deg",
-                                    },
-                                  ],
+                                  "alignItems": "center",
                                 }
                               }
-                              testID="LoadingSpinnerAnimatedTestID"
                             >
                               <RNSVGSvgView
                                 align="xMidYMid"
-                                bbHeight={24}
-                                bbWidth={24}
-                                fill="none"
+                                bbHeight={120}
+                                bbWidth={120}
+                                color={4278240714}
                                 focusable={false}
-                                height={24}
+                                height={120}
                                 meetOrSlice={0}
                                 minX={0}
                                 minY={0}
@@ -1307,128 +1143,163 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                     },
                                     Object {
                                       "flex": 0,
-                                      "height": 24,
-                                      "width": 24,
+                                      "height": 120,
+                                      "width": 120,
                                     },
                                   ]
                                 }
-                                vbHeight={24}
-                                vbWidth={24}
-                                width={24}
+                                tintColor={4278240714}
+                                vbHeight={240}
+                                vbWidth={240}
+                                width={120}
                               >
-                                <RNSVGGroup
-                                  fill={null}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                >
-                                  <RNSVGDefs>
-                                    <RNSVGLinearGradient
-                                      gradient={
-                                        Array [
-                                          0,
-                                          736995,
-                                          1,
-                                          -16040221,
-                                        ]
-                                      }
-                                      gradientTransform={null}
-                                      gradientUnits={0}
-                                      name="spinner-secondHalf"
-                                      x1="0%"
-                                      x2="100%"
-                                      y1="0%"
-                                      y2="0%"
-                                    />
-                                    <RNSVGLinearGradient
-                                      gradient={
-                                        Array [
-                                          0,
-                                          -16040221,
-                                          1,
-                                          -16040221,
-                                        ]
-                                      }
-                                      gradientTransform={null}
-                                      gradientUnits={0}
-                                      name="spinner-firstHalf"
-                                      x1="0%"
-                                      x2="100%"
-                                      y1="0%"
-                                      y2="0%"
-                                    />
-                                  </RNSVGDefs>
-                                  <RNSVGGroup
+                                <RNSVGGroup>
+                                  <RNSVGPath
+                                    d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
+                                    fill={4289392367}
                                     propList={
                                       Array [
-                                        "strokeWidth",
+                                        "fill",
                                       ]
                                     }
-                                    strokeWidth={3}
-                                  >
-                                    <RNSVGPath
-                                      d="M 1.5 12 A 10.5 10.5 0 0 1 22.5 12"
-                                      propList={
-                                        Array [
-                                          "stroke",
-                                        ]
-                                      }
-                                      stroke={
-                                        Array [
-                                          1,
-                                          "spinner-secondHalf",
-                                        ]
-                                      }
-                                    />
-                                    <RNSVGPath
-                                      d="M 22.5 12 A 10.5 10.5 0 0 1 1.5 12"
-                                      propList={
-                                        Array [
-                                          "stroke",
-                                        ]
-                                      }
-                                      stroke={
-                                        Array [
-                                          1,
-                                          "spinner-firstHalf",
-                                        ]
-                                      }
-                                    />
-                                    <RNSVGPath
-                                      d="M 1.5 12 A 10.5 10.5 0 0 1 1.5 11.25"
-                                      propList={
-                                        Array [
-                                          "stroke",
-                                          "strokeLinecap",
-                                        ]
-                                      }
-                                      stroke={4278927075}
-                                      strokeLinecap={1}
-                                    />
-                                  </RNSVGGroup>
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
+                                    fill={4278240714}
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
+                                    fill={4289392367}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
+                                    fill={4278240714}
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
                                 </RNSVGGroup>
                               </RNSVGSvgView>
+                              <View
+                                style={
+                                  Object {
+                                    "height": 24,
+                                  }
+                                }
+                              />
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "padding": 24,
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
                               }
-                            }
-                          >
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              There is a temporary problem, please try again.
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
                             <Text
-                              accessible={true}
-                              color="bluegrey"
-                              defaultColor="bluegrey"
-                              defaultWeight="Regular"
+                              color="grey-650"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
                               font="TitilliumWeb"
                               fontStyle={
                                 Object {
-                                  "fontSize": 16,
-                                  "lineHeight": 24,
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
                                 }
                               }
                               style={
@@ -1437,11 +1308,11 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                     "textAlign": "center",
                                   },
                                   Object {
-                                    "fontSize": 16,
-                                    "lineHeight": 24,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   },
                                   Object {
-                                    "color": "#475A6D",
+                                    "color": "#636B82",
                                     "fontFamily": "Titillium Web",
                                     "fontStyle": "normal",
                                     "fontWeight": "400",
@@ -1450,82 +1321,70 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                               }
                               weight="Regular"
                             >
-                              Loading document...
+                              If the problem is not resolved, report it with the '?' icon at the top right, thank you!
                             </Text>
                           </View>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "flex": 1,
-                            },
-                            Object {
-                              "zIndex": 0,
-                            },
-                          ]
-                        }
-                      />
+                        </RCTScrollView>
+                      </RCTSafeAreaView>
                     </View>
                     <View
+                      collapsable={false}
                       pointerEvents="box-none"
-                      style={
-                        Object {
-                          "marginTop": -50,
-                          "overflow": "hidden",
-                          "paddingTop": 50,
-                          "width": "100%",
-                        }
-                      }
-                      testID="FooterWithButtons"
+                      style={Object {}}
                     >
                       <View
-                        style={
-                          Object {
-                            "backgroundColor": "#FFFFFF",
-                            "elevation": 20,
-                            "paddingBottom": 16,
-                            "paddingHorizontal": 24,
-                            "paddingTop": 16,
-                            "shadowColor": "#0E0F13",
-                            "shadowOffset": Object {
-                              "height": 50,
-                              "width": 0,
-                            },
-                            "shadowOpacity": 0.5,
-                            "shadowRadius": 37,
-                          }
-                        }
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
                       >
                         <View
+                          accessibilityRole="header"
                           style={
-                            Object {
-                              "flexDirection": "row",
-                            }
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "alignContent": "center",
-                                "flex": 1,
-                                "justifyContent": "center",
-                              }
+                              Array [
+                                Object {
+                                  "marginTop": 0,
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
+                                },
+                              ]
                             }
                           >
                             <View
-                              accessibilityLabel="Save or share"
+                              accessibilityLabel="Back"
                               accessibilityRole="button"
                               accessibilityState={
                                 Object {
-                                  "busy": false,
                                   "disabled": false,
                                 }
                               }
                               accessible={true}
                               collapsable={false}
                               focusable={true}
+                              hitSlop={8}
                               onBlur={[Function]}
                               onClick={[Function]}
                               onFocus={[Function]}
@@ -1535,32 +1394,21 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                               onResponderTerminate={[Function]}
                               onResponderTerminationRequest={[Function]}
                               onStartShouldSetResponder={[Function]}
-                              style={Object {}}
                             >
                               <View
                                 style={
                                   Array [
                                     Object {
-                                      "alignItems": "center",
-                                      "borderRadius": 4,
-                                      "elevation": 0,
-                                      "flexDirection": "row",
-                                      "justifyContent": "center",
-                                      "paddingHorizontal": 16,
-                                      "textAlignVertical": "center",
-                                    },
-                                    Object {
-                                      "overflow": "hidden",
+                                      "height": 24,
+                                      "width": 24,
                                     },
-                                    false,
                                     Object {
-                                      "height": 40,
+                                      "alignItems": "center",
                                     },
                                     Object {
-                                      "backgroundColor": "#0073E6",
+                                      "justifyContent": "center",
                                     },
                                     Object {
-                                      "backgroundColor": undefined,
                                       "transform": Array [
                                         Object {
                                           "scale": undefined,
@@ -1569,55 +1417,205 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                     },
                                   ]
                                 }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  color={4279111443}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor={4279111443}
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup>
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Array [
+                                          2,
+                                        ]
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "flexGrow": 1,
+                                    "flexShrink": 1,
+                                    "fontSize": 14,
+                                    "marginHorizontal": 16,
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                  Object {
+                                    "opacity": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              PDF Preview
+                            </Text>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                               >
                                 <View
-                                  entering={[Function]}
-                                  exiting={[Function]}
                                   style={
                                     Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                       Object {
                                         "alignItems": "center",
-                                        "flexDirection": "row",
+                                      },
+                                      Object {
                                         "justifyContent": "center",
                                       },
-                                      false,
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
                                     ]
                                   }
                                 >
-                                  <Text
-                                    allowFontScaling={false}
-                                    color="white"
-                                    defaultColor="white"
-                                    defaultWeight="Bold"
-                                    ellipsizeMode="tail"
-                                    font="TitilliumWeb"
-                                    fontStyle={
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
                                       Object {
-                                        "fontSize": 16,
+                                        "color": undefined,
                                       }
                                     }
-                                    maxFontSizeMultiplier={1.3}
-                                    numberOfLines={1}
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    color={4279111443}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
                                     style={
                                       Array [
                                         Object {
-                                          "alignSelf": "center",
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
                                         },
                                         Object {
-                                          "fontSize": 16,
+                                          "color": "#0E0F13",
                                         },
                                         Object {
-                                          "color": "#FFFFFF",
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "700",
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
                                         },
                                       ]
                                     }
-                                    weight="Bold"
+                                    tintColor={4279111443}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
                                   >
-                                    Save or share
-                                  </Text>
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
                                 </View>
                               </View>
                             </View>
@@ -1632,6 +1630,20 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
           </View>
         </View>
       </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
index ec8a030d60f..93325d995c5 100644
--- a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
@@ -20,630 +20,655 @@ exports[`MessageDetails component should match the snapshot with default props 1
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                DUMMY_ROUTE
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY_ROUTE
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
       <View
-        pointerEvents="box-none"
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
         <View
+          activityState={2}
           collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          forwardedRef={[Function]}
           pointerEvents="box-none"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTScrollView>
-                      <View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <RCTScrollView>
+                        <View>
                           <View
                             style={
                               Object {
-                                "flexDirection": "row",
+                                "paddingHorizontal": 24,
                               }
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
                                   "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
                                 }
                               }
                             >
                               <View
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#E8EBF1",
+                                    "borderRadius": 6,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 8,
+                                    "paddingVertical": 6,
                                   }
                                 }
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4278927075}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <View
+                                  style={
+                                    Object {
+                                      "flexShrink": 1,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={16}
+                                    bbWidth={16}
+                                    color={4278927075}
+                                    focusable={false}
+                                    height={16}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0B3EE3",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 16,
+                                          "width": 16,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4278927075}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={16}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "width": 6,
+                                    }
+                                  }
+                                />
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
                                     Array [
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0B3EE3",
+                                        "alignSelf": "center",
+                                        "color": "#555C70",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
                                       },
                                       Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
                                       },
                                     ]
                                   }
-                                  tintColor={4278927075}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                  [missing "en.features.pn.details.badge.legalValue" translation]
+                                </Text>
                               </View>
                               <View
                                 style={
                                   Object {
-                                    "width": 6,
+                                    "width": 8,
                                   }
                                 }
                               />
-                              <Text
-                                ellipsizeMode="tail"
-                                numberOfLines={1}
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignSelf": "center",
-                                      "color": "#555C70",
-                                      "flexShrink": 1,
-                                      "fontSize": 12,
-                                      "lineHeight": 16,
-                                      "textTransform": "uppercase",
-                                    },
-                                    Object {
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "600",
-                                    },
-                                  ]
-                                }
-                              >
-                                Legal value
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "width": 8,
-                                }
-                              }
-                            />
-                            <View
-                              style={
-                                Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
-                                }
-                              }
-                              testID="attachment-tag"
-                            >
                               <View
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#E8EBF1",
+                                    "borderRadius": 6,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 8,
+                                    "paddingVertical": 6,
                                   }
                                 }
+                                testID="attachment-tag"
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4283784304}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <View
                                   style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#555C70",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
-                                      },
-                                    ]
+                                    Object {
+                                      "flexShrink": 1,
+                                    }
                                   }
-                                  tintColor={4283784304}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      propList={
-                                        Array [
-                                          "fill",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={16}
+                                    bbWidth={16}
+                                    color={4283784304}
+                                    focusable={false}
+                                    height={16}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#555C70",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 16,
+                                          "width": 16,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4283784304}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={16}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
                               }
-                            }
-                            style={
-                              Array [
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
                                 Object {
                                   "fontSize": 24,
                                   "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            testID="message-header-subject"
-                            weight="SemiBold"
-                          >
-                            ######## subject ########
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
+                                }
                               }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-700"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontSize="regular"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
                               }
-                            }
-                            style={
-                              Array [
+                              testID="message-header-subject"
+                              weight="SemiBold"
+                            >
+                              ######## subject ########
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-700"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontSize="regular"
+                              fontStyle={
                                 Object {
                                   "fontSize": 14,
                                   "lineHeight": 21,
-                                },
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#555C70",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                ]
+                              }
+                              weight="Bold"
+                            >
+                              01 Jan 2020, 00:00
+                            </Text>
+                            <View
+                              style={
                                 Object {
-                                  "color": "#555C70",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "700",
-                                },
-                              ]
-                            }
-                            weight="Bold"
-                          >
-                            01 Jan 2020, 00:00
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
+                                  "height": 8,
+                                }
                               }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "height": 0.5,
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "height": 0.5,
+                                }
                               }
-                            }
-                          />
-                        </View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
+                            />
+                          </View>
                           <View
                             style={
                               Object {
-                                "height": 16,
+                                "paddingHorizontal": 24,
                               }
                             }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-850"
-                            defaultColor="bluegrey"
-                            defaultWeight="Regular"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 16,
-                                "lineHeight": 24,
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
                               }
-                            }
-                            style={
-                              Array [
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-850"
+                              defaultColor="bluegrey"
+                              defaultWeight="Regular"
+                              font="TitilliumWeb"
+                              fontStyle={
                                 Object {
                                   "fontSize": 16,
                                   "lineHeight": 24,
-                                },
-                                Object {
-                                  "color": "#2B2E38",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            ######## abstract ########
-                          </Text>
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#2B2E38",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              ######## abstract ########
+                            </Text>
+                          </View>
                         </View>
-                      </View>
-                    </RCTScrollView>
+                      </RCTScrollView>
+                    </View>
                   </View>
                 </View>
               </View>
diff --git a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
index 9a3f4a76a2f..44fe86ee824 100644
--- a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
+++ b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
@@ -20,633 +20,620 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
         <View
+          activityState={2}
           collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          forwardedRef={[Function]}
           pointerEvents="box-none"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTScrollView>
-                      <View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <RCTScrollView>
+                        <View>
                           <View
                             style={
                               Object {
-                                "flexDirection": "row",
+                                "paddingHorizontal": 24,
                               }
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
                                   "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
                                 }
                               }
                             >
                               <View
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#E8EBF1",
+                                    "borderRadius": 6,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 8,
+                                    "paddingVertical": 6,
                                   }
                                 }
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4278927075}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <View
+                                  style={
+                                    Object {
+                                      "flexShrink": 1,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={16}
+                                    bbWidth={16}
+                                    color={4278927075}
+                                    focusable={false}
+                                    height={16}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0B3EE3",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 16,
+                                          "width": 16,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4278927075}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={16}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "width": 6,
+                                    }
+                                  }
+                                />
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
                                     Array [
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0B3EE3",
+                                        "alignSelf": "center",
+                                        "color": "#555C70",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
                                       },
                                       Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
                                       },
                                     ]
                                   }
-                                  tintColor={4278927075}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                  [missing "en.features.pn.details.badge.legalValue" translation]
+                                </Text>
                               </View>
                               <View
                                 style={
                                   Object {
-                                    "width": 6,
+                                    "width": 8,
                                   }
                                 }
                               />
-                              <Text
-                                ellipsizeMode="tail"
-                                numberOfLines={1}
+                              <View
                                 style={
-                                  Array [
-                                    Object {
-                                      "alignSelf": "center",
-                                      "color": "#555C70",
-                                      "flexShrink": 1,
-                                      "fontSize": 12,
-                                      "lineHeight": 16,
-                                      "textTransform": "uppercase",
-                                    },
-                                    Object {
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "600",
-                                    },
-                                  ]
+                                  Object {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#E8EBF1",
+                                    "borderRadius": 6,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 8,
+                                    "paddingVertical": 6,
+                                  }
                                 }
+                                testID="attachment-tag"
                               >
-                                Legal value
-                              </Text>
+                                <View
+                                  style={
+                                    Object {
+                                      "flexShrink": 1,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={16}
+                                    bbWidth={16}
+                                    color={4283784304}
+                                    focusable={false}
+                                    height={16}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#555C70",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 16,
+                                          "width": 16,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4283784304}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={16}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
                             </View>
                             <View
                               style={
                                 Object {
-                                  "width": 8,
+                                  "height": 8,
                                 }
                               }
                             />
-                            <View
-                              style={
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
                                 Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
                                 }
                               }
-                              testID="attachment-tag"
-                            >
-                              <View
-                                style={
+                              style={
+                                Array [
                                   Object {
-                                    "flexShrink": 1,
-                                  }
-                                }
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              testID="message-header-subject"
+                              weight="SemiBold"
+                            >
+                              ######## subject ########
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-700"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontSize="regular"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#555C70",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                ]
+                              }
+                              weight="Bold"
+                            >
+                              01 Jan 2020, 00:00
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "height": 0.5,
+                                }
+                              }
+                            />
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-850"
+                              defaultColor="bluegrey"
+                              defaultWeight="Regular"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#2B2E38",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              ######## abstract ########
+                            </Text>
+                          </View>
+                        </View>
+                      </RCTScrollView>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
+                        <View
+                          accessibilityRole="header"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "marginTop": 0,
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={8}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
                               >
                                 <RNSVGSvgView
                                   accessibilityElementsHidden={true}
                                   accessibilityLabel=""
                                   accessible={false}
                                   align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4283784304}
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  color={4279111443}
                                   focusable={false}
-                                  height={16}
+                                  height={24}
                                   importantForAccessibility="no-hide-descendants"
                                   meetOrSlice={0}
                                   minX={0}
@@ -658,31 +645,34 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
                                         "borderWidth": 0,
                                       },
                                       Object {
-                                        "color": "#555C70",
+                                        "color": "#0E0F13",
                                       },
                                       Object {
                                         "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
+                                        "height": 24,
+                                        "width": 24,
                                       },
                                     ]
                                   }
-                                  tintColor={4283784304}
+                                  tintColor={4279111443}
                                   vbHeight={24}
                                   vbWidth={24}
-                                  width={16}
+                                  width={24}
                                 >
                                   <RNSVGGroup>
                                     <RNSVGPath
-                                      d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
                                       fill={
                                         Array [
                                           2,
                                         ]
                                       }
+                                      fillRule={0}
                                       propList={
                                         Array [
                                           "fill",
+                                          "fillRule",
                                         ]
                                       }
                                     />
@@ -690,146 +680,148 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
                                 </RNSVGSvgView>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            testID="message-header-subject"
-                            weight="SemiBold"
-                          >
-                            ######## subject ########
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-700"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontSize="regular"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                },
-                                Object {
-                                  "color": "#555C70",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "700",
-                                },
-                              ]
-                            }
-                            weight="Bold"
-                          >
-                            01 Jan 2020, 00:00
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "height": 0.5,
-                              }
-                            }
-                          />
-                        </View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
-                          <View
-                            style={
-                              Object {
-                                "height": 16,
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "flexGrow": 1,
+                                    "flexShrink": 1,
+                                    "fontSize": 14,
+                                    "marginHorizontal": 16,
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                  Object {
+                                    "opacity": 1,
+                                  },
+                                ]
                               }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-850"
-                            defaultColor="bluegrey"
-                            defaultWeight="Regular"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 16,
-                                "lineHeight": 24,
+                            />
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
                               }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 16,
-                                  "lineHeight": 24,
-                                },
-                                Object {
-                                  "color": "#2B2E38",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            ######## abstract ########
-                          </Text>
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
+                                      Object {
+                                        "color": undefined,
+                                      }
+                                    }
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    color={4279111443}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4279111443}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
-                    </RCTScrollView>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -837,6 +829,20 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
           </View>
         </View>
       </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
@@ -862,711 +868,703 @@ exports[`MessageDetailsScreen should match the snapshot when there is an error 1
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
       >
         <View
-          accessibilityRole="header"
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          pointerEvents="box-none"
           style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
           }
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "marginTop": 20,
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
                 },
                 Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
               ]
             }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
+            transitionSpec={
               Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
                 },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
                 },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTSafeAreaView
-                      emulateUnlessSupported={true}
+                    <View
                       style={
                         Object {
-                          "flexGrow": 1,
-                          "marginHorizontal": 24,
+                          "flex": 1,
                         }
                       }
                     >
-                      <RCTScrollView
-                        centerContent={true}
-                        collapsable={false}
-                        contentContainerStyle={
-                          Array [
-                            Object {
-                              "alignContent": "center",
-                              "alignItems": "stretch",
-                              "flex": 1,
-                              "justifyContent": "center",
-                            },
-                            false,
-                          ]
-                        }
-                        handlerTag={2}
-                        handlerType="NativeViewGestureHandler"
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        waitFor={
-                          Array [
-                            Object {
-                              "current": null,
-                            },
-                          ]
+                      <RCTSafeAreaView
+                        emulateUnlessSupported={true}
+                        style={
+                          Object {
+                            "flexGrow": 1,
+                            "marginHorizontal": 24,
+                          }
                         }
                       >
-                        <View>
-                          <View
-                            style={
+                        <RCTScrollView
+                          centerContent={true}
+                          collapsable={false}
+                          contentContainerStyle={
+                            Array [
+                              Object {
+                                "alignContent": "center",
+                                "alignItems": "stretch",
+                                "flex": 1,
+                                "justifyContent": "center",
+                              },
+                              false,
+                            ]
+                          }
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          waitFor={
+                            Array [
                               Object {
-                                "alignItems": "center",
+                                "current": null,
+                              },
+                            ]
+                          }
+                        >
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                }
+                              }
+                            >
+                              <RNSVGSvgView
+                                align="xMidYMid"
+                                bbHeight={120}
+                                bbWidth={120}
+                                color={4278240714}
+                                focusable={false}
+                                height={120}
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 120,
+                                      "width": 120,
+                                    },
+                                  ]
+                                }
+                                tintColor={4278240714}
+                                vbHeight={240}
+                                vbWidth={240}
+                                width={120}
+                              >
+                                <RNSVGGroup>
+                                  <RNSVGPath
+                                    d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
+                                    fill={4289392367}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
+                                    fill={4278240714}
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
+                                    fill={4289392367}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
+                                    fill={4278927075}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
+                                    fill={4278240714}
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                              <View
+                                style={
+                                  Object {
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                            </View>
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
                               }
-                            }
-                          >
-                            <RNSVGSvgView
-                              align="xMidYMid"
-                              bbHeight={120}
-                              bbWidth={120}
-                              color={4278240714}
-                              focusable={false}
-                              height={120}
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
                               style={
                                 Array [
                                   Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
+                                    "textAlign": "center",
                                   },
                                   Object {
-                                    "flex": 0,
-                                    "height": 120,
-                                    "width": 120,
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
                                   },
                                 ]
                               }
-                              tintColor={4278240714}
-                              vbHeight={240}
-                              vbWidth={240}
-                              width={120}
+                              weight="SemiBold"
                             >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
+                              Qualcosa è andato storto
+                            </Text>
                             <View
                               style={
                                 Object {
-                                  "height": 24,
+                                  "height": 8,
                                 }
                               }
                             />
+                            <Text
+                              color="grey-650"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#636B82",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              Non è stato possibile recuperare i dettagli del tuo messaggio. Riprova per favore
+                            </Text>
                           </View>
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
+                        </RCTScrollView>
+                      </RCTSafeAreaView>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
+                        <View
+                          accessibilityRole="header"
+                          style={
+                            Array [
                               Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            weight="SemiBold"
-                          >
-                            Qualcosa è andato storto
-                          </Text>
-                          <View
-                            style={
+                                "backgroundColor": "#FFFFFF",
+                              },
                               Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            color="grey-650"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
+                                "borderBottomWidth": 1,
+                              },
                               Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
-                              }
-                            }
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
+                          }
+                        >
+                          <View
                             style={
                               Array [
                                 Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
+                                  "marginTop": 0,
                                 },
                                 Object {
-                                  "color": "#636B82",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
                                 },
                               ]
                             }
-                            weight="Regular"
                           >
-                            Non è stato possibile recuperare i dettagli del tuo messaggio. Riprova per favore
-                          </Text>
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={8}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  color={4279111443}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor={4279111443}
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup>
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Array [
+                                          2,
+                                        ]
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "flexGrow": 1,
+                                    "flexShrink": 1,
+                                    "fontSize": 14,
+                                    "marginHorizontal": 16,
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                  Object {
+                                    "opacity": 1,
+                                  },
+                                ]
+                              }
+                            />
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
+                                      Object {
+                                        "color": undefined,
+                                      }
+                                    }
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    color={4279111443}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor={4279111443}
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup>
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Array [
+                                            2,
+                                          ]
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
-                      </RCTScrollView>
-                    </RCTSafeAreaView>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -1574,6 +1572,20 @@ exports[`MessageDetailsScreen should match the snapshot when there is an error 1
           </View>
         </View>
       </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>