fix for search clearing text/not scrolling

This commit is contained in:
austinried 2021-08-25 16:32:04 +09:00
parent fac2b62ec2
commit 9847cdb894
2 changed files with 14 additions and 7 deletions

View File

@ -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

View File

@ -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