React Native two time taps required for onPress event inside scrollview

Question

I'm using TextInput inside ScrollView and KeyboardAvoidingView but it require two time taps for submit text when keyboard is open.
for soluation i'm add keyboardShouldPersistTaps="always" but it not working.

render() {
    return (
        <View style={{flex: 1}}>
            <KeyboardAvoidingView style={{flex:1}}>
            <ScrollView keyboardShouldPersistTaps="always" 
                contentContainerStyle={{
                    paddingHorizontal: 10,
                    flexGrow : 1,
                    justifyContent : 'center',
                    alignItems:'center'}}>
                <View style={{backgroundColor:'green', width:'100%', borderRadius:8, overflow:'hidden'}}>
                    <TextInput style={{margin:10}}/>
                    <TouchableOpacity onPress={() => {alert('alert')}}>
                        <Text>Submit</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
            </KeyboardAvoidingView>
        </View>
    )
}

How to fire on press event on single tap?

i was use this component to another page scrollview so it's not working after add "keyboardShouldPersistTaps="always"" on that super scrollview issue solved — Bhaumik Surani, Jun 11 '19 at 14:18
Does this answer your question? [How to avoid having to click TouchableOpacity twice to trigger onPress event?](https://stackoverflow.com/questions/58264910/how-to-avoid-having-to-click-touchableopacity-twice-to-trigger-onpress-event) — Arsen Khachaturyan, Apr 10 '20 at 18:14

score 6 · Answer 1 · edited May 26 '21 at 21:04

6

Use "handled" instead of "always". keyboardShouldPersistTaps="handled"

edited May 26 '21 at 21:04

Alex Wayne

178,991
47
309
337

answered Jun 12 '19 at 05:39

Kaushik Radadiya

373
1
2
9

It works (keyboardShouldPersistTaps="handled" with a "d" as you wrote the first time) – Simon Jan 05 '21 at 09:00

score 1 · Answer 2 · answered Jun 11 '19 at 07:19

1

You have to write a onPress method of TouchableOpacity component something like this

 <TouchableOpacity
onPress={() => alert('Clicked)}>
      <Text>Submit</Text>
 </TouchableOpacity>

answered Jun 11 '19 at 07:19

Renish

21
6

React Native two time taps required for onPress event inside scrollview

2 Answers2