forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge branch 'main' of github.com:bluesky-social/social-app into main
+36
-1
+36
-1
src/view/screens/Feeds.tsx
+36
-1
src/view/screens/Feeds.tsx
···
1
1
import React from 'react'
2
-
import {ActivityIndicator, StyleSheet, View} from 'react-native'
2
+
import {ActivityIndicator, StyleSheet, View, type FlatList} from 'react-native'
3
3
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
4
4
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
5
5
import {ViewHeader} from 'view/com/util/ViewHeader'
···
34
34
import {cleanError} from 'lib/strings/errors'
35
35
import {useComposerControls} from '#/state/shell/composer'
36
36
import {useSession} from '#/state/session'
37
+
import {isNative} from '#/platform/detection'
37
38
38
39
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
39
40
···
118
119
error: searchError,
119
120
} = useSearchPopularFeedsMutation()
120
121
const {hasSession} = useSession()
122
+
const listRef = React.useRef<FlatList>(null)
121
123
122
124
/**
123
125
* A search query is present. We may not have search results yet.
···
338
340
)
339
341
}, [pal, _])
340
342
343
+
const searchBarIndex = items.findIndex(
344
+
item => item.type === 'popularFeedsHeader',
345
+
)
346
+
347
+
const onChangeSearchFocus = React.useCallback(
348
+
(focus: boolean) => {
349
+
if (focus && searchBarIndex > -1) {
350
+
if (isNative) {
351
+
// scrollToIndex scrolls the exact right amount, so use if available
352
+
listRef.current?.scrollToIndex({
353
+
index: searchBarIndex,
354
+
animated: true,
355
+
})
356
+
} else {
357
+
// web implementation only supports scrollToOffset
358
+
// thus, we calculate the offset based on the index
359
+
// pixel values are estimates, I wasn't able to get it pixel perfect :(
360
+
const headerHeight = isMobile ? 43 : 53
361
+
const feedItemHeight = isMobile ? 49 : 58
362
+
listRef.current?.scrollToOffset({
363
+
offset: searchBarIndex * feedItemHeight - headerHeight,
364
+
animated: true,
365
+
})
366
+
}
367
+
}
368
+
},
369
+
[searchBarIndex, isMobile],
370
+
)
371
+
341
372
const renderItem = React.useCallback(
342
373
({item}: {item: FlatlistSlice}) => {
343
374
if (item.type === 'error') {
···
415
446
onChangeQuery={onChangeQuery}
416
447
onPressCancelSearch={onPressCancelSearch}
417
448
onSubmitQuery={onSubmitQuery}
449
+
setIsInputFocused={onChangeSearchFocus}
418
450
style={{flex: 1, maxWidth: 250}}
419
451
/>
420
452
)}
···
427
459
onChangeQuery={onChangeQuery}
428
460
onPressCancelSearch={onPressCancelSearch}
429
461
onSubmitQuery={onSubmitQuery}
462
+
setIsInputFocused={onChangeSearchFocus}
430
463
/>
431
464
</View>
432
465
)}
···
469
502
onChangeQuery,
470
503
onPressCancelSearch,
471
504
onSubmitQuery,
505
+
onChangeSearchFocus,
472
506
],
473
507
)
474
508
···
486
520
{preferences ? <View /> : <ActivityIndicator />}
487
521
488
522
<List
523
+
ref={listRef}
489
524
style={[!isTabletOrDesktop && s.flex1, styles.list]}
490
525
data={items}
491
526
keyExtractor={item => item.key}