Making ListView Clickable React Native

Question

I am trying to make my ListView clickable so that whenever the user clicks anywhere on the screen. An item is added to the list. Now the problem I am facing is that the listview is not scrolling.

So to solve this issue I wrapped my ListView with TouchableWithoutFeedback to make the screen clickable but unfortunately it cant be scrolled.

So to solve the scrolling issue I wrapped the whole thing under ScrollView. But the problem now I am facing is that since during the start only 1 item is there in the listview so the whole screen isn't clickable only that small portion is that the 1 item takes on the screen is clickable.

Is there a solution to this problem?

 <ScrollView>
        <Screen
          onStartShouldSetResponder={() => true}
          style={{
            flex: 1
          }}
        >
          <TouchableOpacity
            style={{ flex: 1 }}
            onPress={() => this.addMessage()}
          >
            <ListView
              data={this.state.readMessages}
              renderRow={this.renderRow}
              scrollEnabled={true}
            />
          </TouchableOpacity>
        </Screen>
      </ScrollView>

This is what I ended up in the end.

Nirmalsinh Rathod · Accepted Answer · 2018-06-22 18:32:13Z

2

You can remove the scrollView as you are using ListView.

      <TouchableOpacity
        style={{ flex: 1 }}
        onPress={() => this.addMessage()}
      >
<ScrollView>
    <Screen
      onStartShouldSetResponder={() => true}
      style={{
        flex: 1
      }}
    >
        <ListView
          data={this.state.readMessages}
          renderRow={this.renderRow}
          scrollEnabled={true}
        />
    </Screen>
</ScrollView>
      </TouchableOpacity>

You can try with above code. Also one more thing, ListView is deprecated. You can use FlatList.

edited Jun 22, 2018 at 18:32

answered Jun 22, 2018 at 18:28

Nirmalsinh Rathod

5,2414 gold badges28 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kamil Kamili Over a year ago

if I remove ScrollView then it doesn't scroll

Kamil Kamili Over a year ago

okays now its scrolling but when the list takes the whole view then the onPress doesnt work

Nirmalsinh Rathod Over a year ago

Try to put alert('OnPress') and check that alert is there or not.

Kamil Kamili Over a year ago

Yeah, the alert works until the listview takes the whole screen. then it's not clickable. I removed this prop from Screen onStartShouldSetResponder={() => true} but then the onPress wasn't called at all. Regardless of whether the listview took the whole screen or not.

Nirmalsinh Rathod Over a year ago

You need to handle the ListView's render method and you need to put your code into it. Once ListView added. You cannot get a click.

|

Collectives™ on Stack Overflow

Making ListView Clickable React Native

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related