diff --git a/ts/__mocks__/react-native-device-info.ts b/ts/__mocks__/react-native-device-info.ts
index efbb172b99a..92762f19e5e 100644
--- a/ts/__mocks__/react-native-device-info.ts
+++ b/ts/__mocks__/react-native-device-info.ts
@@ -8,7 +8,8 @@ getDeviceIdMock.mockReturnValue("");
const DeviceInfo = {
getReadableVersion,
- getDeviceId: getDeviceIdMock
+ getDeviceId: getDeviceIdMock,
+ hasNotch: () => true
};
export default DeviceInfo;
diff --git a/ts/components/messages/MessageDetailCTABar.tsx b/ts/components/messages/MessageDetailCTABar.tsx
index 3e9f77c6bcc..4d8b1410d18 100644
--- a/ts/components/messages/MessageDetailCTABar.tsx
+++ b/ts/components/messages/MessageDetailCTABar.tsx
@@ -2,8 +2,9 @@ import * as pot from "italia-ts-commons/lib/pot";
import { fromNullable, fromPredicate } from "fp-ts/lib/Option";
import { View } from "native-base";
import React from "react";
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
import { connect } from "react-redux";
+import DeviceInfo from "react-native-device-info";
import { CreatedMessageWithContent } from "../../../definitions/backend/CreatedMessageWithContent";
import { ServicePublic } from "../../../definitions/backend/ServicePublic";
import { loadServiceMetadata } from "../../store/actions/content";
@@ -33,7 +34,8 @@ type Props = OwnProps &
const styles = StyleSheet.create({
row: {
- flexDirection: "row"
+ flexDirection: "row",
+ paddingBottom: Platform.OS === 'ios' && DeviceInfo.hasNotch() ? 28 : 15,
}
});
diff --git a/ts/components/messages/MessageDetailComponent.tsx b/ts/components/messages/MessageDetailComponent.tsx
index da34dd0b6da..c141f0a091f 100644
--- a/ts/components/messages/MessageDetailComponent.tsx
+++ b/ts/components/messages/MessageDetailComponent.tsx
@@ -1,6 +1,7 @@
import { fromNullable } from "fp-ts/lib/Option";
import * as pot from "italia-ts-commons/lib/pot";
import { Content, H3, Text, View } from "native-base";
+import DeviceInfo from "react-native-device-info";
import * as React from "react";
import { StyleSheet } from "react-native";
import { CreatedMessageWithContentAndAttachments } from "../../../definitions/backend/CreatedMessageWithContentAndAttachments";
@@ -212,8 +213,11 @@ export default class MessageDetailComponent extends React.PureComponent<
)}
-
-
+ {DeviceInfo.hasNotch() &&
+
+
+
+ }
{this.maybeMedicalData.fold(