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(