iOS: Resolves laurent22#11711: Adjust spacing below the Markdown toolbar

packages/app-mobile/components/ToggleSpaceButton.tsx

@@ -11,26 +11,25 @@ import Setting from '@joplin/lib/models/Setting';
 import { themeStyle } from '@joplin/lib/theme';
 
 import * as React from 'react';
-import { ReactNode, useCallback, useState, useEffect } from 'react';
+import { ReactNode, useCallback, useState, useEffect, useMemo } from 'react';
 import { Platform, View, ViewStyle } from 'react-native';
 import IconButton from './IconButton';
 import useKeyboardVisible from '../utils/hooks/useKeyboardVisible';
 
 interface Props {
 	children: ReactNode;
 	themeId: number;
-	style?: ViewStyle;
 }
 
 const ToggleSpaceButton = (props: Props) => {
 	const [additionalSpace, setAdditionalSpace] = useState(0);
 	const [decreaseSpaceBtnVisible, setDecreaseSpaceBtnVisible] = useState(true);
 
 	// Some devices need space added, others need space removed.
-	const additionalPositiveSpace = 14;
-	const additionalNegativeSpace = -14;
+	const additionalPositiveSpace = 30;
+	const additionalNegativeSpace = -8;
 
-	// Switch from adding +14px to -14px.
+	// Switch from adding +30px to -8px.
 	const onDecreaseSpace = useCallback(() => {
 		setAdditionalSpace(additionalNegativeSpace);
 		setDecreaseSpaceBtnVisible(false);
@@ -79,10 +78,11 @@ const ToggleSpaceButton = (props: Props) => {
 	const { keyboardVisible } = useKeyboardVisible();
 	const spaceApplicable = keyboardVisible && Platform.OS === 'ios';
 
-	const style: ViewStyle = {
+	const style: ViewStyle = useMemo(() => ({
 		marginBottom: spaceApplicable ? additionalSpace : 0,
-		...props.style,
-	};
+		// Additional space (if visible) should match the main toolbar background:
+		backgroundColor: theme.backgroundColor3,
+	}), [spaceApplicable, theme, additionalSpace]);
 
 	return (
 		<View style={style}>