From 065e4db3b13f30747c09fda3b5d8a804fb0221c6 Mon Sep 17 00:00:00 2001
From: Kirill Zyusko <zyusko.kirik@gmail.com>
Date: Tue, 7 May 2024 10:46:57 +0200
Subject: [PATCH] docs: `KeyboardAwareScrollView` + `FlatList` (#433)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📜 Description

Added an info about integration `KeyboardAwareScrollView` with
virtualized lists.

## 💡 Motivation and Context

I constantly see that people are searching for:

<img width="603" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/cf34cc6d-6475-4ecb-994d-e4868c389809">

So decided to add this information into the guide.

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

- added an information about `KeyboardAwareScrollView` + `FlatList`
integration;

## 🤔 How Has This Been Tested?

Tested on localhost:3000 and preview.

## 📸 Screenshots (if appropriate):

<img width="1296" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/285541fe-7b13-44f5-af68-9b2618e13a6e">

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
---
 .../components/keyboard-aware-scroll-view.mdx | 73 +++++++++++++++++++
 .../components/keyboard-aware-scroll-view.mdx | 73 +++++++++++++++++++
 .../components/keyboard-aware-scroll-view.mdx | 73 +++++++++++++++++++
 3 files changed, 219 insertions(+)

diff --git a/docs/docs/api/components/keyboard-aware-scroll-view.mdx b/docs/docs/api/components/keyboard-aware-scroll-view.mdx
index b62e01e67..88b54fc50 100644
--- a/docs/docs/api/components/keyboard-aware-scroll-view.mdx
+++ b/docs/docs/api/components/keyboard-aware-scroll-view.mdx
@@ -77,6 +77,79 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,
 
 A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.
 
+## `FlatList`/`FlashList`/`SectionList` integrations
+
+Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package I'm not exporting `KeyboardAwareFlatList`, `KeyboardAwareSectionList` and other components.
+
+If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
+
+```tsx
+import { FlatList } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+<FlatList
+  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
+/>;
+
+// or
+
+import { FlashList } from "@shopify/flash-list";
+
+<FlashList
+  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
+/>;
+```
+
+<details>
+  <summary>Click to see a full code example with integration</summary>
+
+```tsx
+import React from "react";
+import { View, FlatList, TextInput } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+const List = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        data={new Array(10).fill(0).map((_, i) => i)}
+        keyExtractor={(data) => String(data)}
+        renderItem={() => {
+          return (
+            <View
+              style={{
+                width: "100%",
+                height: 250,
+                backgroundColor: "#00000066",
+                justifyContent: "center",
+              }}
+            >
+              <TextInput
+                style={{
+                  height: 40,
+                  width: "100%",
+                  borderColor: "black",
+                  borderWidth: 2,
+                }}
+              />
+            </View>
+          );
+        }}
+        renderScrollComponent={(props) => (
+          <KeyboardAwareScrollView {...props} />
+        )}
+        ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+};
+
+export default List;
+```
+
+</details>
+
 ## Example
 
 ```tsx
diff --git a/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx b/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx
index b62e01e67..88b54fc50 100644
--- a/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx
+++ b/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx
@@ -77,6 +77,79 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,
 
 A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.
 
+## `FlatList`/`FlashList`/`SectionList` integrations
+
+Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package I'm not exporting `KeyboardAwareFlatList`, `KeyboardAwareSectionList` and other components.
+
+If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
+
+```tsx
+import { FlatList } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+<FlatList
+  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
+/>;
+
+// or
+
+import { FlashList } from "@shopify/flash-list";
+
+<FlashList
+  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
+/>;
+```
+
+<details>
+  <summary>Click to see a full code example with integration</summary>
+
+```tsx
+import React from "react";
+import { View, FlatList, TextInput } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+const List = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        data={new Array(10).fill(0).map((_, i) => i)}
+        keyExtractor={(data) => String(data)}
+        renderItem={() => {
+          return (
+            <View
+              style={{
+                width: "100%",
+                height: 250,
+                backgroundColor: "#00000066",
+                justifyContent: "center",
+              }}
+            >
+              <TextInput
+                style={{
+                  height: 40,
+                  width: "100%",
+                  borderColor: "black",
+                  borderWidth: 2,
+                }}
+              />
+            </View>
+          );
+        }}
+        renderScrollComponent={(props) => (
+          <KeyboardAwareScrollView {...props} />
+        )}
+        ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+};
+
+export default List;
+```
+
+</details>
+
 ## Example
 
 ```tsx
diff --git a/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx b/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx
index b62e01e67..88b54fc50 100644
--- a/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx
+++ b/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx
@@ -77,6 +77,79 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,
 
 A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.
 
+## `FlatList`/`FlashList`/`SectionList` integrations
+
+Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package I'm not exporting `KeyboardAwareFlatList`, `KeyboardAwareSectionList` and other components.
+
+If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
+
+```tsx
+import { FlatList } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+<FlatList
+  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
+/>;
+
+// or
+
+import { FlashList } from "@shopify/flash-list";
+
+<FlashList
+  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
+/>;
+```
+
+<details>
+  <summary>Click to see a full code example with integration</summary>
+
+```tsx
+import React from "react";
+import { View, FlatList, TextInput } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+const List = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        data={new Array(10).fill(0).map((_, i) => i)}
+        keyExtractor={(data) => String(data)}
+        renderItem={() => {
+          return (
+            <View
+              style={{
+                width: "100%",
+                height: 250,
+                backgroundColor: "#00000066",
+                justifyContent: "center",
+              }}
+            >
+              <TextInput
+                style={{
+                  height: 40,
+                  width: "100%",
+                  borderColor: "black",
+                  borderWidth: 2,
+                }}
+              />
+            </View>
+          );
+        }}
+        renderScrollComponent={(props) => (
+          <KeyboardAwareScrollView {...props} />
+        )}
+        ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+};
+
+export default List;
+```
+
+</details>
+
 ## Example
 
 ```tsx