pressing twice to make the button work when TextInput is focused

Question

I have problem when trying to submit data from the TextInput component. When trying to press the button that invoke the callback that handle the text, there is a need to press it twice for it to work. Once for the TextInput lose its focus and the second time to invoke the callback. I tried this solution but it didnt worked for me.

COMPONENT:

  <Modal>
    <ScrollView>
      <Card>
        <CardImage source={{uri: this.props.linkImage}}/>
        <CardContent/>
      </Card>
      {
        this.state.single.map((comment) => {
          return comment[3] ?  
            <Comp/> : null                                           
          })
      }
  </ScrollView> 
    <KeyboardAvoidingView behavior="padding" enabled>   
      <CardAction>
      <TouchableOpacity>
        <IconFA name="reply"/>
      </TouchableOpacity>
      <TouchableOpacity>
        <IconEn name="thumbs-up"/>
      </TouchableOpacity>
      <TouchableOpacity>
        <IconEn name="thumbs-down"/>
      </TouchableOpacity>

      </CardAction> 
      <CardAction>
        <TextInput ref={input => this.input = input}/>
        <TouchableOpacity>
          <IconFA name="rocket"/>
        </TouchableOpacity> 
      </CardAction> 
    </KeyboardAvoidingView>             
  </Modal>

which value did you provide to keyboardShouldPersistTaps prop? — wizloc, Jun 15 '18 at 13:25
`always` although I might miss-placed it, which component should I wrap inside `keyboardShouldPersistTaps `? — obiwankenoobi, Jun 15 '18 at 13:27

score 2 · Answer 1 · answered Mar 09 '22 at 23:21

2

Just pass keyboardShouldPersistTaps="always" prop to ScrollView wrapping your component like this:

<ScrollView keyboardShouldPersistTaps="always">
   ...content
<ScrollView>

answered Mar 09 '22 at 23:21

Shivam Kakkar

91
1
2

pressing twice to make the button work when TextInput is focused

1 Answers1