mirror of
https://github.com/austinried/subtracks.git
synced 2025-12-27 00:59:28 +01:00
fix for search clearing text/not scrolling
This commit is contained in:
parent
fac2b62ec2
commit
9847cdb894
@ -1,21 +1,24 @@
|
||||
import GradientBackground from '@app/components/GradientBackground'
|
||||
import colors from '@app/styles/colors'
|
||||
import dimensions from '@app/styles/dimensions'
|
||||
import React from 'react'
|
||||
import { ScrollViewProps, useWindowDimensions } from 'react-native'
|
||||
import React, { ForwardedRef, PropsWithChildren } from 'react'
|
||||
import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
|
||||
import Animated from 'react-native-reanimated'
|
||||
|
||||
const GradientScrollView: React.FC<
|
||||
export type GradientScrollViewProps = PropsWithChildren<
|
||||
Animated.AnimateProps<ScrollViewProps> & {
|
||||
offset?: number
|
||||
}
|
||||
> = props => {
|
||||
>
|
||||
|
||||
const GradientScrollView = React.forwardRef<ScrollView, GradientScrollViewProps>((props, ref) => {
|
||||
const layout = useWindowDimensions()
|
||||
|
||||
const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
|
||||
|
||||
return (
|
||||
<Animated.ScrollView
|
||||
ref={ref as ForwardedRef<Animated.ScrollView>}
|
||||
overScrollMode="never"
|
||||
{...props}
|
||||
style={[props.style, { backgroundColor: colors.gradient.low }]}
|
||||
@ -24,6 +27,6 @@ const GradientScrollView: React.FC<
|
||||
{props.children}
|
||||
</Animated.ScrollView>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default GradientScrollView
|
||||
|
||||
@ -17,6 +17,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
InteractionManager,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
TextInput as ReactTextInput,
|
||||
@ -90,17 +91,20 @@ const Search = () => {
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [text, setText] = useState('')
|
||||
const searchBarRef = useRef<ReactTextInput>(null)
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
const task = InteractionManager.runAfterInteractions(() => {
|
||||
setTimeout(() => {
|
||||
setText('')
|
||||
setResults({ artists: [], albums: [], songs: [] })
|
||||
searchBarRef.current?.focus()
|
||||
scrollRef.current?.scrollTo({ y: 0, animated: true })
|
||||
}, 50)
|
||||
})
|
||||
return () => task.cancel()
|
||||
}, [searchBarRef]),
|
||||
}, [searchBarRef, scrollRef]),
|
||||
)
|
||||
|
||||
useActiveServerRefresh(
|
||||
@ -131,7 +135,7 @@ const Search = () => {
|
||||
const resultsCount = results.albums.length + results.artists.length + results.songs.length
|
||||
|
||||
return (
|
||||
<GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
|
||||
<GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.inputBar}>
|
||||
<TextInput
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user