React Native: Scrollview click outside of Textbox

Question

I encountered the following issue: I have a view with two textboxes and one text button. Ones i enter something in the textbox and click on the text button, i have to click twice so that it actually works. If i replace the Scrollview by a View it works. Is there a fix for it?

var TestScreen = React.createClass({
  render: function() {
    var self = this;
   return (
     <ScrollView>
       <TextInput
      placeholder='test' 
       style = {{
         height: 50, 
          backgroundColor: 'green',
       }} />
      <TextInput
      placeholder='test' 
       style = {{
         height: 50, 
          backgroundColor: 'blue',
       }} />
       <Text onPress={() => alert('click')} style = {{
       backgroundColor: 'orange', 
       }} > Text </Text>
     </ScrollView> 
   );
  }
})

http://stackoverflow.com/questions/34290787/touchableopacity-as-item-in-listview-only-reacts-after-textinput-has-lost-focus — Patrick Klitzke, Dec 19 '15 at 23:46

score 3 · Answer 1 · answered Jan 30 '17 at 14:05

3

Did you try to add keyboardShouldPersistTaps='handled' to the ScrollView props?

<ScrollView keyboardShouldPersistTaps='handled'>  
   ...
</ScrollView>

answered Jan 30 '17 at 14:05

Hossein

3,755
2
29
39

1

Thank for saving my day :) – Hamid Mar 01 '17 at 13:08
This is a really great answer. – drazewski Apr 29 '20 at 20:37
Thank you Hossein, I had this issue, and this answer solved it. – Amr Eraky Jul 01 '21 at 10:31

React Native: Scrollview click outside of Textbox

1 Answers1