Mobile: Fixes laurent22#11276: Fix new note button pushed offscreen o…

…n certain Android devices

This commit adjusts an accessibility bug workaround from
(laurent22#10123), which was first present in Android v3.0.1.

**Background**:
React Native Paper's FAB.Group by default renders an invisible <View> that covers most/all
of Joplin's UI when the FAB.Group is collapsed. This breaks TalkBack on Android's "tap to
navigate" feature, which significantly impacts users that rely on TalkBack's ability to use
the app.
Starting from Joplin v3.0.1, the <View> added by React Native is made smaller by Joplin by
adding margins above and to the left. These margins are determined by the screen size and an
offset. This solution isn't perfect because it means that a small portion of the screen still
blocks TalkBack's tap-to-navigate. As reported in laurent22#11276, this workaround also pushed the new
note/new to-do buttons offscren.

**The change**
This commit changes how the FAB.Group's invisible <View> is resized. Previously it was done
with margins. Now, it's done with the top/left absolute positioning properties.

**Note**
If [this upstream pull request](callstack/react-native-paper#4514) is
merged, it should be possible to remove the workaround entirely.

**Remaining steps**
More testing is required before a pull request can be opened. For now, (in part because this is
not a regression from v3.0), I plan to target release-3.2, rather than
release-3.1, to avoid introducing additional regressions in the 3.1 version of the app.

Should fix laurent22#11276, laurent22#11315.

packages/app-mobile/components/buttons/FloatingActionButton.tsx

@@ -3,7 +3,7 @@ import { useState, useCallback, useMemo } from 'react';
 import { FAB, Portal } from 'react-native-paper';
 import { _ } from '@joplin/lib/locale';
 import { Dispatch } from 'redux';
-import { Platform, useWindowDimensions, View } from 'react-native';
+import { Platform, View, ViewStyle } from 'react-native';
 import shim from '@joplin/lib/shim';
 import AccessibleWebMenu from '../accessibility/AccessibleModalMenu';
 const Icon = require('react-native-vector-icons/Ionicons').default;
@@ -71,10 +71,17 @@ const FloatingActionButton = (props: ActionButtonProps) => {
 	// is disabled.
 	//
 	// See https://github.com/callstack/react-native-paper/issues/4064
-	const windowSize = useWindowDimensions();
 	const adjustMargins = !open && shim.mobilePlatform() === 'android';
-	const marginTop = adjustMargins ? Math.max(0, windowSize.height - 140) : undefined;
-	const marginStart = adjustMargins ? Math.max(0, windowSize.width - 200) : undefined;
+	const marginStyles = useMemo((): ViewStyle => {
+		if (!adjustMargins) {
+			return {};
+		}
+
+		return {
+			top: undefined,
+			left: undefined,
+		};
+	}, [adjustMargins]);
 
 	const label = props.mainButton?.label ?? _('Add new');
 
@@ -92,7 +99,7 @@ const FloatingActionButton = (props: ActionButtonProps) => {
 	const menuContent = <FAB.Group
 		open={open}
 		accessibilityLabel={label}
-		style={{ marginStart, marginTop }}
+		style={marginStyles}
 		icon={ open ? openIcon : closedIcon }
 		fabStyle={{
 			backgroundColor: props.mainButton?.color ?? 'rgba(231,76,60,1)',