React-Native button press after textInput in Keyboard aware scroll view

Question

I have a problem where I have a TextInput and a button inside a KeyboardAwareScrollView. I want the user to input some text and then press the button made with TouchableOpacity. This sends the text forward that the user just inputted.

Problem is that after inputting text, one first try TextInput merely loses focus. Only on the next press attempt is the button actually pressed. How can I have the button react on the first press?

I am using this package https://github.com/APSL/react-native-keyboard-aware-scroll-view

My code is as follows:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export default class App extends Component<{}> {
  render() {
    return (
      <KeyboardAwareScrollView>
        <TextInput
          style={{ width: 100, height: 50, backgroundColor: 'blue' }}
        />
        <TouchableOpacity 
          style={{ backgroundColor: 'red', width: 50, height: 50 }}
        />
      </KeyboardAwareScrollView>
    );
  }
}

score 12 · Accepted Answer · edited Jul 23 '18 at 11:25

12

Please use keyboardShouldPersistTaps='always' on ScrollView. Below is how to do it.

<ScrollView
            keyboardShouldPersistTaps='always' >
</ScrollView>

It's happening because ScrollView has property to dismiss the keyboard first and then it will allow actions to its child views. Now we are changing that behavior with above property.

edited Jul 23 '18 at 11:25

user2473015

1,392
3
22
47

answered Nov 22 '17 at 08:46

Sivajee Battina

4,124
2
22
45

1

Why does this change whether I can press things outside of the Scrollview though? – Waltari Nov 22 '17 at 08:56
If the scrollview or scrollview children components on top, it will try to dismiss the keyboard first. – Sivajee Battina Nov 22 '17 at 09:13
Please do let me know, in case if my answer is different from what you asked – Sivajee Battina Nov 22 '17 at 09:16
Hey, you answered what I asked about :) Cheers – Waltari Nov 22 '17 at 10:05

React-Native button press after textInput in Keyboard aware scroll view

1 Answers1

Linked