docs: added lottie animation to interactive keyboard guide (#357)

## 📜 Description Added "Interactive keyboard" lottie animation from main page to "Interactive keyboard" guide. ## 💡 Motivation and Context It's easier to see how it works in action and what we're trying to achieve before reading a lot of text 😊 ## 📢 Changelog ### Docs - added lottie animation to interactive keyboard guide ## 🤔 How Has This Been Tested? Tested on `localhost:3000` ## 📸 Screenshots (if appropriate): <img width="973" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/758d9322-dee9-49b1-a995-f7f152ab7028"> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
kirillzyusko · Feb 9, 2024 · 490b712 · 490b712
1 parent 15b0dfc
commit 490b712
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 0 deletions.
diff --git a/docs/docs/guides/interactive-keyboard.md → docs/docs/guides/interactive-keyboard.mdx b/docs/docs/guides/interactive-keyboard.md → docs/docs/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point

diff --git a/...ion-1.10.0/guides/interactive-keyboard.md → ...on-1.10.0/guides/interactive-keyboard.mdx b/...ion-1.10.0/guides/interactive-keyboard.md → ...on-1.10.0/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point

diff --git a/...sion-1.7.0/guides/interactive-keyboard.md → ...ion-1.5.0/guides/interactive-keyboard.mdx b/...sion-1.7.0/guides/interactive-keyboard.md → ...ion-1.5.0/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point

diff --git a/...sion-1.5.0/guides/interactive-keyboard.md → ...ion-1.6.0/guides/interactive-keyboard.mdx b/...sion-1.5.0/guides/interactive-keyboard.md → ...ion-1.6.0/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point

diff --git a/...sion-1.6.0/guides/interactive-keyboard.md → ...ion-1.7.0/guides/interactive-keyboard.mdx b/...sion-1.6.0/guides/interactive-keyboard.md → ...ion-1.7.0/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point

diff --git a/...sion-1.8.0/guides/interactive-keyboard.md → ...ion-1.8.0/guides/interactive-keyboard.mdx b/...sion-1.8.0/guides/interactive-keyboard.md → ...ion-1.8.0/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point

diff --git a/...sion-1.9.0/guides/interactive-keyboard.md → ...ion-1.9.0/guides/interactive-keyboard.mdx b/...sion-1.9.0/guides/interactive-keyboard.md → ...ion-1.9.0/guides/interactive-keyboard.mdx
@@ -13,6 +13,18 @@ keywords:
 
 This guide focuses on adding an ability to dismiss keyboard interactively. Below you can see a step by step guide which will explain how different pieces of the code work together.
 
+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>
+
 ## Android
 
 ### Start point