FlatList is not scrollable inside TabView

Explain what you did (Required) Using TabView and TabView.Item, containing a list inside the TabView.Item.

Expected behavior (Required) The list inside the TabView should continue to be scrollable.

Describe the bug (Required) When having a FlatList inside a TabView.Item, the scrolling of the list is broken - you can only scroll if you very quickly swipe the screen.

To Reproduce (Required) I created this Snack: https://snack.expo.io/2K8V8ALHy

You will notice that, in the browser, everything seems to work. If you actually use Expo GO and scan the app to run it on your device, you will be able to reproduce the bug - not being able to scroll the list in the first tab.

Screenshots (Required)

Your Environment (Required):

software	version
react-native-elements	3.4.2
react-native	Expo 40

[ruiaraujo012]

Now, it works on android but in ios, the scroll is buggy and not work as expected if you try the same code but on an ios device, it won’t work.

Edit: It can be “fixed” with the following code, but the swipe left/right to move between tabs stops working. I think I will use this approach for now, when this bug is fixed I will roll back my solutions.

<TabView.Item onMoveShouldSetResponder={(e) => e.stopPropagation()}>

[MarouaniALA]

I have same issue, I found a tempo solution by creating VirtualizedView component because 2 scroll in the same orientation will throw a warning and put the tabView inside it also used @ruiaraujo012 solution for better performance

export default function VirtualizedView({
                                            children,
                                            getRef, ...props
                                        }: { children?: any, getRef?: any } & FlatListProps) {
    const {data, renderItem, ...otherProps} = props
    const flatListRef = useRef();

    useEffect(() => {
        if (getRef && flatListRef.current)
            getRef(flatListRef.current)

    }, [flatListRef]);


    function header() {
        return <React.Fragment>{children}</React.Fragment>;
    }

    return (
        <FlatList
            ref={flatListRef}
            data={[]}
            ListEmptyComponent={null}
            renderItem={null}
            ListHeaderComponent={header()}
            {...otherProps}
        />
    );
}

export function TabsScreen() {
    const [index, setIndex] = useState(0);
    const [listRef, setlistRef] = useState<FlatList>();

    useEffect(() => {
        listRef?.scrollToOffset({ animated: true, offset: 0 })
    }, [index]);

    return (
        <View>
            <Tab
                indicatorStyle={{backgroundColor: Colors.primary}}
                value={index} onChange={setIndex}>
                <Tab.Item
                    containerStyle={styles.itemContainer}
                    titleStyle={[index === 0 ? styles.selectedItem : styles.unSelectedItem, styles.tabTitleTxt]}
                    title="Tab1"/>

                <Tab.Item
                    containerStyle={styles.itemContainer}
                    titleStyle={[index === 1 ? styles.selectedItem : styles.unSelectedItem, styles.tabTitleTxt]}
                    title="Tab2"/>
            </Tab>

            <VirtualizedView
                getRef={(ref) => {
                    setlistRef(ref);
                }}
                contentContainerStyle={GlobalStyle.bgTransparent}>

                    <TabView value={index} onChange={setIndex}>
                        <TabView.Item
                            onMoveShouldSetResponder={(e) => {
                                e.stopPropagation();
                                return e.isPropagationStopped();
                            }}
                            style={styles.tabView}>

                            <FlatList
                                keyExtractor={item => item?.id.toString()}
                                data={[{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6},]}
                                renderItem={({item}) => <ExchangeBox/>}

                            />
                        </TabView.Item>

                        <TabView.Item style={styles.tabView}>
                            <StyledText>Recent</StyledText>
                        </TabView.Item>
                    </TabView>
            </VirtualizedView>
        </View>
    )
}

hope it helps