this repo has no description
scroll to top on tab press
+45
-8
+18
-4
apps/expo/src/app/(tabs)/timeline.tsx
+18
-4
apps/expo/src/app/(tabs)/timeline.tsx
···
1
-
import { useMemo, useState } from "react";
1
+
import { useMemo, useRef, useState } from "react";
2
2
import { ActivityIndicator, Text, View } from "react-native";
3
3
import { Stack } from "expo-router";
4
4
import { AppBskyFeedDefs } from "@atproto/api";
···
25
25
"following",
26
26
);
27
27
const agent = useAuthedAgent();
28
+
const ref = useRef<FlashList<any>>(null);
28
29
29
30
const timeline = useInfiniteQuery({
30
31
queryKey: ["timeline", mode],
···
87
88
<Tabs>
88
89
<Tab
89
90
text="Following"
90
-
onPress={() => setMode("following")}
91
91
active={mode === "following"}
92
+
onPress={() =>
93
+
mode === "following"
94
+
? ref.current?.scrollToIndex({ index: 0, animated: true })
95
+
: setMode("following")
96
+
}
92
97
/>
93
98
<Tab
94
99
text="What's Hot"
95
-
onPress={() => setMode("popular")}
96
100
active={mode === "popular"}
101
+
onPress={() =>
102
+
mode === "popular"
103
+
? ref.current?.scrollToIndex({ index: 0, animated: true })
104
+
: setMode("popular")
105
+
}
97
106
/>
98
107
<Tab
99
108
text="Mutuals"
100
-
onPress={() => setMode("mutuals")}
101
109
active={mode === "mutuals"}
110
+
onPress={() =>
111
+
mode === "mutuals"
112
+
? ref.current?.scrollToIndex({ index: 0, animated: true })
113
+
: setMode("mutuals")
114
+
}
102
115
/>
103
116
</Tabs>
104
117
</>
···
135
148
<>
136
149
{header}
137
150
<FlashList
151
+
ref={ref}
138
152
data={data}
139
153
renderItem={({ item: { hasReply, item } }) => (
140
154
<FeedPost item={item} hasReply={hasReply} />
+27
-4
apps/expo/src/components/profile-view.tsx
+27
-4
apps/expo/src/components/profile-view.tsx
···
1
-
import { useMemo, useState } from "react";
1
+
import { useMemo, useRef, useState } from "react";
2
2
import { ActivityIndicator, Text, View } from "react-native";
3
3
import { SafeAreaView } from "react-native-safe-area-context";
4
4
import { Stack } from "expo-router";
···
20
20
const [mode, setMode] = useState<"posts" | "replies" | "likes">("posts");
21
21
const [atTop, setAtTop] = useState(true);
22
22
const agent = useAuthedAgent();
23
+
const ref = useRef<FlashList<any>>(null);
23
24
24
25
const profile = useQuery(["profile", handle], async () => {
25
26
const profile = await agent.getProfile({
···
151
152
}}
152
153
/>
153
154
<FlashList
155
+
ref={ref}
154
156
data={[null, ...data]}
155
157
renderItem={({ item }) =>
156
158
item === null ? (
···
158
160
<Tab
159
161
text="Posts"
160
162
active={mode === "posts"}
161
-
onPress={() => void setMode("posts")}
163
+
onPress={() =>
164
+
mode === "posts"
165
+
? ref.current?.scrollToIndex({
166
+
index: 0,
167
+
animated: true,
168
+
})
169
+
: setMode("posts")
170
+
}
162
171
/>
163
172
<Tab
164
173
text="Posts & Replies"
165
174
active={mode === "replies"}
166
-
onPress={() => void setMode("replies")}
175
+
onPress={() =>
176
+
mode === "replies"
177
+
? ref.current?.scrollToIndex({
178
+
index: 0,
179
+
animated: true,
180
+
})
181
+
: setMode("replies")
182
+
}
167
183
/>
168
184
<Tab
169
185
text="Likes"
170
186
active={mode === "likes"}
171
-
onPress={() => void setMode("likes")}
187
+
onPress={() =>
188
+
mode === "likes"
189
+
? ref.current?.scrollToIndex({
190
+
index: 0,
191
+
animated: true,
192
+
})
193
+
: setMode("likes")
194
+
}
172
195
/>
173
196
</Tabs>
174
197
) : (