Dismiss keyboard in search on scroll

zio/stable
Paul Frazee 2022-12-05 15:22:23 -06:00
parent bbe6bf8fc2
commit 7561b19f3d
1 changed files with 12 additions and 3 deletions

View File

@ -1,5 +1,13 @@
import React, {useEffect, useState, useMemo, useRef} from 'react' import React, {useEffect, useState, useMemo, useRef} from 'react'
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' import {
Keyboard,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {SuggestedFollows} from '../com/discover/SuggestedFollows' import {SuggestedFollows} from '../com/discover/SuggestedFollows'
import {UserAvatar} from '../com/util/UserAvatar' import {UserAvatar} from '../com/util/UserAvatar'
@ -50,13 +58,14 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
ref={textInput} ref={textInput}
placeholder="Type your query here..." placeholder="Type your query here..."
selectTextOnFocus selectTextOnFocus
returnKeyType="search"
style={styles.input} style={styles.input}
onChangeText={onChangeQuery} onChangeText={onChangeQuery}
/> />
</View> </View>
<View style={styles.outputContainer}> <View style={styles.outputContainer}>
{query ? ( {query ? (
<View> <ScrollView onScroll={Keyboard.dismiss}>
{autocompleteView.searchRes.map((item, i) => ( {autocompleteView.searchRes.map((item, i) => (
<TouchableOpacity <TouchableOpacity
key={i} key={i}
@ -75,7 +84,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </ScrollView>
) : ( ) : (
<SuggestedFollows asLinks /> <SuggestedFollows asLinks />
)} )}