Quantcast
Viewing all articles
Browse latest Browse all 17058

Keyboard not being dismissed in React Native

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 17058

Trending Articles