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.

Answer 1

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.