feat: showArrows property (#379)

## 📜 Description

Added `showArrows` property.

## 💡 Motivation and Context

Sometimes we just want to hide buttons. With current API we have to
override button component (and it's actually very complex process and
it's not reasonable to create such complex solution for such simple
purpose).

So in this PR I added `showArrows` property. It doesn't change current
behavior of the component, but gives an ability to hide these arrows 🙂

## 📢 Changelog

### Docs

- added a note about `showArrows` property;

### JS

- added new `showArrows` property;

## 🤔 How Has This Been Tested?

Tested manually on iPhone 15 Pro (iOS 17.2).

## 📸 Screenshots (if appropriate):


![image](https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/1a2b115c-d445-41e7-85dc-512accc7b9bd)

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

docs/docs/api/components/keyboard-toolbar/index.mdx

@@ -102,6 +102,10 @@ const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
 <KeyboardToolbar icon={Icon} />;
 ```
 
+### `showArrows`
+
+A boolean prop indicating whether to show `next` and `prev` buttons. Can be useful to set it to `false` if you have only one input and want to show only `Done` button. Default to `true`.
+
 ### `theme`
 
 Prop allowing you to specify the brand colors of your application for `KeyboardToolbar` component. If you want to re-use already platform specific colors you can import `DefaultKeyboardToolbarTheme` object and override colors only necessary colors:

docs/versioned_docs/version-1.11.0/api/components/keyboard-toolbar/index.mdx

@@ -102,6 +102,10 @@ const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
 <KeyboardToolbar icon={Icon} />;
 ```
 
+### `showArrows`
+
+A boolean prop indicating whether to show `next` and `prev` buttons. Can be useful to set it to `false` if you have only one input and want to show only `Done` button. Default to `true`.
+
 ### `theme`
 
 Prop allowing you to specify the brand colors of your application for `KeyboardToolbar` component. If you want to re-use already platform specific colors you can import `DefaultKeyboardToolbarTheme` object and override colors only necessary colors:

src/components/KeyboardToolbar/index.tsx

@@ -27,6 +27,11 @@ export type KeyboardToolbarProps = {
   button?: typeof Button;
   /** Custom icon component used to display next/prev buttons. */
   icon?: typeof Arrow;
+  /**
+   * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
+   * and want to show only `Done` button. Default to `true`.
+   */
+  showArrows?: boolean;
 };
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
 const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
@@ -51,6 +56,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   doneText,
   button,
   icon,
+  showArrows = true,
 }) => {
   const colorScheme = useColorScheme();
   const [inputs, setInputs] = useState({
@@ -86,26 +92,38 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   return (
     <KeyboardStickyView offset={offset}>
       <View style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
-        <ButtonContainer
-          accessibilityLabel="Previous"
-          accessibilityHint="Will move focus to previous field"
-          disabled={isPrevDisabled}
-          onPress={goToPrevField}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
-          theme={theme}
-        >
-          <IconContainer disabled={isPrevDisabled} type="prev" theme={theme} />
-        </ButtonContainer>
-        <ButtonContainer
-          accessibilityLabel="Next"
-          accessibilityHint="Will move focus to next field"
-          disabled={isNextDisabled}
-          onPress={goToNextField}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
-          theme={theme}
-        >
-          <IconContainer disabled={isNextDisabled} type="next" theme={theme} />
-        </ButtonContainer>
+        {showArrows && (
+          <>
+            <ButtonContainer
+              accessibilityLabel="Previous"
+              accessibilityHint="Will move focus to previous field"
+              disabled={isPrevDisabled}
+              onPress={goToPrevField}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isPrevDisabled}
+                type="prev"
+                theme={theme}
+              />
+            </ButtonContainer>
+            <ButtonContainer
+              accessibilityLabel="Next"
+              accessibilityHint="Will move focus to next field"
+              disabled={isNextDisabled}
+              onPress={goToNextField}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isNextDisabled}
+                type="next"
+                theme={theme}
+              />
+            </ButtonContainer>
+          </>
+        )}
 
         <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
           {content}