Flatlist scroll and scrollview scroll is not working inside modal

Viewed 41

I am making filter modal for e-commerce application where I divided it into two component view one for left and one for right view. Where I am using flatlist for left view and scrollview for right.

I am trying achieve scroll on both side. I don't know why isn't working.Same code is working for different project without any problem. I am unable to scroll on either side. Attaching code snippet for same.

              <Modal
      animationType="slide"
      transparent={true}
      visible={this.state.modalVisible}
      onRequestClose={() => {
        this.setState({ modalVisible: !this.state.modalVisible });
      }}
    >
      <View style={Style.general.centeredView}>
        <View style={Style.general.modalView}>
          <View style={Style.general.filterModal}>
            <Text style={Style.general.filterModalHeading}>FILTERS</Text>
            {this.state.filtersApplied.length > 0 ? (
              <TouchableOpacity
                style={{
                  alignSelf: "flex-end",
                  marginRight: 10,
                  paddingHorizontal: 10,
                  paddingVertical: 5,
                  borderWidth: 1,
                  borderColor: "#000",
                  borderRadius: 5,
                }}
                onPress={() => this.clearFiltersHandler()}
              >
                <Text>Clear Filters</Text>
              </TouchableOpacity>
            ) : null}
          </View>

          <View style={Style.general.filterModalData}>
            <View style={Style.general.filterModalDataLeftScroll}>
              {/* {isFetching && modalVisible ? <Loader /> : null} */}

              {this.state.filters && (
                <FlatList
                  // contentContainerStyle={styles.listContainer}
                  data={this.state.filters}
                  // numColumns={2}
                  // onEndReached={() => fetchProducts(false, sortApplied)}
                  // onEndReachedThreshold={0.1}
                  keyExtractor={() =>
                    "_" + Math.random().toString(36).substr(2, 9)
                  }
                  renderItem={this.renderFilters}
                  // removeClippedSubviews
                />
              )}
            </View>

            <ScrollView
              style={{
                flexGrow: 1,
                width: "70%",
                flexDirection: "column",
                paddingHorizontal: 10,
              }}
            >
              {this.state.activeFilterLabel !== "pf_p_price" &&
                this.state.fliterLabel.map((values, i) => {
                  // console.log("values", values);
                  return (
                    <TouchableOpacity
                      key={i}
                      onPress={() => this.addFilterHandler(values)}
                    >
                      <View
                        style={Style.general.filterModalDataRightFilter}
                      >
                        <View
                          style={[
                            Style.general.filterBoxWrap,
                            {
                              backgroundColor:
                                this.state.filtersApplied.some(
                                  (filter) => filter == values.key
                                )
                                  ? "#000"
                                  : "#fff",
                            },
                          ]}
                        >
                          <Icon name="check" size={11} color="#fff" />
                        </View>
                        <Text
                          style={{
                            fontFamily: "Futura",
                            fontSize: 12,
                          }}
                        >
                          {values.key}
                        </Text>
                      </View>
                    </TouchableOpacity>
                  );
                })}
              {this.state.activeFilterLabel === "pf_p_price" ? (
                <View>
                  <Text>Hello</Text>
                </View>
              ) : null}
            </ScrollView>
          </View>
          {this.state.filterModalLoader ? (
            <TouchableOpacity style={{ flex: 1 }} />
          ) : null}
          <View style={Style.general.filterBtnFix}>
            <TouchableWithoutFeedback
              onPress={() => {
                this.setState({ modalVisible: false });
              }}
            >
              <View style={Style.general.filterBtnFixWrap}>
                <Text style={Style.general.filterBtnFixWrapText}>
                  Close
                </Text>
              </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback
              onPress={() => {
                this.setState({ modalVisible: false });
              }}
            >
              <View style={Style.general.filterBtnFixWrap}>
                <Text style={Style.general.filterBtnFixWrapText}>
                  Apply
                </Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </View>
      </View>
    </Modal>
0 Answers
Related