docs: re-organize API section (#994)

kirillzyusko · web-flow · commit 0e4cf89e56e2 · 2025-06-27T15:53:31.000+03:00
## 📜 Description Re-organized API section for easier navigation. ## 💡 Motivation and Context We get more and more native views exposed from the library, so I thought it's crucial to organize API section better. We already have `hooks` and `components` categories and I thought to introduce a new category. I didn't invent anything better than `views` - the idea is that in this folder we'll have all native views (backed by native code). ## 📢 Changelog    ### Docs - added lottie animation for `KeyboardGestureArea` page; - changed links for `KeyboardBackgroundView`; - changed links to avoid broken links; - changed description for `KeyboardExtender`. ## 🤔 How Has This Been Tested? Tested via preview and CI. ## 📸 Screenshots (if appropriate): |Before|After| |-------|-----| |<img width="299" alt="image" src="https://github.com/user-attachments/assets/d2083e8e-18a2-4bfd-9525-1127d78d13df" />|<img width="300" alt="image" src="https://github.com/user-attachments/assets/4bf341ff-6f7b-4992-b377-66ab2a8be47d" />| ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
diff --git a/docs/blog/2024-10-01-over-keyboard-view/index.mdx b/docs/blog/2024-10-01-over-keyboard-view/index.mdx
@@ -10,7 +10,7 @@ keywords:
 Meet new `OverKeyboardView` component and corresponding `1.14.0` release! 🎉
 
 import Lottie from "lottie-react";
-import lottie from "../../docs/api/over-keyboard-view/over-keyboard-view.lottie.json";
+import lottie from "../../docs/api/views/over-keyboard-view/over-keyboard-view.lottie.json";
 
 <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
   <Lottie
diff --git a/docs/docs/api/components/_category_.json b/docs/docs/api/components/_category_.json
@@ -1,4 +1,8 @@
 {
   "label": "📚 Components",
-  "position": 2
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "A set of JS components that simplify keyboard management and user interaction handling"
+  }
 }
diff --git a/docs/docs/api/hooks/_category_.json b/docs/docs/api/hooks/_category_.json
@@ -1,4 +1,8 @@
 {
   "label": "🎣 Hooks",
-  "position": 1
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "description": "React hooks provided by this library"
+  }
 }
diff --git a/docs/docs/api/hooks/keyboard/use-keyboard-handler/index.mdx b/docs/docs/api/hooks/keyboard/use-keyboard-handler/index.mdx
@@ -171,7 +171,7 @@ export const onInteractiveCode = (
 <div className="mobile">{onInteractiveCode}</div>
 
 :::info Event availability
-This event is available only on Android >= 11. To receive it you need to use [KeyboardGestureArea](./../../keyboard-gesture-area).
+This event is available only on Android >= 11. To receive it you need to use [KeyboardGestureArea](./../../views/keyboard-gesture-area).
 
 On iOS you need to specify `keyboardDismissMode="interactive"` on your `ScrollView`.
 :::
diff --git a/docs/docs/api/keyboard-controller.md b/docs/docs/api/keyboard-controller.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 7
 keywords:
   [
     react-native-keyboard-controller,
diff --git a/docs/docs/api/keyboard-events.md b/docs/docs/api/keyboard-events.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 8
 keywords:
   [
     react-native-keyboard-controller,
diff --git a/docs/docs/api/keyboard-provider.md b/docs/docs/api/keyboard-provider.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 4
 keywords: [react-native-keyboard-controller, KeyboardProvider]
 ---
 
diff --git a/docs/docs/api/views/_category_.json b/docs/docs/api/views/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "✨ Views",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Native views provided by this library"
+  }
+}
diff --git a/docs/docs/api/views/keyboard-background-view/index.mdx b/docs/docs/api/views/keyboard-background-view/index.mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 3
 description: View that matches keyboard background
 keywords:
   [react-native-keyboard-controller, keyboard, background, keyboard extension]
@@ -152,5 +152,5 @@ export default KeyboardSharedTransitionExample;
 
 ## See also
 
-- [`KeyboardStickyView`](./components/keyboard-sticky-view) – affixes content to the keyboard’s frame.
-- [`useReanimatedKeyboardAnimation`](./hooks/keyboard/use-reanimated-keyboard-animation) – drive your own animations with native‑driven progress values.
+- [`KeyboardStickyView`](../components/keyboard-sticky-view) – affixes content to the keyboard’s frame.
+- [`useReanimatedKeyboardAnimation`](../hooks/keyboard/use-reanimated-keyboard-animation) – drive your own animations with native‑driven progress values.
diff --git a/docs/docs/api/views/keyboard-background-view/keyboard-background-view.lottie.json b/docs/docs/api/views/keyboard-background-view/keyboard-background-view.lottie.json
diff --git a/docs/docs/api/views/keyboard-controller-view.md b/docs/docs/api/views/keyboard-controller-view.md
@@ -1,11 +1,11 @@
 ---
-sidebar_position: 3
+sidebar_position: 5
 keywords: [react-native-keyboard-controller, KeyboardControllerView, view]
 ---
 
 # KeyboardControllerView
 
-A plain react-native `View` with some additional methods and props. Used internally in [KeyboardProvider](./keyboard-provider.md)
+A plain react-native `View` with some additional methods and props. Used internally in [KeyboardProvider](../keyboard-provider.md)
 
 ## Props
 
diff --git a/docs/docs/api/views/keyboard-extender/index.mdx b/docs/docs/api/views/keyboard-extender/index.mdx
@@ -1,6 +1,6 @@
 ---
-sidebar_position: 8
-description: Display views over keyboard without closing it.
+sidebar_position: 2
+description: Display views inside the keyboard
 keywords:
   [
     react-native-keyboard-controller,
@@ -116,4 +116,4 @@ const styles = StyleSheet.create({
 
 ## Limitations
 
-- You can not put `TextInput` inside `KeyboardExtender`. Consider to use [KeyboardBackgroundView](../api/components/keyboard-sticky-view) + [KeyboardStickyView](../api/components/keyboard-sticky-view) instead.
+- You can not put `TextInput` inside `KeyboardExtender`. Consider to use [KeyboardBackgroundView](../views/keyboard-background-view) + [KeyboardStickyView](../../api/components/keyboard-sticky-view) instead.
diff --git a/docs/docs/api/views/keyboard-extender/keyboard-extender.lottie.json b/docs/docs/api/views/keyboard-extender/keyboard-extender.lottie.json
diff --git a/docs/docs/api/views/keyboard-gesture-area.mdx b/docs/docs/api/views/keyboard-gesture-area.mdx
@@ -1,6 +1,7 @@
 ---
 sidebar_position: 4
 title: KeyboardGestureArea
+description: View for gestures that will control keyboard position
 keywords:
   [
     react-native-keyboard-controller,
@@ -10,6 +11,18 @@ keywords:
   ]
 ---
 
+import Lottie from "lottie-react";
+import lottie from "@site/src/components/HomepageFeatures/interactive.lottie.json";
+
+<div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
+  <Lottie
+    className="lottie"
+    animationData={lottie}
+    style={{ width: 400, height: 400 }}
+    loop
+  />
+</div>
+
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
 
 :::info Platform availability
diff --git a/docs/docs/api/views/over-keyboard-view/index.mdx b/docs/docs/api/views/over-keyboard-view/index.mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 1
 description: Display views over keyboard without closing it.
 keywords:
   [
diff --git a/docs/docs/api/views/over-keyboard-view/over-keyboard-view.lottie.json b/docs/docs/api/views/over-keyboard-view/over-keyboard-view.lottie.json
diff --git a/docs/docs/guides/components-overview.mdx b/docs/docs/guides/components-overview.mdx
@@ -37,9 +37,9 @@ import KeyboardAwareScrollView from "@site/src/components/HomepageFeatures/text-
 
 import KeyboardStickyView from "../api/components/keyboard-sticky-view/ksv.lottie.json";
 import KeyboardToolbar from "../api/components/keyboard-toolbar/toolbar.lottie.json";
-import OverKeyboardView from "../api/over-keyboard-view/over-keyboard-view.lottie.json";
-import KeyboardBackgroundView from "../api/keyboard-background-view/keyboard-background-view.lottie.json";
-import KeyboardExtender from "../api/keyboard-extender/keyboard-extender.lottie.json";
+import OverKeyboardView from "../api/views/over-keyboard-view/over-keyboard-view.lottie.json";
+import KeyboardBackgroundView from "../api/views/keyboard-background-view/keyboard-background-view.lottie.json";
+import KeyboardExtender from "../api/views/keyboard-extender/keyboard-extender.lottie.json";
 
 <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
   <Lottie
@@ -111,7 +111,7 @@ To enhance the usability of forms with multiple `TextInput` fields, consider `Ke
 
 A major benefit is its use of the library's native focus control logic (`KeyboardController.setFocusTo`), simplifying development by handling the complexities of switching focus between inputs for you. It's highly customizable in appearance and behavior, allowing seamless integration into your app's design.
 
-## [`OverKeyboardView`](../api/over-keyboard-view)
+## [`OverKeyboardView`](../api/views/over-keyboard-view)
 
 <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
   <Lottie
@@ -126,7 +126,7 @@ A major benefit is its use of the library's native focus control logic (`Keyboar
 
 Its key difference from a standard `Modal` is precisely this ability to keep the keyboard open and active, enabling more seamless keyboard-centric interactions. Its usage is straightforward, primarily controlled via the `visible` boolean prop.
 
-## [`KeyboardExtender`](../api/keyboard-extender)
+## [`KeyboardExtender`](../api/views/keyboard-extender)
 
 <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
   <Lottie
@@ -143,7 +143,7 @@ It's perfect for adding quick action buttons or other custom input helpers direc
 
 Use the `enabled` prop to toggle its activation based on `TextInput` focus, and note that it **cannot contain other `TextInput`s** inside.
 
-## [`KeyboardBackgroundView`](../api/keyboard-background-view)
+## [`KeyboardBackgroundView`](../api/views/keyboard-background-view)
 
 <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
   <Lottie
diff --git a/docs/docs/guides/interactive-keyboard.mdx b/docs/docs/guides/interactive-keyboard.mdx
@@ -39,7 +39,7 @@ First of all let's consider a simple example and layout for typical chat applica
 
 ### Adding `KeyboardGestureArea`
 
-To make interactive dismissing work on Android we need to add `KeyboardGestureArea` view. This view will track all gestures and will control the keyboard positioning. To customize the way how the keyboard will be dismissed you can specify `interpolator` [prop](../api/keyboard-gesture-area.md#interpolator-).
+To make interactive dismissing work on Android we need to add `KeyboardGestureArea` view. This view will track all gestures and will control the keyboard positioning. To customize the way how the keyboard will be dismissed you can specify `interpolator` [prop](../api/views/keyboard-gesture-area#interpolator-).
 
 In order to recognize all gestures on a `ScrollView` we need to wrap a `ScrollView` within `KeyboardGestureArea`:
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,8 @@`
`1`	`1`	`{`
`2`	`2`	`"label": "📚 Components",`
`3`		`- "position": 2`
	`3`	`+ "position": 2,`
	`4`	`+ "link": {`
	`5`	`+ "type": "generated-index",`
	`6`	`+ "description": "A set of JS components that simplify keyboard management and user interaction handling"`
	`7`	`+ }`
`4`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,8 @@`
`1`	`1`	`{`
`2`	`2`	`"label": "🎣 Hooks",`
`3`		`- "position": 1`
	`3`	`+ "position": 1,`
	`4`	`+ "link": {`
	`5`	`+ "type": "generated-index",`
	`6`	`+ "description": "React hooks provided by this library"`
	`7`	`+ }`
`4`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`---`
`2`		`-sidebar_position: 5`
	`2`	`+sidebar_position: 7`
`3`	`3`	`keywords:`
`4`	`4`	`[`
`5`	`5`	`react-native-keyboard-controller,`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`---`
`2`		`-sidebar_position: 6`
	`2`	`+sidebar_position: 8`
`3`	`3`	`keywords:`
`4`	`4`	`[`
`5`	`5`	`react-native-keyboard-controller,`