react native modal issue when containing TextInput and Button

Question

Steps to replicate:

1) Use React Naitve modal 2) Modal contains TextInput and a button 3) enter some text in TextInput and click on button 4) on the first click nothing happens. Keywoard just disappears 5) on the second click text is sent back to whoever called this modal.

class ReplyModal extends Component <Props, State> {

  state = { modalVisible: false, reply: '' };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  } 
  componentDidMount() {
    this.setState({ modalVisible: this.props.modalVisible });
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ modalVisible: nextProps.modalVisible });
  }
  onSubmitReply = () => {
    this.setState({ modalVisible: false });
    this.props.onSubmitReply(this.state.reply);
  } 
  render() {
    return (

      <Modal
        animationType={'slide'}
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          alert("your data is saved.");
        }}
      >
        <View style={styles.modalViewOuter}>
          <View style={styles.modalViewInner}>
            <View style={{ flexDirection: 'row', justifyContent:'flex-end' }}>
              <TouchableOpacity onPress={() => this.setState({ modalVisible: false })} >
                <MaterialIcons name="close" color="grey" size={25} />
              </TouchableOpacity>
            </View>


            <FormInput value={this.state.reply} 
              placeholder="Reply to the comment"
              onChangeText={(reply) => this.setState({ reply })}
            />

            <Button
              backgroundColor="#03A9F4"
              buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
              title='Submit Reply'
              onPress={this.onSubmitReply}
            />

          </View>
        </View>
      </Modal>
    );
  }
}

Issue remains true with 1) TextInput or FormInput 2) Button or TouchableOpacity or anything similar.

Edit: The same issue occurs if on android i click back (on the bottom of screen; next to home button). The first time keyboard disappears and the second time clicking on back button -> Modal disappears.

Answer 1

I encountered this issue but it was actually caused by the <SectionList>. Adding

<SectionList keyboardShouldPersistTaps="always"/>

fixed my problem

Same thing goes to

<ScrollView>, <FlatList>