From e20c7886c5e5822851eeb3aa8a67a70b8fc9eb2b Mon Sep 17 00:00:00 2001
From: Kirill Zyusko <zyusko.kirik@gmail.com>
Date: Mon, 30 Oct 2023 17:57:51 +0100
Subject: [PATCH] docs: added `KeyboardAvoidingView` and `KeyboardStickyView`
 comparison (#262)

---
 .../components/keyboard-sticky-view/index.mdx | 18 +++---
 docs/src/components/ComparisonTable/index.tsx | 46 +++++++++++++++
 .../KeyboardAvoidingViewComparison/index.tsx  | 56 ++++++-------------
 3 files changed, 74 insertions(+), 46 deletions(-)
 create mode 100644 docs/src/components/ComparisonTable/index.tsx

diff --git a/docs/docs/api/components/keyboard-sticky-view/index.mdx b/docs/docs/api/components/keyboard-sticky-view/index.mdx
index 0c67daa54..50c83a6cf 100644
--- a/docs/docs/api/components/keyboard-sticky-view/index.mdx
+++ b/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
diff --git a/docs/src/components/ComparisonTable/index.tsx b/docs/src/components/ComparisonTable/index.tsx
new file mode 100644
index 000000000..822e205b4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/src/components/KeyboardAvoidingViewComparison/index.tsx b/docs/src/components/KeyboardAvoidingViewComparison/index.tsx
index 1bbcab975..5942bdde5 100644
--- a/docs/src/components/KeyboardAvoidingViewComparison/index.tsx
+++ b/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>
+      }
+    />
   );
 }