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>