Mobile: Fixes #8027: Fixed link modal position on devices with notch (#8029)

.gitignore

@@ -352,6 +352,7 @@ packages/app-mobile/components/CustomButton.js
 packages/app-mobile/components/Dropdown.js
 packages/app-mobile/components/ExtendedWebView.js
 packages/app-mobile/components/FolderPicker.js
+packages/app-mobile/components/Modal.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js

packages/app-mobile/components/Modal.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Modal, ModalProps, StyleSheet, View, ViewStyle } from 'react-native';
+import { hasNotch } from 'react-native-device-info';
+
+interface ModalElementProps extends ModalProps {
+	children: React.ReactNode;
+	containerStyle?: ViewStyle;
+	elevation?: Number;
+}
+
+const ModalElement: React.FC<ModalElementProps> = ({
+	children,
+	containerStyle,
+	...modalProps
+}) => {
+	return (
+		<Modal {...modalProps}>
+			<View style={[styleSheet.modalContainer, containerStyle ? containerStyle : null]}>
+				{children}
+			</View>
+		</Modal>
+	);
+};
+
+const styleSheet = StyleSheet.create({
+	modalContainer: {
+		marginTop: hasNotch() ? 65 : 15,
+		marginBottom: hasNotch() ? 35 : 15,
+	},
+});
+
+export default ModalElement;

packages/app-mobile/components/ModalDialog.js

@@ -1,8 +1,10 @@
 const React = require('react');
-const { Text, Modal, View, StyleSheet, Button } = require('react-native');
+const { Text, View, StyleSheet, Button } = require('react-native');
 const { themeStyle } = require('./global-style.js');
 const { _ } = require('@joplin/lib/locale');
 
+import Modal from './Modal';
+
 class ModalDialog extends React.Component {
 	constructor() {
 		super();
@@ -30,6 +32,7 @@ class ModalDialog extends React.Component {
 				margin: 20,
 				padding: 10,
 				borderRadius: 5,
+				elevation: 10,
 			},
 			modalContentWrapper2: {
 				flex: 1,
@@ -56,17 +59,15 @@ class ModalDialog extends React.Component {
 
 		return (
 			<View style={this.styles().modalWrapper}>
-				<Modal transparent={true} visible={true} onRequestClose={() => {}}>
-					<View elevation={10} style={this.styles().modalContentWrapper}>
-						<Text style={this.styles().title}>{this.props.title}</Text>
-						<View style={this.styles().modalContentWrapper2}>{ContentComponent}</View>
-						<View style={this.styles().buttonRow}>
-							<View style={{ flex: 1 }}>
-								<Button disabled={!buttonBarEnabled} title={_('OK')} onPress={this.props.onOkPress}></Button>
-							</View>
-							<View style={{ flex: 1, marginLeft: 5 }}>
-								<Button disabled={!buttonBarEnabled} title={_('Cancel')} onPress={this.props.onCancelPress}></Button>
-							</View>
+				<Modal transparent={true} visible={true} onRequestClose={() => {}} containerStyle={this.styles().modalContentWrapper}>
+					<Text style={this.styles().title}>{this.props.title}</Text>
+					<View style={this.styles().modalContentWrapper2}>{ContentComponent}</View>
+					<View style={this.styles().buttonRow}>
+						<View style={{ flex: 1 }}>
+							<Button disabled={!buttonBarEnabled} title={_('OK')} onPress={this.props.onOkPress}></Button>
+						</View>
+						<View style={{ flex: 1, marginLeft: 5 }}>
+							<Button disabled={!buttonBarEnabled} title={_('Cancel')} onPress={this.props.onCancelPress}></Button>
 						</View>
 					</View>
 				</Modal>

packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx

@@ -3,8 +3,9 @@
 const React = require('react');
 const { useState, useEffect, useMemo, useRef } = require('react');
 const { StyleSheet } = require('react-native');
-const { View, Modal, Text, TextInput, Button } = require('react-native');
+const { View, Text, TextInput, Button } = require('react-native');
 
+import Modal from '../Modal';
 import { themeStyle } from '@joplin/lib/theme';
 import { _ } from '@joplin/lib/locale';
 import { EditorControl } from './types';
@@ -43,7 +44,6 @@ const EditLinkDialog = (props: LinkDialogProps) => {
 				margin: 15,
 				padding: 30,
 				backgroundColor: theme.backgroundColor,
-
 				elevation: 5,
 				shadowOffset: {
 					width: 1,
@@ -132,23 +132,22 @@ const EditLinkDialog = (props: LinkDialogProps) => {
 	return (
 		<Modal
 			animationType="slide"
+			containerStyle={styles.modalContent}
 			transparent={true}
 			visible={props.visible}
 			onRequestClose={() => {
 				props.editorControl.hideLinkDialog();
 			}}>
-			<View style={styles.modalContent}>
-				<Text style={styles.header}>{_('Edit link')}</Text>
-				<View>
-					{linkTextInput}
-					{linkURLInput}
-				</View>
-				<Button
-					style={styles.button}
-					onPress={onSubmit}
-					title={_('Done')}
-				/>
+			<Text style={styles.header}>{_('Edit link')}</Text>
+			<View>
+				{linkTextInput}
+				{linkURLInput}
 			</View>
+			<Button
+				style={styles.button}
+				onPress={onSubmit}
+				title={_('Done')}
+			/>
 		</Modal>
 	);
 };

packages/app-mobile/ios/Podfile.lock

@@ -467,6 +467,8 @@ PODS:
     - React-Core
   - RNDateTimePicker (7.1.0):
     - React-Core
+  - RNDeviceInfo (10.6.0):
+    - React-Core
   - RNExitApp (1.1.0):
     - React
   - RNFileViewer (2.1.5):
@@ -577,6 +579,7 @@ DEPENDENCIES:
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNExitApp (from `../node_modules/react-native-exit-app`)
   - RNFileViewer (from `../node_modules/react-native-file-viewer`)
   - RNFS (from `../node_modules/react-native-fs`)
@@ -718,6 +721,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/push-notification-ios"
   RNDateTimePicker:
     :path: "../node_modules/@react-native-community/datetimepicker"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNExitApp:
     :path: "../node_modules/react-native-exit-app"
   RNFileViewer:
@@ -808,6 +813,7 @@ SPEC CHECKSUMS:
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
   RNCPushNotificationIOS: 64218f3c776c03d7408284a819b2abfda1834bc8
   RNDateTimePicker: 7ecd54a97fc3749f38c3c89a171f6cbd52f3c142
+  RNDeviceInfo: 475a4c447168d0ad4c807e48ef5e0963a0f4eb1b
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
@@ -824,4 +830,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3b2cace838120977b5b54871752c9dddf5a11cea
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0

packages/app-mobile/package.json

@@ -43,6 +43,7 @@
     "react-native": "0.71.10",
     "react-native-action-button": "2.8.5",
     "react-native-camera": "4.2.1",
+    "react-native-device-info": "10.6.0",
     "react-native-dialogbox": "0.6.10",
     "react-native-document-picker": "8.2.1",
     "react-native-dropdownalert": "4.5.1",

yarn.lock

@@ -4402,6 +4402,7 @@ __metadata:
     react-native: 0.71.10
     react-native-action-button: 2.8.5
     react-native-camera: 4.2.1
+    react-native-device-info: 10.6.0
     react-native-dialogbox: 0.6.10
     react-native-document-picker: 8.2.1
     react-native-dropdownalert: 4.5.1
@@ -27906,6 +27907,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-device-info@npm:10.6.0":
+  version: 10.6.0
+  resolution: "react-native-device-info@npm:10.6.0"
+  peerDependencies:
+    react-native: "*"
+  checksum: 7a7cc438844552aef687b4a5b8efd0cd0a2959e0a3b771febfbe0b6a9ca8ff05a563e2912b30b83523bd3d5143d6616ca8fac0476abf01936a726e1578211ebb
+  languageName: node
+  linkType: hard
+
 "react-native-dialogbox@npm:0.6.10":
   version: 0.6.10
   resolution: "react-native-dialogbox@npm:0.6.10"