Can't use a FlatList

[y-maslouskaya]

Hello, I am trying to make it work with FlatList, but I receive an error: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. "

Is there a way to use this package with a FlatList inside?

Thank you!

[Heston1]

I'm also having the same issue, its because it wrapping everything in a scroll view Panel.tsx:258, I'm going to comment here instead of creating a pull request because I think the author isn't interested in making it more flexible https://github.com/enesozturk/rn-swipeable-panel/issues/79, for my use case I needed it to have multiple elements in there including a flat list, so I decided to copy the repo and modify it instead of doing it from scratch.

I made changes to the following: I replaced the ScrollView with View I wrapped the Bar and the close button in an Animated.View and attached the panHandlers to it instead. I removed paneHeight from the container, and changed the View wrapper to be the actual height of the container panelHeight-newY

replace Panel.tsx:242-276 with:

<Animated.View
    style={[
    SwipeablePanelStyles.panel,
    {
        width: this.props.fullWidth ? deviceWidth : deviceWidth - 50,
    },
    { transform: this.state.pan.getTranslateTransform() },
    style,
    ]}
>
    <Animated.View {...this._panResponder.panHandlers}>
    {!this.props.noBar && <Bar barStyle={barStyle} barContainerStyle={barContainerStyle}  />}
    {this.props.showCloseButton && (
        <Close rootStyle={closeRootStyle} iconStyle={closeIconStyle} onPress={this.props.onClose} />
    )}
    </Animated.View>
    <View style={{height: panelHeight-newY}}>{this.props.children}</View>
</Animated.View>

replace Panel.tsx:199 with

} else this.setState({ canScroll: newStatus === STATUS.LARGE ? true : false, newY });

add the newY to state under Panel.tsx:80

newY: 0,

and add it to SwipeablePanelState type, under line Panel.tsx:60

newY: number;

I don't think this should be wrapped in a scroll view, maybe there could be a containerComponent prop, where you can specify if its a view, scroll view etc. hope this helps.

[lohenyumnam]

Hi, This is common with React Native. we cannot use FlatList inside ScrollVIew. a quick solution to this problem is to wrap your FlatList with another ScrollView with different Directions to FlatList.

PS: This is not the best solution, but sometimes this helps if this is the only solution.

import {ScrollView} from 'react-native';
import React from 'react';

const ScrollViewFlatListFixed = ({children}) => {
  return (
    <ScrollView horizontal={true} scrollEnabled={false}>
      {children}
    </ScrollView>
  );
};

export default ScrollViewFlatListFixed;

Wrap your FlatList with this ScrollViewFlatListFixed.

eg:

<ScrollViewFlatListFixed>
    <FlatList />
<ScrollViewFlatListFixed/>

Again this is not the best solution.