How to fix Error not warning: ERROR VirtualizedLists should never be nested inside plain ScrollViews. Even when ScrollViews isn't used

Question

I am trying to build a react-native app, and I want to build a layout where I have components in a vertical manner and a transaction history, I am stuggling with the component to view transaction history which I am populating from a dummy data, I am faced with an error "VirtualizedLists should never be nested inside...". Even when I am not using ScrollViews. I have tried a couple of stackoverflow answers but it is still the Error (Not warning). Here is my Code:

`

import React from 'react';
import {View, Text, FlatList, TouchableOpacity, Image} from 'react-native';

import {colors, SIZES, fonts, icons} from '../global';

const TransactionHistory = ({customContainerStyle, history}) => {
  const renderItem = ({item}) => (
    <TouchableOpacity
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: SIZES.base,
      }}
      onPress={() => console.log(item)}>
      <Image
        source={icons.transaction}
        style={{
          width: 30,
          height: 30,
          tintColor: colors.primary,
        }}
      />
      <View style={{flex: 1, marginLeft: SIZES.radius}}>
        <Text style={{...fonts.android.h3}}>{item.description}</Text>
        <Text style={{color: colors.gray, ...fonts.android.body4}}>
          {item.date}
        </Text>
      </View>
    </TouchableOpacity>
  );



  return (
    <View
      style={{
        marginTop: SIZES.padding,
        marginHorizontal: SIZES.padding,
        padding: 20,
        borderRadius: SIZES.radius,
        backgroundColor: colors.white,
        ...customContainerStyle,
      }}>
      <Text style={{...fonts.android.h2}}>Transaction History</Text>  //Transaction History Heading
      <FlatList
          contentContainerStyle={{marginTop: SIZES.radius}}
          scrollEnabled={false}
          data={history}
          keyExtractor={item => `${item.id}`}
          renderItem={renderItem}
          showsVerticalScrollIndicator={false}
          ItemSeparatorComponent={() => {
            return (
              <View
                style={{
                  width: '100%',
                  height: 1,
                  backgroundColor: colors.lightGray,
                }}></View>
            );
          }}
        />
      </View>
  );
};
export default TransactionHistory;

`

What I tried?

One of the answers was to change the ScrollView tag to View, but I already used the view tag and not ScrollView.
Change ScrollEnabled to be False. This was false initially.
According to this solution (React-Native another VirtualizedList-backed container). I used I created the Flatlist outside of the View and used ListFooterComponent to call it. Still the same Error.

Expected Outcome:

I am Meant to have the populated data after the Transaction History Heading. Please let me know, if there is any solution to this, or another way to fufill the task. Thanks

Are you sure this is component causing the error not other? – iphonic Dec 14 '22 at 22:31 — iphonic, Dec 14 '22 at 22:31
Yes when I remove the flatlist here the error doesn't show – Weke Moyosore Dec 15 '22 at 06:55 — Weke Moyosore, Dec 15 '22 at 06:55

score 0 · Answer 1 · answered Dec 16 '22 at 07:29

I had a similar issue once where I was using a ScrollView in a shared Container parent component. Maybe worth checking again to see if TransactionHistory isn't nested under and ScrollView parent somewhere on the Screen.

Once I figured it was nested under a ScrollView, I essentially removed the Container and added the header and footer component around my SectionList using the ListHeaderComponent and ListFooterComponent props on the SectionList achieving the same functionality of having a ScrollView parent.

Example:

<SectionList
    renderSectionHeader={renderSectionHeader}
    sections={data}
    ListHeaderComponent={Header}
    renderItem={renderItem}
    contentContainerStyle={{ paddingBottom: bottom }}
/>

More info here

How to fix Error not warning: ERROR VirtualizedLists should never be nested inside plain ScrollViews. Even when ScrollViews isn't used

1 Answers1