Skip to content

Commit dcf226a

Browse files
authored
docs: improvements for KeyboardGestureArea view (#939)
## 📜 Description Improved documentation for `KeyboardGestureArea`. ## 💡 Motivation and Context The good documentation is key aspect of each software development process. I realised, that `KeyboardGestureArea` page was created a long time ago, so in this PR I decided to improve that page. Inspired by #937 (comment) ## 📢 Changelog <!-- High level overview of important changes --> <!-- For example: fixed status bar manipulation; added new types declarations; --> <!-- If your changes don't affect one of platform/language below - then remove this platform/language --> ### Docs - add reference to example app; - mention that `KeyboardGestureArea` works for iOS starting from 1.16+; - add `keyboardDismissMode="interactive"` to `ScrollView` as it's needed for iOS anyway; - update description for `textInputNativeID`; ## 🤔 How Has This Been Tested? Tested via preview. ## 📸 Screenshots (if appropriate): <img width="1006" alt="image" src="https://github.com/user-attachments/assets/e6e57417-aaff-4da8-9f7b-6ca0291d8598" /> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent 8a5364d commit dcf226a

File tree

3 files changed

+24
-9
lines changed

3 files changed

+24
-9
lines changed

docs/docs/api/keyboard-gesture-area.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ keywords:
1313
`KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
1414

1515
:::info Platform availability
16-
This component is available only for Android >= 11. For iOS and Android < 11 it will render `React.Fragment`.
16+
This component is available only for Android >= 11. For Android < 11 it will render `React.Fragment`.
1717
:::
1818

1919
## Props
@@ -39,7 +39,10 @@ A boolean prop which allows to customize interactive keyboard behavior. If set t
3939

4040
### `textInputNativeID` <div className="label ios"></div>
4141

42-
A corresponding `nativeID` value from the corresponding `TextInput`.
42+
A corresponding `nativeID` value from the associated `TextInput` (a string that links the `KeyboardGestureArea` to one or more `TextInput` components). This is **required on iOS** in order to apply the `offset` when the keyboard is shown. Only the currently focused `TextInput` with a matching `nativeID` will receive offset behavior:
43+
44+
- To apply the offset behavior to **multiple inputs**, you must assign the same `nativeID` to each of them.
45+
- If no `textInputNativeID` is provided, `offset` behavior will not be applied.
4346

4447
## Example
4548

@@ -49,9 +52,11 @@ A corresponding `nativeID` value from the corresponding `TextInput`.
4952
offset={50}
5053
textInputNativeID="composer"
5154
>
52-
<ScrollView>
55+
<ScrollView keyboardDismissMode="interactive">
5356
{/* The other UI components of application in your tree */}
5457
</ScrollView>
5558
<TextInput nativeID="composer" />
5659
</KeyboardGestureArea>
5760
```
61+
62+
To see full example, check out corresponding [ios](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example/src/screens/Examples/InteractiveKeyboardIOS/index.tsx) and [android](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example/src/screens/Examples/InteractiveKeyboard/index.tsx) examples.

docs/versioned_docs/version-1.16.0/api/keyboard-gesture-area.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ keywords:
1313
`KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
1414

1515
:::info Platform availability
16-
This component is available only for Android >= 11. For iOS and Android < 11 it will render `React.Fragment`.
16+
This component is available only for Android >= 11. For Android < 11 it will render `React.Fragment`.
1717
:::
1818

1919
## Props
@@ -39,7 +39,10 @@ A boolean prop which allows to customize interactive keyboard behavior. If set t
3939

4040
### `textInputNativeID` <div className="label ios"></div>
4141

42-
A corresponding `nativeID` value from the corresponding `TextInput`.
42+
A corresponding `nativeID` value from the associated `TextInput` (a string that links the `KeyboardGestureArea` to one or more `TextInput` components). This is **required on iOS** in order to apply the `offset` when the keyboard is shown. Only the currently focused `TextInput` with a matching `nativeID` will receive offset behavior:
43+
44+
- To apply the offset behavior to **multiple inputs**, you must assign the same `nativeID` to each of them.
45+
- If no `textInputNativeID` is provided, `offset` behavior will not be applied.
4346

4447
## Example
4548

@@ -49,9 +52,11 @@ A corresponding `nativeID` value from the corresponding `TextInput`.
4952
offset={50}
5053
textInputNativeID="composer"
5154
>
52-
<ScrollView>
55+
<ScrollView keyboardDismissMode="interactive">
5356
{/* The other UI components of application in your tree */}
5457
</ScrollView>
5558
<TextInput nativeID="composer" />
5659
</KeyboardGestureArea>
5760
```
61+
62+
To see full example, check out corresponding [ios](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example/src/screens/Examples/InteractiveKeyboardIOS/index.tsx) and [android](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example/src/screens/Examples/InteractiveKeyboard/index.tsx) examples.

docs/versioned_docs/version-1.17.0/api/keyboard-gesture-area.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ keywords:
1313
`KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
1414

1515
:::info Platform availability
16-
This component is available only for Android >= 11. For iOS and Android < 11 it will render `React.Fragment`.
16+
This component is available only for Android >= 11. For Android < 11 it will render `React.Fragment`.
1717
:::
1818

1919
## Props
@@ -39,7 +39,10 @@ A boolean prop which allows to customize interactive keyboard behavior. If set t
3939

4040
### `textInputNativeID` <div className="label ios"></div>
4141

42-
A corresponding `nativeID` value from the corresponding `TextInput`.
42+
A corresponding `nativeID` value from the associated `TextInput` (a string that links the `KeyboardGestureArea` to one or more `TextInput` components). This is **required on iOS** in order to apply the `offset` when the keyboard is shown. Only the currently focused `TextInput` with a matching `nativeID` will receive offset behavior:
43+
44+
- To apply the offset behavior to **multiple inputs**, you must assign the same `nativeID` to each of them.
45+
- If no `textInputNativeID` is provided, `offset` behavior will not be applied.
4346

4447
## Example
4548

@@ -49,9 +52,11 @@ A corresponding `nativeID` value from the corresponding `TextInput`.
4952
offset={50}
5053
textInputNativeID="composer"
5154
>
52-
<ScrollView>
55+
<ScrollView keyboardDismissMode="interactive">
5356
{/* The other UI components of application in your tree */}
5457
</ScrollView>
5558
<TextInput nativeID="composer" />
5659
</KeyboardGestureArea>
5760
```
61+
62+
To see full example, check out corresponding [ios](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example/src/screens/Examples/InteractiveKeyboardIOS/index.tsx) and [android](https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/example/src/screens/Examples/InteractiveKeyboard/index.tsx) examples.

0 commit comments

Comments
 (0)