Skip to content

Commit 976cfe5

Browse files
authored
docs: forwardRef for FlashList+renderScrollComponent (#903)
## 📜 Description Updated documentation for `FlashList`. ## 💡 Motivation and Context Seems like in recent versions of `FlashList` ref-forwarding has changed, so now we need to wrap the callback in `forwardRef`. Funny thing - such wrapper doesn't work for `FlatList`. So I separated instructions 🤷‍♂️ Closes #888 ## 📢 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 - updated `FlashList` + `KeybaordAwareScrollView` integrations ection. ## 🤔 How Has This Been Tested? Tested in example app. ## 📸 Screenshots (if appropriate): <img width="985" alt="image" src="https://github.com/user-attachments/assets/5185dced-1fbd-42d5-8b31-25e903066f8b" /> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent 05e0c35 commit 976cfe5

File tree

3 files changed

+21
-12
lines changed

3 files changed

+21
-12
lines changed

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@ Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APS
124124
If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
125125

126126
```tsx
127-
import { FlatList } from "react-native";
127+
import React from "react";
128+
import { FlatList, ScrollView, ScrollViewProps } from "react-native";
128129
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
129130

130131
<FlatList
@@ -135,9 +136,11 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
135136

136137
import { FlashList } from "@shopify/flash-list";
137138

138-
<FlashList
139-
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
140-
/>;
139+
const RenderScrollComponent = React.forwardRef<ScrollView, ScrollViewProps>(
140+
(props, ref) => <KeyboardAwareScrollView {...props} ref={ref} />,
141+
);
142+
143+
<FlashList renderScrollComponent={RenderScrollComponent} />;
141144
```
142145

143146
<details>

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@ Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APS
124124
If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
125125

126126
```tsx
127-
import { FlatList } from "react-native";
127+
import React from "react";
128+
import { FlatList, ScrollView, ScrollViewProps } from "react-native";
128129
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
129130

130131
<FlatList
@@ -135,9 +136,11 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
135136

136137
import { FlashList } from "@shopify/flash-list";
137138

138-
<FlashList
139-
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
140-
/>;
139+
const RenderScrollComponent = React.forwardRef<ScrollView, ScrollViewProps>(
140+
(props, ref) => <KeyboardAwareScrollView {...props} ref={ref} />,
141+
);
142+
143+
<FlashList renderScrollComponent={RenderScrollComponent} />;
141144
```
142145

143146
<details>

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@ Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APS
124124
If you want to integrate it with your custom virtualization list, you can pass `renderScrollComponent` prop like:
125125

126126
```tsx
127-
import { FlatList } from "react-native";
127+
import React from "react";
128+
import { FlatList, ScrollView, ScrollViewProps } from "react-native";
128129
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
129130

130131
<FlatList
@@ -135,9 +136,11 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
135136

136137
import { FlashList } from "@shopify/flash-list";
137138

138-
<FlashList
139-
renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
140-
/>;
139+
const RenderScrollComponent = React.forwardRef<ScrollView, ScrollViewProps>(
140+
(props, ref) => <KeyboardAwareScrollView {...props} ref={ref} />,
141+
);
142+
143+
<FlashList renderScrollComponent={RenderScrollComponent} />;
141144
```
142145

143146
<details>

0 commit comments

Comments
 (0)