docs: various fixes after self review (#573)

## 📜 Description

Fixed issues that I noticed when examined the page.

## 💡 Motivation and Context

Missing lottie was introduced in
#537
(because I merged checkout first and only then a blogpost).

Also noticed many errors/warnings in console, so fixed them in this PR
as well.

## 📢 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

- fixed "Invalid DOM property `class`. Did you mean `className`"
- fixed missing lottie animations in `KeyboardStickyView` page

## 🤔 How Has This Been Tested?

Tested on localhost:3000

## 📸 Screenshots (if appropriate):

<img width="623" alt="image"
src="https://github.com/user-attachments/assets/e84b1ae0-2146-47fe-8d67-ea463a18b35a">

## 📝 Checklist

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

docs/blog/2022-09-22-fabric/index.md

@@ -17,7 +17,7 @@ I'm glad to announce, that new upcoming release `1.2.0` brings a support for new
 
 Fortunately this library is backward compatible with old architecture and will be compiled conditionally depending on which architecture you are using. So don't be afraid of updating it to the latest version - it doesn't have any breaking changes!
 
-<div class="playwright">
+<div className="playwright">
   ![react native logo](./react-native.png#img-thumbnail)
 </div>
 

docs/docs/api/keyboard-controller-view.md

@@ -37,11 +37,11 @@ A callback function which is fired every time when user changes a text (types/de
 
 A callback function which is fired when user selects text in focused input.
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/docs/api/keyboard-controller.md

@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode` <div class="label android"></div>
+### `setInputMode` <div className="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode` <div class="label android"></div>
+### `setDefaultMode` <div className="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) declared in the `AndroidManifest.xml` (or `app.json` in Expo case). It resets the input mode to the default value:
 

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

@@ -13,7 +13,7 @@ keywords:
 <!-- prettier-ignore-start -->
 <!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
 <!-- markdownlint-disable-next-line MD025 -->
-# KeyboardGestureArea <div class="label android"></div>
+# KeyboardGestureArea <div className="label android"></div>
 <!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.

docs/docs/api/keyboard-provider.md

@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.0.0/api/keyboard-controller-view.md

@@ -8,6 +8,6 @@ A plain react-native `View` with some additional methods and props. Used interna
 
 A callback function which is fired every time, when keyboard changes its position on the screen.
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.

docs/versioned_docs/version-1.0.0/api/keyboard-provider.md

@@ -4,7 +4,7 @@
 
 ## Props
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.10.0/api/keyboard-controller-view.md

@@ -33,11 +33,11 @@ A callback function which is fired when layout of focused input gets changed.
 
 A callback function which is fired every time when user changes a text (types/deletes symbols).
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.10.0/api/keyboard-controller.md

@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode` <div class="label android"></div>
+### `setInputMode` <div className="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode` <div class="label android"></div>
+### `setDefaultMode` <div className="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) declared in the `AndroidManifest.xml` (or `app.json` in Expo case). It resets the input mode to the default value:
 

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

@@ -13,7 +13,7 @@ keywords:
 <!-- prettier-ignore-start -->
 <!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
 <!-- markdownlint-disable-next-line MD025 -->
-# KeyboardGestureArea <div class="label android"></div>
+# KeyboardGestureArea <div className="label android"></div>
 <!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.

docs/versioned_docs/version-1.10.0/api/keyboard-provider.md

@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.11.0/api/keyboard-controller-view.md

@@ -33,11 +33,11 @@ A callback function which is fired when layout of focused input gets changed.
 
 A callback function which is fired every time when user changes a text (types/deletes symbols).
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.11.0/api/keyboard-controller.md

@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode` <div class="label android"></div>
+### `setInputMode` <div className="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode` <div class="label android"></div>
+### `setDefaultMode` <div className="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) declared in the `AndroidManifest.xml` (or `app.json` in Expo case). It resets the input mode to the default value:
 

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

@@ -13,7 +13,7 @@ keywords:
 <!-- prettier-ignore-start -->
 <!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
 <!-- markdownlint-disable-next-line MD025 -->
-# KeyboardGestureArea <div class="label android"></div>
+# KeyboardGestureArea <div className="label android"></div>
 <!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.

docs/versioned_docs/version-1.11.0/api/keyboard-provider.md

@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.12.0/api/keyboard-controller-view.md

@@ -37,11 +37,11 @@ A callback function which is fired every time when user changes a text (types/de
 
 A callback function which is fired when user selects text in focused input.
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.12.0/api/keyboard-controller.md

@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode` <div class="label android"></div>
+### `setInputMode` <div className="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode` <div class="label android"></div>
+### `setDefaultMode` <div className="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) declared in the `AndroidManifest.xml` (or `app.json` in Expo case). It resets the input mode to the default value:
 

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

@@ -13,7 +13,7 @@ keywords:
 <!-- prettier-ignore-start -->
 <!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
 <!-- markdownlint-disable-next-line MD025 -->
-# KeyboardGestureArea <div class="label android"></div>
+# KeyboardGestureArea <div className="label android"></div>
 <!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.

docs/versioned_docs/version-1.12.0/api/keyboard-provider.md

@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.13.0/api/components/keyboard-sticky-view/index.mdx

@@ -23,10 +23,11 @@ Unlike [KeyboardAvoidingView](../keyboard-avoiding-view.mdx) the `KeyboardSticky
 import ksv from "./ksv.lottie.json";
 import kav from "@site/src/components/KeyboardAvoidingViewComparison/kav-animated.lottie.json";
 import ComparisonTable from "@site/src/components/ComparisonTable";
+import Lottie from "@site/src/components/Lottie";
 
 <ComparisonTable
-  leftLottie={ksv}
-  rightLottie={kav}
+  left={<Lottie src={ksv} />}
+  right={<Lottie src={kav} />}
   leftText={
     <i>
       <code>KeyboardStickyView</code> - only footer is moving (container is not

docs/versioned_docs/version-1.13.0/api/keyboard-controller-view.md

@@ -37,11 +37,11 @@ A callback function which is fired every time when user changes a text (types/de
 
 A callback function which is fired when user selects text in focused input.
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 

docs/versioned_docs/version-1.13.0/api/keyboard-controller.md

@@ -20,7 +20,7 @@ The `KeyboardController` module in React Native provides a convenient set of met
 
 ## Methods
 
-### `setInputMode` <div class="label android"></div>
+### `setInputMode` <div className="label android"></div>
 
 This method is used to dynamically change the `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) during runtime in an Android application. It takes an argument that specifies the desired input mode. The example provided sets the input mode to `SOFT_INPUT_ADJUST_RESIZE`:
 
@@ -36,7 +36,7 @@ To understand the difference between `adjustResize`/`adjustPan`/`adjustNothing`
 A combination of `adjustResize` + `edge-to-edge` mode will result in behavior similar to `adjustNothing` - in this case window is not resized automatically and content is not moved along with the keyboard position. And it becomes a responsibility of developer to handle keyboard appearance (thus it'll match iOS behavior).
 :::
 
-### `setDefaultMode` <div class="label android"></div>
+### `setDefaultMode` <div className="label android"></div>
 
 This method is used to restore the default `windowSoftInputMode` (`softwareKeyboardLayoutMode` in Expo terminology) declared in the `AndroidManifest.xml` (or `app.json` in Expo case). It resets the input mode to the default value:
 

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

@@ -13,7 +13,7 @@ keywords:
 <!-- prettier-ignore-start -->
 <!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
 <!-- markdownlint-disable-next-line MD025 -->
-# KeyboardGestureArea <div class="label android"></div>
+# KeyboardGestureArea <div className="label android"></div>
 <!-- prettier-ignore-end -->
 
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.

docs/versioned_docs/version-1.13.0/api/keyboard-provider.md

@@ -9,15 +9,15 @@ keywords: [react-native-keyboard-controller, KeyboardProvider]
 
 ## Props
 
-### `statusBarTranslucent` <div class="label android"></div>
+### `statusBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether `StatusBar` should be translucent on `Android` or not.
 
 :::caution Important defaults
 By default this library stretches to full screen (`edge-to-edge` mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use `translucent` prop for `StatusBar` component - it will not work anymore. You'll need to specify it on provider level. For more info [see](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/30) this PR.
 :::
 
-### `navigationBarTranslucent` <div class="label android"></div>
+### `navigationBarTranslucent` <div className="label android"></div>
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.