From db5f835b2cb98e07fc70ca930ae50bda1fc943b0 Mon Sep 17 00:00:00 2001
From: Bart Spaans <143680439+spaansba@users.noreply.github.com>
Date: Tue, 11 Mar 2025 23:05:08 +0100
Subject: [PATCH 1/4] Removed left padding on KeyboardToolbar when navigation
 arrows are hidden

---
 src/components/KeyboardToolbar/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx
index de2e21b1d5..d89af0ec74 100644
--- a/src/components/KeyboardToolbar/index.tsx
+++ b/src/components/KeyboardToolbar/index.tsx
@@ -109,9 +109,11 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       styles.toolbar,
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
+        paddingLeft: showArrows ? 8 : 0,
+        paddingRight: 8,
       },
     ],
-    [colorScheme, opacity, theme],
+    [colorScheme, opacity, theme, showArrows],
   );
   const offset = useMemo(
     () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
@@ -222,7 +224,6 @@ const styles = StyleSheet.create({
     width: "100%",
     flexDirection: "row",
     height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8,
   },
   doneButton: {
     fontWeight: "600",

From 83d444a940604fff592c3319c0b5f6727ca35e78 Mon Sep 17 00:00:00 2001
From: Bart Spaans <143680439+spaansba@users.noreply.github.com>
Date: Wed, 12 Mar 2025 11:12:15 +0100
Subject: [PATCH 2/4] Improve KeyboardToolbar default buttons layout and
 spacing

---
 .eslintrc.cjs                            |  1 +
 src/components/KeyboardToolbar/Arrow.tsx |  1 -
 src/components/KeyboardToolbar/index.tsx | 21 ++++++++++++---------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 99cce64b2c..86d99d7272 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -38,6 +38,7 @@ module.exports = {
       {
         quoteProps: "consistent",
         trailingComma: "all",
+        endOfLine: "auto",
       },
     ],
     // react-hooks
diff --git a/src/components/KeyboardToolbar/Arrow.tsx b/src/components/KeyboardToolbar/Arrow.tsx
index 9657d23e30..986abc3e61 100644
--- a/src/components/KeyboardToolbar/Arrow.tsx
+++ b/src/components/KeyboardToolbar/Arrow.tsx
@@ -46,7 +46,6 @@ const arrowLine: ViewStyle = {
   borderRadius: 1,
 };
 const arrowUpContainer: ViewStyle = {
-  marginHorizontal: 5,
   width: 30,
   height: 30,
   justifyContent: "center",
diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx
index d89af0ec74..8948d53ad6 100644
--- a/src/components/KeyboardToolbar/index.tsx
+++ b/src/components/KeyboardToolbar/index.tsx
@@ -64,6 +64,7 @@ const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 const KEYBOARD_TOOLBAR_HEIGHT = 42;
 const DEFAULT_OPACITY: HEX = "FF";
+const DEFAULT_BUTTON_PADDING = 8;
 
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
@@ -109,11 +110,9 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       styles.toolbar,
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
-        paddingLeft: showArrows ? 8 : 0,
-        paddingRight: 8,
       },
     ],
-    [colorScheme, opacity, theme, showArrows],
+    [colorScheme, opacity, theme],
   );
   const offset = useMemo(
     () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
@@ -158,7 +157,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
-          <>
+          <View style={styles.arrowsButton}>
             <ButtonContainer
               accessibilityHint="Moves focus to the previous field"
               accessibilityLabel="Previous"
@@ -187,7 +186,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
                 type="next"
               />
             </ButtonContainer>
-          </>
+          </View>
         )}
 
         <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
@@ -198,7 +197,6 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
             accessibilityHint="Closes the keyboard"
             accessibilityLabel="Done"
             rippleRadius={28}
-            style={styles.doneButtonContainer}
             testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
             theme={theme}
             onPress={onPressDone}
@@ -225,12 +223,17 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     height: KEYBOARD_TOOLBAR_HEIGHT,
   },
+  arrowsButton: {
+    flexDirection: "row",
+    gap: 5,
+    paddingHorizontal: DEFAULT_BUTTON_PADDING,
+  },
   doneButton: {
+    alignItems: "center",
+    justifyContent: "center",
     fontWeight: "600",
     fontSize: 15,
-  },
-  doneButtonContainer: {
-    marginRight: 8,
+    paddingHorizontal: DEFAULT_BUTTON_PADDING,
   },
 });
 

From 3e68cd7e03af32ec5c43fe8f0fec89b0e2230111 Mon Sep 17 00:00:00 2001
From: Bart Spaans <143680439+spaansba@users.noreply.github.com>
Date: Wed, 12 Mar 2025 11:50:13 +0100
Subject: [PATCH 3/4] removed unnecessary alignItems and justifyContent

---
 src/components/KeyboardToolbar/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx
index 8948d53ad6..fe8cd893ce 100644
--- a/src/components/KeyboardToolbar/index.tsx
+++ b/src/components/KeyboardToolbar/index.tsx
@@ -229,8 +229,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: DEFAULT_BUTTON_PADDING,
   },
   doneButton: {
-    alignItems: "center",
-    justifyContent: "center",
     fontWeight: "600",
     fontSize: 15,
     paddingHorizontal: DEFAULT_BUTTON_PADDING,

From 61350eef5730c27dd26fa872eb37a98c6865f674 Mon Sep 17 00:00:00 2001
From: Bart Spaans <143680439+spaansba@users.noreply.github.com>
Date: Wed, 12 Mar 2025 12:12:44 +0100
Subject: [PATCH 4/4] removed gap from KeyboardToolbar

---
 src/components/KeyboardToolbar/Arrow.tsx | 12 +++++++++---
 src/components/KeyboardToolbar/index.tsx |  1 -
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/KeyboardToolbar/Arrow.tsx b/src/components/KeyboardToolbar/Arrow.tsx
index 986abc3e61..b364f79c5d 100644
--- a/src/components/KeyboardToolbar/Arrow.tsx
+++ b/src/components/KeyboardToolbar/Arrow.tsx
@@ -45,17 +45,23 @@ const arrowLine: ViewStyle = {
   height: 2,
   borderRadius: 1,
 };
-const arrowUpContainer: ViewStyle = {
+
+const arrowContainer: ViewStyle = {
   width: 30,
   height: 30,
   justifyContent: "center",
   alignItems: "center",
 };
+
 const styles = StyleSheet.create({
-  arrowUpContainer: arrowUpContainer,
+  arrowUpContainer: {
+    ...arrowContainer,
+    marginRight: 2.5,
+  },
   arrowDownContainer: {
-    ...arrowUpContainer,
+    ...arrowContainer,
     transform: [{ rotate: "180deg" }],
+    marginLeft: 2.5,
   },
   arrow: {
     width: 20,
diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx
index fe8cd893ce..179284811d 100644
--- a/src/components/KeyboardToolbar/index.tsx
+++ b/src/components/KeyboardToolbar/index.tsx
@@ -225,7 +225,6 @@ const styles = StyleSheet.create({
   },
   arrowsButton: {
     flexDirection: "row",
-    gap: 5,
     paddingHorizontal: DEFAULT_BUTTON_PADDING,
   },
   doneButton: {