Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Keyboard not being dismissed in React Native

$
0
0

I'm looking to dismiss the keyboard when the user clicks on anywhere outside the keyboard or the input. The following code works fine:

<ScrollView
            keyboardShouldPersistTaps='handled'
            contentContainerStyle={{ flex: 1 }}
        >
            <View style={styles.inputContainer}>
                <TextInput
                    placeholder="Search Term"
                    style={styles.input}
                    onChangeText={setSearch}
                    value={search}
                    returnKeyType="search"
                    onSubmitEditing={handleSubmit}
                />
            </View>
        </ScrollView>

The styling is pretty standard:

    inputContainer: {
        position: 'absolute',
        top: stackHeaderHeight + 10,
        height: height * .1,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },

But, when I introduce the map, react-native-maps in this case, the keyboard dismiss doesn't work. Manipulating zIndex of the ScrollView doesn't make a difference.

<ScrollView
            keyboardShouldPersistTaps='handled'
            contentContainerStyle={{ flex: 1 }}
        >
            <View style={styles.inputContainer}>
                <TextInput
                    placeholder="Search Term"
                    style={styles.input}
                    onChangeText={setSearch}
                    value={search}
                    returnKeyType="search"
                    onSubmitEditing={handleSubmit}
                />
            </View>
            <MapView
                style={StyleSheet.absoluteFillObject}
                region={region}
                onRegionChangeComplete={onRegionChangeComplete}
                ref={mapviewRef}
                showsUserLocation={true}
            >
               // markers and callouts
            </MapView>
        </ ScrollView>

I've tried wrapping the entire component with <TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>, but doesn't make a difference.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>