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 butto n 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>
);
}
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.