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>
    );
  }
}

Answer 1

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.