docs: added KeyboardAvoidingView and KeyboardStickyView comparison (

#262)

docs/docs/api/components/keyboard-sticky-view/index.mdx

@@ -6,17 +6,21 @@ keywords: [react-native-keyboard-controller, KeyboardStickyView, keyboard sticky
 
 A `KeyboardStickyView` component seamlessly ensures that a designated view sticks to the keyboard's movements, maintaining visibility and interaction. Use it when you want to enhance the user experience by preventing important UI elements from being obscured by the keyboard, creating a smooth and user-friendly interface in your React Native application.
 
-import Lottie from 'lottie-react';
-import lottie from './ksv.lottie.json';
-
-<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
-<Lottie animationData={lottie} style={{ width: 400, height: 400 }} loop />
-</div>
-
 :::info `KeyboardAvoidingView` vs `KeyboardStickyView`
 Unlike [KeyboardAvoidingView](../keyboard-avoiding-view.mdx) the `KeyboardStickyView` just moves the content along with keyboard and not resizing the inner view. Try to compare animations of `KeyboardStickyView` and `KeyboardAvoidingView` to see a difference in details on how it works and which component is suitable for your needs.
 :::
 
+import ksv from './ksv.lottie.json';
+import kav from '../../../../src/components/KeyboardAvoidingViewComparison/kav-animated.lottie.json';
+import ComparisonTable from '../../../../src/components/ComparisonTable';
+
+<ComparisonTable
+  leftLottie={ksv}
+  rightLottie={kav}
+  leftText={<i><code>KeyboardStickyView</code> - only footer is moving (container is not resized)</i>}
+  rightText={<i><code>KeyboardAvoidingView</code> - entire container is getting resized</i>}
+/>
+
 ## Example
 
 ```tsx

docs/src/components/ComparisonTable/index.tsx

@@ -0,0 +1,46 @@
+import React, { CSSProperties } from 'react';
+import Lottie from 'lottie-react';
+
+const withoutBorders = { border: 'none' };
+const lottieView = { paddingLeft: '20%', paddingRight: '20%' };
+const label: CSSProperties = {
+  ...withoutBorders,
+  maxWidth: 400,
+  textAlign: 'center',
+};
+const labels = {
+  ...withoutBorders,
+  backgroundColor: '#00000000',
+};
+
+type Props = {
+  leftLottie: unknown;
+  leftText: React.ReactNode;
+  rightLottie: unknown;
+  rightText: React.ReactNode;
+};
+
+export default function ComparisonTable({ leftLottie, leftText, rightLottie, rightText }: Props): JSX.Element {
+  return (
+    <table>
+      <tbody>
+        <tr style={withoutBorders}>
+          <td style={withoutBorders}>
+            <Lottie animationData={leftLottie} style={lottieView} loop />
+          </td>
+          <td style={withoutBorders}>
+            <Lottie animationData={rightLottie} style={lottieView} loop />
+          </td>
+        </tr>
+        <tr style={labels}>
+          <td style={label}>
+            {leftText}
+          </td>
+          <td style={label}>
+            {rightText}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

docs/src/components/KeyboardAvoidingViewComparison/index.tsx

@@ -1,47 +1,25 @@
-import React, { CSSProperties } from 'react';
-import Lottie from 'lottie-react';
+import React from 'react';
 
 import before from './kav.lottie.json';
 import after from './kav-animated.lottie.json';
-
-const withoutBorders = { border: 'none' };
-const lottieView = { paddingLeft: '20%', paddingRight: '20%' };
-const label: CSSProperties = {
-  ...withoutBorders,
-  maxWidth: 400,
-  textAlign: 'center',
-};
-const labels = {
-  ...withoutBorders,
-  backgroundColor: '#00000000',
-};
+import ComparisonTable from '../ComparisonTable';
 
 export default function KeyboardAvoidingViewComparison(): JSX.Element {
   return (
-    <table>
-      <tbody>
-        <tr style={withoutBorders}>
-          <td style={withoutBorders}>
-            <Lottie animationData={before} style={lottieView} loop />
-          </td>
-          <td style={withoutBorders}>
-            <Lottie animationData={after} style={lottieView} loop />
-          </td>
-        </tr>
-        <tr style={labels}>
-          <td style={label}>
-            <i>
-              Default <code>react-native</code> implementation on Android
-            </i>
-          </td>
-          <td style={label}>
-            <i>
-              Implementation from <code>react-native-keyboard-controller</code>{' '}
-              with better animations
-            </i>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <ComparisonTable
+      leftLottie={before}
+      rightLottie={after}
+      leftText={
+        <i>
+          Default <code>react-native</code> implementation on Android
+        </i>
+      }
+      rightText={
+        <i>
+          Implementation from <code>react-native-keyboard-controller</code>{' '}
+          with better animations
+        </i>
+      }
+    />
   );
 }