Skip to content

Commit 065e4db

Browse files
kirillzyuskokirillzyusko
authored
docs: KeyboardAwareScrollView + FlatList (#433)
## 📜 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
1 parent ddc6c37 commit 065e4db

File tree

3 files changed

+219
-0
lines changed

3 files changed

+219
-0
lines changed

‎docs/docs/api/components/keyboard-aware-scroll-view.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,79 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,
7777

7878
A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.
7979

80+
## `FlatList`/`FlashList`/`SectionList` integrations
81+
82+
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.
83+
84+
If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
85+
86+
```tsx
87+
import { FlatList } from "react-native";
88+
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
89+
90+
<FlatList
91+
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
92+
/>;
93+
94+
// or
95+
96+
import { FlashList } from "@shopify/flash-list";
97+
98+
<FlashList
99+
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
100+
/>;
101+
```
102+
103+
<details>
104+
<summary>Click to see a full code example with integration</summary>
105+
106+
```tsx
107+
import React from "react";
108+
import { View, FlatList, TextInput } from "react-native";
109+
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
110+
111+
const List = () => {
112+
return (
113+
<View style={{ flex: 1 }}>
114+
<FlatList
115+
data={new Array(10).fill(0).map((_, i) => i)}
116+
keyExtractor={(data) => String(data)}
117+
renderItem={() => {
118+
return (
119+
<View
120+
style={{
121+
width: "100%",
122+
height: 250,
123+
backgroundColor: "#00000066",
124+
justifyContent: "center",
125+
}}
126+
>
127+
<TextInput
128+
style={{
129+
height: 40,
130+
width: "100%",
131+
borderColor: "black",
132+
borderWidth: 2,
133+
}}
134+
/>
135+
</View>
136+
);
137+
}}
138+
renderScrollComponent={(props) => (
139+
<KeyboardAwareScrollView {...props} />
140+
)}
141+
ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
142+
showsVerticalScrollIndicator={false}
143+
/>
144+
</View>
145+
);
146+
};
147+
148+
export default List;
149+
```
150+
151+
</details>
152+
80153
## Example
81154

82155
```tsx

‎docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,79 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,
7777

7878
A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.
7979

80+
## `FlatList`/`FlashList`/`SectionList` integrations
81+
82+
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.
83+
84+
If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
85+
86+
```tsx
87+
import { FlatList } from "react-native";
88+
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
89+
90+
<FlatList
91+
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
92+
/>;
93+
94+
// or
95+
96+
import { FlashList } from "@shopify/flash-list";
97+
98+
<FlashList
99+
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
100+
/>;
101+
```
102+
103+
<details>
104+
<summary>Click to see a full code example with integration</summary>
105+
106+
```tsx
107+
import React from "react";
108+
import { View, FlatList, TextInput } from "react-native";
109+
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
110+
111+
const List = () => {
112+
return (
113+
<View style={{ flex: 1 }}>
114+
<FlatList
115+
data={new Array(10).fill(0).map((_, i) => i)}
116+
keyExtractor={(data) => String(data)}
117+
renderItem={() => {
118+
return (
119+
<View
120+
style={{
121+
width: "100%",
122+
height: 250,
123+
backgroundColor: "#00000066",
124+
justifyContent: "center",
125+
}}
126+
>
127+
<TextInput
128+
style={{
129+
height: 40,
130+
width: "100%",
131+
borderColor: "black",
132+
borderWidth: 2,
133+
}}
134+
/>
135+
</View>
136+
);
137+
}}
138+
renderScrollComponent={(props) => (
139+
<KeyboardAwareScrollView {...props} />
140+
)}
141+
ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
142+
showsVerticalScrollIndicator={false}
143+
/>
144+
</View>
145+
);
146+
};
147+
148+
export default List;
149+
```
150+
151+
</details>
152+
80153
## Example
81154

82155
```tsx

‎docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,79 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,
7777

7878
A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.
7979

80+
## `FlatList`/`FlashList`/`SectionList` integrations
81+
82+
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.
83+
84+
If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
85+
86+
```tsx
87+
import { FlatList } from "react-native";
88+
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
89+
90+
<FlatList
91+
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
92+
/>;
93+
94+
// or
95+
96+
import { FlashList } from "@shopify/flash-list";
97+
98+
<FlashList
99+
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
100+
/>;
101+
```
102+
103+
<details>
104+
<summary>Click to see a full code example with integration</summary>
105+
106+
```tsx
107+
import React from "react";
108+
import { View, FlatList, TextInput } from "react-native";
109+
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
110+
111+
const List = () => {
112+
return (
113+
<View style={{ flex: 1 }}>
114+
<FlatList
115+
data={new Array(10).fill(0).map((_, i) => i)}
116+
keyExtractor={(data) => String(data)}
117+
renderItem={() => {
118+
return (
119+
<View
120+
style={{
121+
width: "100%",
122+
height: 250,
123+
backgroundColor: "#00000066",
124+
justifyContent: "center",
125+
}}
126+
>
127+
<TextInput
128+
style={{
129+
height: 40,
130+
width: "100%",
131+
borderColor: "black",
132+
borderWidth: 2,
133+
}}
134+
/>
135+
</View>
136+
);
137+
}}
138+
renderScrollComponent={(props) => (
139+
<KeyboardAwareScrollView {...props} />
140+
)}
141+
ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
142+
showsVerticalScrollIndicator={false}
143+
/>
144+
</View>
145+
);
146+
};
147+
148+
export default List;
149+
```
150+
151+
</details>
152+
80153
## Example
81154

82155
```tsx

0 commit comments

Comments
 (0)