TouchableOpacity unclickable while TextInput has focus

Question

I have implemented a search bar including a TextInput and a search button. The idea is basically to type what you wish to search for and hit the search button. My problem is that the button is unclickable while the TextInput has focus. Meaning I have to click twice to search, once for the TextInput to lose focus and once to hit the search button.

Here's my code:

<View style={styles.searchView}>
    <View style={styles.textInputView}>
        <View>
            <TextInput style={styles.textInput}
                       placeholder="Sök användare"
                       multiline={false}
                       autoFocus={true}
                       autoCapitalize="words"
                       underlineColorAndroid="transparent" />
        </View>
    </View>
    <TouchableOpacity>
        <View style={styles.searchButton}>
            <Image style = {styles.searchThumbnail}
                       source = {require('../images/navigatorThumbnails/search.png')}/>
        </View>
    </TouchableOpacity>
</View>

Is there any way to make the TouchableOpacity clickable while the TextInput has focus?

Answer 1

There is a property called keyboardShouldPersistTaps on Scrollviews (and also ListViews).

For React-Native version >= 0.41

The documentation says:

Determines when the keyboard should stay visible after a tap.

• 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.

• 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

• 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).

Set it to always or handled to have the expected behaviour.

Outdated version for React-Native < 0.41

The documentation says:

When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false.

Set it to true to have the expected behaviour. You might have to set this prop at different places in your component tree.