fix: [#175535051] fixes offset scroller for messages (iphone 7)

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;

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,
   }
 });
 

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<
             </React.Fragment>
           )}
         </Content>
-        <View spacer={true} large={true} />
-        <View spacer={true} small={true} />
+        {DeviceInfo.hasNotch() &&
+        <React.Fragment>
+          <View spacer={true} large={true} />
+          <View spacer={true} small={true} />
+        </React.Fragment>}
         {this.maybeMedicalData.fold(
           <MessageDetailCTABar
             message={message}