CODEWITHSUNDEEP
react-nativekeyboard
grafj73
grafj73

Reputation: 71

Click TouchableOpacity while TextInput is focused

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?

Upvotes: 0

Views: 1429

Answers (2)

David Scholz
David Scholz

Reputation: 9788

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.

Upvotes: 1

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

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

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

Upvotes: 1

Related Questions