Skip to content

Commit

Permalink
docs: KeyboardAwareScrollView + FlatList (#433)
Browse files Browse the repository at this point in the history
## 馃摐 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
  • Loading branch information
kirillzyusko committed May 7, 2024
1 parent ddc6c37 commit 065e4db
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 0 deletions.
73 changes: 73 additions & 0 deletions docs/docs/api/components/keyboard-aware-scroll-view.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 065e4db

Please sign in to comment.