Pressing a button only dismisses the keyboard - react-native

Question

I have a Modal which contains a TextInput and a Button. When the modal is opened, the keyboard appears which enables to enter text in the TextInput.
My problem is that when I press the button for the first time, the keyboard is dismissed but the button onPress method is not triggered.
import React from 'react';
import {
StyleSheet,
View,
Modal,
Text,
TextInput,
InteractionManager,
ScrollView,
TouchableWithoutFeedback,
TouchableOpacity,
Keyboard,
} from 'react-native';
import theme from '../../styles/theme.style';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import I18n from '../../utils/i18n';
class RenameDrillModal extends React.Component {
// Enables to open the keyboard when the component is rendered
inputRef = React.createRef();
componentDidMount() {
this.focusInputWithKeyboard();
}
focusInputWithKeyboard() {
InteractionManager.runAfterInteractions(() => {
this.inputRef.current.focus();
});
}
render() {
return (
<View>
<Modal
animationType="fade"
transparent
visible
onRequestClose={() => {
this.props.close();
}}
>
{/* The sole purpose of the three following tags (TouchableOpacity, ScrollView, TouchableWithoutFeedback) is to close the modal when clicking outside of it */}
<TouchableOpacity
activeOpacity={1}
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
onPressOut={() => {
this.props.close();
}}
>
<ScrollView directionalLockEnabled>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.modalTitleView}>
<Text style={styles.modalTitleText}>{`${this.props.drillTitle}`}</Text>
<View style={{ minWidth: '50%', flexDirection: 'row' }}>
<TextInput
style={{ minWidth: '90%', margin: 5, marginBottom: 0, flex: 1 }}
placeholder={I18n.t('drillEditor.drillManager.clickHereToRename')}
onChangeText={text => this.props.textModified(text)}
ref={this.inputRef}
/>
<MaterialCommunityIcons
name="check"
color={theme.COLOR_PRIMARY}
size={26}
onPress={() => {
console.log('Rename, onPress called');
this.props.close();
this.props.confirmNewName();
}}
/>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</TouchableOpacity>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
modalTitleView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 20,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
modalTitleText: {
fontWeight: 'bold',
fontSize: 20,
marginBottom: 15,
textAlign: 'center',
},
item: {
backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
padding: 8,
borderRadius: 10,
marginVertical: 8,
marginHorizontal: 8,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
});
export default RenameDrillModal;
The second press on the button works but do you know how I could both dismiss the keyboard and push the button by only pressing once?