Skip to content

Commit feb3221

Browse files
kirillzyuskokirillzyusko
committed
fix: ref types
1 parent ec495a4 commit feb3221

7 files changed

Lines changed: 153 additions & 137 deletions

File tree

‎FabricExample/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"dependencies": {
1515
"@gorhom/bottom-sheet": "5.2.6",
16-
"@legendapp/list": "^3.0.0-beta.33",
16+
"@legendapp/list": "3.0.0-beta.32",
1717
"@lottiefiles/dotlottie-react": "^0.17.10",
1818
"@react-native-community/blur": "^4.4.1",
1919
"@react-native-masked-view/masked-view": "^0.3.2",

‎FabricExample/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useCallback, useMemo, useState } from "react";
1+
import React, { forwardRef, useCallback, useMemo, useState } from "react";
22
import {
33
type LayoutChangeEvent,
44
type ScrollViewProps,
@@ -11,59 +11,62 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
1111
import { useChatConfigStore } from "./store";
1212
import { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
1313

14-
const VirtualizedListScrollView = forwardRef(
15-
({ onLayout: onLayoutProp, ...props }: ScrollViewProps, ref) => {
16-
const [layoutPass, setLayoutPass] = useState(0);
17-
const { bottom } = useSafeAreaInsets();
18-
const chatKitOffset = bottom - MARGIN;
14+
export type VirtualizedListScrollViewRef = React.ElementRef<
15+
typeof KeyboardChatScrollView
16+
>;
1917

20-
const { inverted, freeze, mode, keyboardLiftBehavior } =
21-
useChatConfigStore();
18+
const VirtualizedListScrollView = forwardRef<
19+
VirtualizedListScrollViewRef,
20+
ScrollViewProps
21+
>(({ onLayout: onLayoutProp, ...props }, ref) => {
22+
const [layoutPass, setLayoutPass] = useState(0);
23+
const { bottom } = useSafeAreaInsets();
24+
const chatKitOffset = bottom - MARGIN;
2225

23-
const contentContainerStyle = useMemo(
24-
() => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
25-
[],
26-
);
27-
const invertedContentContainerStyle = useMemo(
28-
() => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
29-
[],
30-
);
31-
// on new arch only FlatList supports `inverted` prop
32-
const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
33-
const onLayout = useCallback(
34-
(e: LayoutChangeEvent) => {
35-
setLayoutPass((l) => l + 1);
36-
onLayoutProp?.(e);
37-
},
38-
[onLayoutProp],
39-
);
26+
const { inverted, freeze, mode, keyboardLiftBehavior } = useChatConfigStore();
4027

41-
return (
42-
<>
43-
<KeyboardChatScrollView
44-
// TODO: fix types
45-
ref={ref}
46-
automaticallyAdjustContentInsets={false}
47-
contentContainerStyle={
48-
inverted ? invertedContentContainerStyle : contentContainerStyle
49-
}
50-
contentInsetAdjustmentBehavior="never"
51-
freeze={freeze}
52-
inverted={isInvertedSupported}
53-
keyboardDismissMode="interactive"
54-
keyboardLiftBehavior={keyboardLiftBehavior}
55-
offset={chatKitOffset}
56-
testID="chat.scroll"
57-
onLayout={onLayout}
58-
{...props}
59-
/>
60-
<Text style={styles.counter} testID="layout_passes">
61-
Layout pass: {layoutPass}
62-
</Text>
63-
</>
64-
);
65-
},
66-
);
28+
const contentContainerStyle = useMemo(
29+
() => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
30+
[],
31+
);
32+
const invertedContentContainerStyle = useMemo(
33+
() => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
34+
[],
35+
);
36+
// on new arch only FlatList supports `inverted` prop
37+
const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
38+
const onLayout = useCallback(
39+
(e: LayoutChangeEvent) => {
40+
setLayoutPass((l) => l + 1);
41+
onLayoutProp?.(e);
42+
},
43+
[onLayoutProp],
44+
);
45+
46+
return (
47+
<>
48+
<KeyboardChatScrollView
49+
ref={ref}
50+
automaticallyAdjustContentInsets={false}
51+
contentContainerStyle={
52+
inverted ? invertedContentContainerStyle : contentContainerStyle
53+
}
54+
contentInsetAdjustmentBehavior="never"
55+
freeze={freeze}
56+
inverted={isInvertedSupported}
57+
keyboardDismissMode="interactive"
58+
keyboardLiftBehavior={keyboardLiftBehavior}
59+
offset={chatKitOffset}
60+
testID="chat.scroll"
61+
onLayout={onLayout}
62+
{...props}
63+
/>
64+
<Text style={styles.counter} testID="layout_passes">
65+
Layout pass: {layoutPass}
66+
</Text>
67+
</>
68+
);
69+
});
6770

6871
const styles = StyleSheet.create({
6972
counter: {

‎FabricExample/src/screens/Examples/KeyboardChatScrollView/index.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { LegendList } from "@legendapp/list";
2-
import { FlashList } from "@shopify/flash-list";
1+
import { LegendList, type LegendListRef } from "@legendapp/list";
2+
import { FlashList, type FlashListRef } from "@shopify/flash-list";
33
import React, {
44
useCallback,
55
useEffect,
@@ -30,16 +30,18 @@ import Message from "./components/Message";
3030
import ConfigSheet from "./config";
3131
import { useChatConfigStore } from "./store";
3232
import styles, { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
33-
import VirtualizedListScrollView from "./VirtualizedListScrollView";
33+
import VirtualizedListScrollView, {
34+
type VirtualizedListScrollViewRef,
35+
} from "./VirtualizedListScrollView";
3436

35-
import type {
36-
LayoutChangeEvent,
37-
ScrollView,
38-
ScrollViewProps,
39-
} from "react-native";
37+
import type { MessageProps } from "../../../components/Message/types";
38+
import type { LayoutChangeEvent, ScrollViewProps } from "react-native";
4039

4140
function KeyboardChatScrollViewPlayground() {
42-
const ref = useRef<ScrollView>(null);
41+
const legendRef = useRef<LegendListRef>(null);
42+
const flashRef = useRef<FlashListRef<MessageProps>>(null);
43+
const flatRef = useRef<FlatList<MessageProps>>(null);
44+
const scrollRef = useRef<VirtualizedListScrollViewRef>(null);
4345
const textInputRef = useRef<TextInput>(null);
4446
const textRef = useRef("");
4547
const [inputHeight, setInputHeight] = useState(TEXT_INPUT_HEIGHT);
@@ -72,7 +74,10 @@ function KeyboardChatScrollViewPlayground() {
7274

7375
useEffect(() => {
7476
// TODO: we loose ref somewhere
75-
ref.current?.scrollToEnd({ animated: true });
77+
legendRef.current?.scrollToEnd({ animated: true });
78+
flashRef.current?.scrollToEnd({ animated: true });
79+
flatRef.current?.scrollToEnd({ animated: true });
80+
scrollRef.current?.scrollToEnd({ animated: true });
7681
}, [messages]);
7782

7883
const memoList = useCallback(
@@ -86,11 +91,11 @@ function KeyboardChatScrollViewPlayground() {
8691
interpolator="ios"
8792
offset={inputHeight}
8893
style={styles.container}
89-
// textInputNativeID="chat-input"
94+
textInputNativeID="chat-input"
9095
>
9196
{mode === "legend" && (
9297
<LegendList
93-
ref={ref}
98+
ref={legendRef}
9499
data={messages}
95100
keyExtractor={(item) => item.text}
96101
renderItem={({ item }) => <Message {...item} />}
@@ -99,7 +104,7 @@ function KeyboardChatScrollViewPlayground() {
99104
)}
100105
{mode === "flash" && (
101106
<FlashList
102-
ref={ref}
107+
ref={flashRef}
103108
data={inverted ? reversedMessages : messages}
104109
keyExtractor={(item) => item.text}
105110
renderItem={({ item }) => <Message {...item} />}
@@ -108,7 +113,7 @@ function KeyboardChatScrollViewPlayground() {
108113
)}
109114
{mode === "flat" && (
110115
<FlatList
111-
ref={ref}
116+
ref={flatRef}
112117
data={inverted ? reversedMessages : messages}
113118
inverted={inverted}
114119
keyExtractor={(item) => item.text}
@@ -117,7 +122,7 @@ function KeyboardChatScrollViewPlayground() {
117122
/>
118123
)}
119124
{mode === "scroll" && (
120-
<VirtualizedListScrollView ref={ref}>
125+
<VirtualizedListScrollView ref={scrollRef}>
121126
{messages.map((message, index) => (
122127
<Message key={index} {...message} />
123128
))}

‎FabricExample/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1462,10 +1462,10 @@
14621462
"@jsonjoy.com/buffers" "^1.0.0"
14631463
"@jsonjoy.com/codegen" "^1.0.0"
14641464

1465-
"@legendapp/list@^3.0.0-beta.33":
1466-
version "3.0.0-beta.33"
1467-
resolved "https://registry.yarnpkg.com/@legendapp/list/-/list-3.0.0-beta.33.tgz#7b69b31c9d12d9d52d733d426d9bd48270cbdbf1"
1468-
integrity sha512-TlFOkqDCmXk15jcyYyOt3aR5oUFEHQJo3l/uQN2ya29ggusU5DK0GbnIzHlSh0caBFuTZEec7ALxJnyvs9AuCw==
1465+
"@legendapp/list@3.0.0-beta.32":
1466+
version "3.0.0-beta.32"
1467+
resolved "https://registry.yarnpkg.com/@legendapp/list/-/list-3.0.0-beta.32.tgz#33a08df134d103e7ae1920ca8385cb59323cd42b"
1468+
integrity sha512-lWIdQ1Z3IrR5Iv7I3qOLDYk9Uh/gc03wITNEObTpR2tIYNvgDibOL/3yAznyvkQMuwl3TLquan46Zo0t/XdmIA==
14691469
dependencies:
14701470
use-sync-external-store "^1.5.0"
14711471

‎example/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useCallback, useMemo, useState } from "react";
1+
import React, { forwardRef, useCallback, useMemo, useState } from "react";
22
import {
33
type LayoutChangeEvent,
44
type ScrollViewProps,
@@ -11,59 +11,62 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
1111
import { useChatConfigStore } from "./store";
1212
import { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
1313

14-
const VirtualizedListScrollView = forwardRef(
15-
({ onLayout: onLayoutProp, ...props }: ScrollViewProps, ref) => {
16-
const [layoutPass, setLayoutPass] = useState(0);
17-
const { bottom } = useSafeAreaInsets();
18-
const chatKitOffset = bottom - MARGIN;
14+
export type VirtualizedListScrollViewRef = React.ElementRef<
15+
typeof KeyboardChatScrollView
16+
>;
1917

20-
const { inverted, freeze, mode, keyboardLiftBehavior } =
21-
useChatConfigStore();
18+
const VirtualizedListScrollView = forwardRef<
19+
VirtualizedListScrollViewRef,
20+
ScrollViewProps
21+
>(({ onLayout: onLayoutProp, ...props }, ref) => {
22+
const [layoutPass, setLayoutPass] = useState(0);
23+
const { bottom } = useSafeAreaInsets();
24+
const chatKitOffset = bottom - MARGIN;
2225

23-
const contentContainerStyle = useMemo(
24-
() => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
25-
[],
26-
);
27-
const invertedContentContainerStyle = useMemo(
28-
() => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
29-
[],
30-
);
31-
// on new arch only FlatList supports `inverted` prop
32-
const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
33-
const onLayout = useCallback(
34-
(e: LayoutChangeEvent) => {
35-
setLayoutPass((l) => l + 1);
36-
onLayoutProp?.(e);
37-
},
38-
[onLayoutProp],
39-
);
26+
const { inverted, freeze, mode, keyboardLiftBehavior } = useChatConfigStore();
4027

41-
return (
42-
<>
43-
<KeyboardChatScrollView
44-
// TODO: fix types
45-
ref={ref}
46-
automaticallyAdjustContentInsets={false}
47-
contentContainerStyle={
48-
inverted ? invertedContentContainerStyle : contentContainerStyle
49-
}
50-
contentInsetAdjustmentBehavior="never"
51-
freeze={freeze}
52-
inverted={isInvertedSupported}
53-
keyboardDismissMode="interactive"
54-
keyboardLiftBehavior={keyboardLiftBehavior}
55-
offset={chatKitOffset}
56-
testID="chat.scroll"
57-
onLayout={onLayout}
58-
{...props}
59-
/>
60-
<Text style={styles.counter} testID="layout_passes">
61-
Layout pass: {layoutPass}
62-
</Text>
63-
</>
64-
);
65-
},
66-
);
28+
const contentContainerStyle = useMemo(
29+
() => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
30+
[],
31+
);
32+
const invertedContentContainerStyle = useMemo(
33+
() => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
34+
[],
35+
);
36+
// on new arch only FlatList supports `inverted` prop
37+
const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
38+
const onLayout = useCallback(
39+
(e: LayoutChangeEvent) => {
40+
setLayoutPass((l) => l + 1);
41+
onLayoutProp?.(e);
42+
},
43+
[onLayoutProp],
44+
);
45+
46+
return (
47+
<>
48+
<KeyboardChatScrollView
49+
ref={ref}
50+
automaticallyAdjustContentInsets={false}
51+
contentContainerStyle={
52+
inverted ? invertedContentContainerStyle : contentContainerStyle
53+
}
54+
contentInsetAdjustmentBehavior="never"
55+
freeze={freeze}
56+
inverted={isInvertedSupported}
57+
keyboardDismissMode="interactive"
58+
keyboardLiftBehavior={keyboardLiftBehavior}
59+
offset={chatKitOffset}
60+
testID="chat.scroll"
61+
onLayout={onLayout}
62+
{...props}
63+
/>
64+
<Text style={styles.counter} testID="layout_passes">
65+
Layout pass: {layoutPass}
66+
</Text>
67+
</>
68+
);
69+
});
6770

6871
const styles = StyleSheet.create({
6972
counter: {

0 commit comments

Comments
 (0)