Click TouchableOpacity while TextInput is focused-CodePudding

I'm currently working on a React Native App, where the user can type some text input and click "ok" to confirm. Next question appears. But at the moment i have to double click the button. First time the keyboard closes and second time the button is pressed. Same thing for iOS and android.
I already tried keyboardShoulPersitsTaps='always'and also handled, but nothing works.
I also tried to make every view above a scroll view and added this prop, but still no luck...

Can anyone help?

CodePudding user response：

You are nesting a ScrollView with a KeyboardAwareScrollView.

You need to set the keyboardShouldPersistTaps prop on the parent view as well. Consider the following code snippet from your snack.

<KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
        <SafeAreaView style={styles.container}>
          <ScrollView ref={scrollViewRef} onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })} keyboardShouldPersistTaps='handled'>
            {steps.map(item => { return (<SingleAlgorithmStep key={item["Question"]} step={item} stepsDone={steps} clickedButtons={clickedButtons} algorithmJson={currentAlgorithmJson} actualizeSteps={(item) => updateSteps(item)} actualizeButtons={(item) => updateClickedButton(item)} />) })}
          </ScrollView>
        </SafeAreaView>
</KeyboardAwareScrollView>

This fixed the issue on my device.

CodePudding user response：

You are using the incorrect property name, keyboardShouldPersistTabs, instead of keyboardShouldPersistTaps.

<ScrollView
      keyboardShouldPersistTaps="handled"
>
      ....
</ScrollView>